React IPFS Cannot Compile

Archive 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.