ipfs keeps crashing my app with TypeError: TextDecoder is not a constructor ./node_modules/multiaddr/node_modules/multibase/src/util.js node_modules/multiaddr/node_modules/multibase/src/util.js:6

[andychri123]

• Version:

• Platform:

• Subsystem:

Severity:

Description:

Steps to reproduce the error:

I am trying to use ipfs in my react app but every time the page loads I get this error

×

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

multiaddr has installed an node_modules inside the node_modules in my app. Is the error coming from having the node_modules nested like this? I have seen other modules import from within the node_modules but not into another node_modules directory.

I my react component that interacts with IPFS is

import React, { Component, useEffect, useState } from "react";
//const IpfsHttpClient = require('ipfs-http-client')
//import * as ipfs from 'ipfs-http-client';
//const ipfsAPI = require('ipfs-api')


const IpfsHttpClient = require('ipfs-http-client')
//const { globSource } = IpfsHttpClient
const ipfs = IpfsHttpClient()

// connect to the default API address http://localhost:5001


const UploadImage = () => {
//  const dispatch = useDispatch();
//  const node = await useIpfs()
  const [request, setRequest] = useState({});
 // const client = ipfs()
//const ipfs = createClient();

  const handleSubmit = async  (data) => {
// add your data to to IPFS - this can be a string, a Buffer,
// a stream of Buffers, etc
  //    const results = node.add(data)
 //   const { cid } = await ipfs.add(data)

// we loop over the results because 'add' supports multiple 
// additions, but we only added one entry here so we only see
// one log line in the output
 //   for await (const { cid } of results) {
// CID (Content IDentifier) uniquely addresses the data
// and can be used to get it again.
  //  console.log(cid.toString())
   // }
  }

  return (
    <div>
      <form method="post" onSubmit={handleSubmit} enctype="multipart/form-data">
        <div>
          <label for="profile_pic">Choose file to upload</label>
          <input type="file" id="profile_pic" name="profile_pic"
                accept=".jpg, .jpeg">
          </input>
        </div>
        <div>
          <button>Submit</button>
        </div>
      </form>
    </div>
  )
}

export default UploadImage;

When I run my app without this component it works fine but when I run with this I get an error in the browser but not in the terminal. I am using node version v14.16.1 and npm version 6.14.12
Please help me I have been stuck on this for days.

[welcome]

Thank you for submitting your first issue to this repository! A maintainer will be here shortly to triage and review.
In the meantime, please double-check that you have provided all the necessary information to make this process easy! Any information that can help save additional round trips is useful! We currently aim to give initial feedback within two business days. If this does not happen, feel free to leave a comment.
Please keep an eye on how this issue will be labeled, as labels give an overview of priorities, assignments and additional actions requested by the maintainers:

• "Priority" labels will show how urgent this is for the team.
• "Status" labels will show if this is ready to be worked on, blocked, or in progress.
• "Need" labels will indicate if additional input or analysis is required.

Finally, remember to use https://discuss.ipfs.io if you just need general support.

[Gozala]

Hi @andychri123 are you by a chance using create-react-app ? It seems to require require configuration to handle
.cjs as a file extension, which on the other hand is used by nodejs in ESM style packages.

A change just landed to address that issue Gozala/web-encoding#21 and I hope it will resolve the problem you were experiencing.

Could you please let us know if that is indeed the case or if the issue you're seeing is unrelated.

Thanks

[Hesbon5600]

Hi @andychri123 are you by a chance using create-react-app ? It seems to require require configuration to handle
.cjs as a file extension, which on the other hand is used by nodejs in ESM style packages.

A change just landed to address that issue Gozala/web-encoding#21 and I hope it will resolve the problem you were experiencing.

Could you please let us know if that is indeed the case or if the issue you're seeing is unrelated.

Thanks

Hi @Gozala I am using create-react-app and I'm getting the same error

[Hesbon5600]

Hi @andychri123 are you by a chance using create-react-app ? It seems to require require configuration to handle
.cjs as a file extension, which on the other hand is used by nodejs in ESM style packages.
A change just landed to address that issue Gozala/web-encoding#21 and I hope it will resolve the problem you were experiencing.
Could you please let us know if that is indeed the case or if the issue you're seeing is unrelated.
Thanks

Hi @Gozala I am using create-react-app and I'm getting the same error

I just saw the PR was merged. Let me test it again

[achingbrain]

Is this still an issue? If so, could you please confirm what version of web-encoding is in your node_modules folder and if you have any duplicates?

[achingbrain]

This should be resolved now, if not please update to the latest version of ipfs and/or ipfs-core - web-encoding is not used any more.

If you still encounter problems, please reopen this issue.