I've just started a new react app from scratch. I followed instructions at https://medium.com/age-of-awareness/setup-react-with-webpack-and-babel-5114a14a47e9
this is my package.json file
{
"name": "html2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack serve --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@babel/core": "^7.15.5",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.15.6",
"@babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"compression-webpack-plugin": "^9.0.0",
"html-webpack-plugin": "^5.3.2",
"webpack": "^5.56.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.3.0"
}
}
Everything goes well, run and build, until I try to add web3 package. I use
npm install web3 --save-dev
to install the package and I reference it into my index.js file using
import Web3 from "web3";
after that, If I try to run or build, I got a lot of error:
ERROR in ./node_modules/cipher-base/index.js 2:16-43
Module not found: Error: Can't resolve 'stream' in 'C:\developer\RFT\html2\node_modules\cipher-base'
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: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
@ ./node_modules/create-hash/browser.js 6:11-33
@ ./node_modules/ethereumjs-util/dist.browser/hash.js 24:17-39
@ ./node_modules/ethereumjs-util/dist.browser/index.js 30:13-30
@ ./node_modules/web3-utils/lib/utils.js 25:21-47
@ ./node_modules/web3-utils/lib/index.js 24:12-33
@ ./node_modules/web3/lib/index.js 35:12-33
@ ./src/index.js 3:0-24
ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227
Module not found: Error: Can't resolve 'crypto' in 'C:\developer\RFT\html2\node_modules\eth-lib\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: { "crypto": require.resolve("crypto-browserify") }'
- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "crypto": false }
@ ./node_modules/swarm-js/lib/api-browser.js 32:12-40
@ ./node_modules/web3-bzz/lib/index.js 23:12-31
@ ./node_modules/web3/lib/index.js 34:10-29
@ ./src/index.js 3:0-24
ERROR in ./node_modules/ethereumjs-util/dist.browser/account.js 42:31-48
Module not found: Error: Can't resolve 'assert' in 'C:\developer\RFT\html2\node_modules\ethereumjs-util\dist.browser'
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: { "assert": require.resolve("assert/") }'
- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "assert": false }
@ ./node_modules/ethereumjs-util/dist.browser/index.js 22:13-33
@ ./node_modules/web3-utils/lib/utils.js 25:21-47
@ ./node_modules/web3-utils/lib/index.js 24:12-33
@ ./node_modules/web3/lib/index.js 35:12-33
@ ./src/index.js 3:0-24
ERROR in ./node_modules/ethereumjs-util/dist.browser/address.js 7:31-48
Module not found: Error: Can't resolve 'assert' in 'C:\developer\RFT\html2\node_modules\ethereumjs-util\dist.browser'
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: { "assert": require.resolve("assert/") }'
- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "assert": false }
@ ./node_modules/ethereumjs-util/dist.browser/index.js 26:13-33
@ ./node_modules/web3-utils/lib/utils.js 25:21-47
@ ./node_modules/web3-utils/lib/index.js 24:12-33
@ ./node_modules/web3/lib/index.js 35:12-33
@ ./src/index.js 3:0-24
ERROR in ./node_modules/ethereumjs-util/dist.browser/object.js 26:31-48
Module not found: Error: Can't resolve 'assert' in 'C:\developer\RFT\html2\node_modules\ethereumjs-util\dist.browser'
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: { "assert": require.resolve("assert/") }'
- install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "assert": false }
@ ./node_modules/ethereumjs-util/dist.browser/index.js 42:13-32
@ ./node_modules/web3-utils/lib/utils.js 25:21-47
@ ./node_modules/web3-utils/lib/index.js 24:12-33
@ ./node_modules/web3/lib/index.js 35:12-33
@ ./src/index.js 3:0-24
ERROR in ./node_modules/web3-eth-accounts/lib/index.js 26:76-93
Module not found: Error: Can't resolve 'crypto' in 'C:\developer\RFT\html2\node_modules\web3-eth-accounts\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: { "crypto": require.resolve("crypto-browserify") }'
- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "crypto": false }
@ ./node_modules/web3-eth/lib/index.js 33:15-43
@ ./node_modules/web3/lib/index.js 30:10-29
@ ./src/index.js 3:0-24
ERROR in ./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js 7:193-227
Module not found: Error: Can't resolve 'crypto' in 'C:\developer\RFT\html2\node_modules\web3-eth-accounts\node_modules\eth-lib\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: { "crypto": require.resolve("crypto-browserify") }'
- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "crypto": false }
@ ./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/account.js 1:14-32
@ ./node_modules/web3-eth-accounts/lib/index.js 25:14-44
@ ./node_modules/web3-eth/lib/index.js 33:15-43
@ ./node_modules/web3/lib/index.js 30:10-29
@ ./src/index.js 3:0-24
ERROR in ./node_modules/web3-providers-http/lib/index.js 26:11-26
Module not found: Error: Can't resolve 'http' in 'C:\developer\RFT\html2\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 45:18-48
@ ./node_modules/web3-core/lib/index.js 22:23-58
@ ./node_modules/web3/lib/index.js 29:11-31
@ ./src/index.js 3:0-24
ERROR in ./node_modules/web3-providers-http/lib/index.js 27:12-28
Module not found: Error: Can't resolve 'https' in 'C:\developer\RFT\html2\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: { "https": require.resolve("https-browserify") }'
- install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "https": false }
@ ./node_modules/web3-core-requestmanager/lib/index.js 45:18-48
@ ./node_modules/web3-core/lib/index.js 22:23-58
@ ./node_modules/web3/lib/index.js 29:11-31
@ ./src/index.js 3:0-24
ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 21:11-26
Module not found: Error: Can't resolve 'http' in 'C:\developer\RFT\html2\node_modules\xhr2-cookies\dist'
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/xhr2-cookies/dist/index.js 6:9-38
@ ./node_modules/web3-providers-http/lib/index.js 25:11-49
@ ./node_modules/web3-core-requestmanager/lib/index.js 45:18-48
@ ./node_modules/web3-core/lib/index.js 22:23-58
@ ./node_modules/web3/lib/index.js 29:11-31
@ ./src/index.js 3:0-24
ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 22:12-28
Module not found: Error: Can't resolve 'https' in 'C:\developer\RFT\html2\node_modules\xhr2-cookies\dist'
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: { "https": require.resolve("https-browserify") }'
- install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "https": false }
@ ./node_modules/xhr2-cookies/dist/index.js 6:9-38
@ ./node_modules/web3-providers-http/lib/index.js 25:11-49
@ ./node_modules/web3-core-requestmanager/lib/index.js 45:18-48
@ ./node_modules/web3-core/lib/index.js 22:23-58
@ ./node_modules/web3/lib/index.js 29:11-31
@ ./src/index.js 3:0-24
ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 23:9-22
Module not found: Error: Can't resolve 'os' in 'C:\developer\RFT\html2\node_modules\xhr2-cookies\dist'
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: { "os": require.resolve("os-browserify/browser") }'
- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "os": false }
@ ./node_modules/xhr2-cookies/dist/index.js 6:9-38
@ ./node_modules/web3-providers-http/lib/index.js 25:11-49
@ ./node_modules/web3-core-requestmanager/lib/index.js 45:18-48
@ ./node_modules/web3-core/lib/index.js 22:23-58
@ ./node_modules/web3/lib/index.js 29:11-31
@ ./src/index.js 3:0-24
12 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
webpack 5.56.0 compiled with 12 errors in 14277 ms
What's happening? I'm trying with this solution, because my original project is in react (I think browserfy) without webpack and everything works but I think the chunks (even if splitted) is very big (over 3MB in some case). I'm not been able to optimize it and I thought about webpack. Is it right?
1.- In your webpack.config.js add:
2.- Execute
npm i --save-dev stream-http
3.- Same with https-browserify, crypto-browserify, os-browserify/browser ...