How to Solve Web3 import error
Error Messages:
Solution:
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.
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.
Solution:
Install react-app-rewired and the missing modules
Install react-app-rewired and the missing modules
1. Down the Dependency below
yarn:
If you are using yarn:
If you are using yarn:
yarn add --dev react-app-rewired process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer
npm:
If you are using npm:
npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
Create config-overrides.js
in the root of your project folder with the content
2. Create config-overrides.js
file in the main directory:
const webpack = require('webpack'); module.exports = function override(config) { const fallback = config.resolve.fallback || {}; Object.assign(fallback, { "crypto": require.resolve("crypto-browserify"), "stream": require.resolve("stream-browserify"), "assert": require.resolve("assert"), "http": require.resolve("stream-http"), "https": require.resolve("https-browserify"), "os": require.resolve("os-browserify"), "url": require.resolve("url") }) config.resolve.fallback = fallback; config.plugins = (config.plugins || []).concat([ new webpack.ProvidePlugin({ process: 'process/browser', Buffer: ['buffer', 'Buffer'] }) ]) return config; }
3.Modify package.json
Within package.json
change the scripts field for start, build and test. Instead of react-scripts
replace it with react-app-rewired
before:
Before:
"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },
After change:
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" },
4.Close the warning in the terminal
The missing Nodejs polyfills should be included now and your app should be functional with web3.
If you want to hide the warnings created by the console:
In config-overrides.js
within the override
function, add:
Add the following code in override
method of config-overrides.js
config.ignoreWarnings = [/Failed to parse source map/];
The above contents are the processing methods on Web3 GIT
Read More:
- How to Solve React devtools plug-in Error
- React error boundary (What You Should Know & How to Solve)
- [Solved] React Dependency Error: Invalid tag name “^np.0.2“ of package “react@^np.0.2“: Tags may not have an
- How to Solve electron import page Error
- [Solved] React Error: ReactDOM.render is no longer supported in React 18.
- How to Solve Vue3 Import lodash error
- How to React page to achieve entry and exit animation
- [Solved] react-router-dom Error: index.js:1 Warning: Functions are not valid as a React child.
- [Solved] React Invariant Violation: Minified React error #130
- [Solved] vue Project Error: react lazy eslint error Parsing error: Unexpected token import
- React native android: How to Upload Formdata
- [Solved] React Startup Error at the First time :SyntaxError: Unexpected token
- [Solved] Failed to load config “react-app“ to extend from.
- [Solved] react-quill failed to install error: Could not resolve dependency
- [Solved] React Click the Event to Modify the State Value Error
- How to Solve VUE Error: Mixed spaces and tabs
- SwiftUI 2.0: How to Import Files into iOS Apps
- [Solved] Error:The above error occurred in one of your React components & A component suspended while respondi
- [Solved] vite2+vue3 jsx Error: React is not defined
- How to Solve Phantomjs prebuilt error