0
488
ViewsWeb3 Issue : React Application not compiling
I am facing issue with React application while compilation. Please find the issue below and screenshot.
ERROR in ./node_modules/web3-providers-http/lib/index.js 30:11-26
Module not found: Error: Can't resolve 'http' in '/Users/rohit/Downloads/Personal/web3/react-minting-website/node_modules/web3-providers-http/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "http": false }
@ ./node_modules/web3-core-requestmanager/lib/index.js 56:16-46
@ ./node_modules/web3-core/lib/index.js 23:23-58
@ ./node_modules/web3/lib/index.js 32:11-31
@ ./src/index.js 10:0-24 14:13-17
On scrutiny, I found out Issue is with web3 related dependencies :
https://www.npmjs.com/package/web3
https://www.npmjs.com/package/@web3-react/core
https://www.npmjs.com/package/@web3-react/injected-connector
Can someone please help me with the same? I am using LTS versions, What are stable versions of these?
Please suggest something.
3 answers
Answer question0
Update 25/01/2022
Now web3.js have updated their readme to included troubleshooting steps. Visit the link to know more.
Currently CRA ships react-scripts with version 5.0.0. Instead of ejecting CRA, just downgrade react-scripts to version 4.0.3. I was facing the same issue, downgrading worked for me.
First remove old version
npm uninstall react-scripts
Then run the following:
npm i react-scripts@4.0.3
0
as webpack grows in size, they removed the polyfills in webpack5. Looks like you are using create-react-app (CRA) and webpack configuration is not exposed to the user in CRA. you can expose it using eject. you might have this script in package.json:
"eject": "react-scripts eject"
so run npm run eject. This is not recommended because it means that you will no longer benefit from the updates of CRA.
you can handle ejecting with either rewire or craco.
After you get the webpack configuration, you need to add resolve property to webpack config and install all those required packages :
resolve: {
extensions: [".js", ".css"],
alias: {
// add as many aliases as you like!
// optional
components: path.resolve(__dirname, "src/components"),
},
fallback: {
// path: require.resolve("path-browserify"),
fs: false,
assert: require.resolve("assert/"),
os: require.resolve("os-browserify/browser"),
constants: require.resolve("constants-browserify"),
stream: require.resolve("stream-browserify"),
crypto: require.resolve("crypto-browserify"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
},
},
I have webpac5 Boilerplate. you can use it if you want:
Since there are too many polyfills, instead of manually installing all, you can use node-polyfill-webpack-plugin package. instead of
fallbackpropertyconst NodePolyfillPlugin = require("node-polyfill-webpack-plugin"); plugins: [ new HtmlWebpackPlugin({ title: "esBUild", template: "src/index.html", }), // instead of fallback new NodePolyfillPlugin(), new webpack.ProvidePlugin({ process: "process/browser", Buffer: ["buffer", "Buffer"], React: "react", }), ],
0
Web3 and Create-react-app If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.
Refer the Solution in the Below link
https://github.com/ChainSafe/web3.js#troubleshooting-and-known-issues