React IPFS Cannot Compile

Help js-ipfs
1

I have a react app with ipfs as an npm installation. When I try to compile my project I get the following error:

Failed to compile
./node_modules/ipfs-core/src/components/add-all/index.js 201:35
Module parse failed: Unexpected token (201:35)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|       // Pin a file if it is the root dir of a recursive add or the single file
|       // of a direct add.
>       const isRootDir = !file.path?.includes('/');
|       const shouldPin = (opts.pin == null ? true : opts.pin) && isRootDir && !opts.onlyHash;

How do I fix this problem? Thanks

2 Likes
2

js-ipfs uses optional chaining which is supported in all modern browsers and node 14+.

I think babel config for this landed in react relatively recently so you may need to upgrade - see the notes at the top of this post.

3

That’s a nice article, but it didn’t help me.

"dependencies": {
  "@testing-library/jest-dom": "^5.11.4",
  "@testing-library/react": "^11.1.0",
  "@testing-library/user-event": "^12.1.10",
  "d3": "^6.7.0",
  "ipfs": "^0.55.1",
  "ipfs-core": "^0.6.1",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "react-scripts": "4.0.3",
  "web-vitals": "^1.0.1"
},
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test --env=jsdom"
},
"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ]
},
"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
},
"devDependencies": {
  "@babel/plugin-proposal-optional-chaining": "^7.14.2",
  "customize-cra": "^1.0.0",
  "react-app-rewired": "^2.1.8"
}

// .babelrc
{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

// config-overrides.js
const { useBabelRc, override } = require('customize-cra');
module.exports = override(useBabelRc());
4

I can confirm the same browser that can run code with the optional chaining operator will also show the same error.

I’m using react as suggested. I’ll try using a more recent version of create react app. I’m using version 4.0.3 according to npx create-react-app --version.

5

Creating a new project then adding one line breaks it consistently:

import IPFS from 'ifps-core';

I’m trying to run the app using yarn start on the newly added project.

6

I’m in a similar situation.

$ npx create-react-app --version
5.0.1

$ node -v
v18.2.0

$ npm -v
8.9.0

Is there any help on this?

7

I found this.
I was able to work it using this.