Using Truffle-React + IPFS dependency issue

Question

Hooking up IPFS to my Truffle React project is causing me issues. I'm getting a dependency error (I'm thinking that's what's going on) that I can't find anything online about.

I've added IFPS to my working truffle project:

npm install --save ipfs-http-client

Now I'm trying to instantiate the ifps object in my App.js, like this:

const { create: ipfsHttpClient } = require('ipfs-http-client');

Adding this line causes an error that I'm not seeing anyone else talk about online. The browser spits out:

TypeError: TextDecoder is not a constructor ./node_modules/multiaddr/node_modules/multibase/src/util.js

C:/devroot/Solidity/ScriptureOfTheDay/client/node_modules/multiaddr/node_modules/multibase/src/util.js:7

   4 |       TextEncoder = _require.TextEncoder,

   5 |       TextDecoder = _require.TextDecoder;

   6 | 

>  7 | const textDecoder = new TextDecoder();

   8 | /**

   9 |  * @param {ArrayBufferView|ArrayBuffer} bytes

  10 |  * @returns {string}

This is from the Chrome console:

    **util.js:7 Uncaught TypeError: TextDecoder is not a constructor**
    at Object../node_modules/multiaddr/node_modules/multibase/src/util.js (util.js:7)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object../node_modules/multiaddr/node_modules/multibase/src/base.js (base.js:3)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object../node_modules/multiaddr/node_modules/multibase/src/constants.js (constants.js:5)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object../node_modules/multiaddr/node_modules/uint8arrays/to-string.js (to-string.js:3)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object../node_modules/multiaddr/src/ip.js (ip.js:5)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object../node_modules/multiaddr/src/convert.js (convert.js:3)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object../node_modules/multiaddr/src/codec.js (codec.js:3)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object../node_modules/multiaddr/src/index.js (index.js:3)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object../node_modules/ipfs-http-client/src/index.js (index.js:6)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Module.<anonymous> (App.js:7)
    at Module../src/App.js (App.js:96)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Module../src/index.js (index.css?e32c:37)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object.0 (serviceWorker.js:135)
    at __webpack_require__ (bootstrap:785)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Anyone have any ideas? I've re-installed node_modules and started from scratch - I just keep ending up here.

Answer 1

I found the answer: I had to go back to ipfs-client-http v33.1.1. Problem was solved immediately! The starting point for the project was downloaded from a teacher's github link on youtube and the video was 2019. So I needed to move back to a relative version of ipfs.

Note - there was another question out here (April 2021) that was the same but with ipfs itself instead of ipfs-client-http. If you run into this "TypeError: TextDecoder is not a constructor" -- try moving back to an older version of ipfs.