How to use webpack and web3 in React

Question

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?

score 9 · Answer 1 · edited Oct 24 '22 at 20:34

9

The problem is Webpack no longer resolved node core modules for you which is listed here. Basically there're 2 options to resolve the issue related to your particular package you use web3:

Option #1: This one is just use the direct version which has been built already for web located in dist/web3.min.js. So then switch your import to that:

import Web3 from "web3/dist/web3.min";

However, this way can end up typing issue if your code is TypeScript.

Option #2: This way is identical the way they build web3.min.js as step 1 but it happens on yours with webpack 5. In order to resolving node core modules you can either add above fallback list and install them needed packages or use this one to make life easier. Keep in mind, do not exclude node_modules from the loader for JS code (babel-loader is always a common loader). Here is the draft:

// webpack.config.js
{
  // ...
  plugins: [
    new NodePolyfillPlugin({
      excludeAliases: ["console"]
    }),
  ]
  // ...
}

edited Oct 24 '22 at 20:34

TylerH

20,799
66
75
101

answered Oct 04 '21 at 09:17

tmhao2005

14,776
2
37
44

thank you! now I'm wondering if my guess is correct: should I use webpack to reduce chunks or is there a way to do it even with my origina project ? – Alessandro Sbenaglia Oct 04 '21 at 09:45
Not sure what do you mean? – tmhao2005 Oct 04 '21 at 11:08
my website is very slow (no cache from chrome). The total time to download the biggest chunk (one of many) is about 40sec for 3MB of stuff (I think now it's a problem with my connection and webserver). Anyway I need to reduce this, and I thought to webpack that has more options. isn't it though? – Alessandro Sbenaglia Oct 04 '21 at 12:10
Yes it has couple of techniques. Basically you may know splitting smaller chunks which cam be loaded faster. Additionally you can search for code splitting with webpack which is about removing unused code which makes the bundle smaller. – tmhao2005 Oct 04 '21 at 12:27

score 1 · Answer 2 · edited Oct 24 '22 at 20:34

1.- In your webpack.config.js add:

resolve: {
      fallback: {
        "os": require.resolve("os-browserify/browser"),
        "https": require.resolve("https-browserify"),
        "http": require.resolve("stream-http"),
        "crypto": require.resolve("crypto-browserify")
      }
    }

2.- Execute npm i --save-dev stream-http

3.- Same with https-browserify, crypto-browserify, os-browserify/browser ...

How to use webpack and web3 in React

2 Answers2

Linked