javascript - How to use webpack and web3 in React - Stack Overflow

admin管理员组

文章数量:1317898

I've just started a new react app from scratch. I followed instructions at

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",
    "pression-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 piled 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?

I've just started a new react app from scratch. I followed instructions at https://medium./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",
    "pression-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 piled 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?

• javascript
• reactjs
• webpack
• web3-react

Share Improve this question Follow edited Oct 24, 2022 at 20:33 TylerH 21.1k7777 gold badges7979 silver badges112112 bronze badges asked Oct 4, 2021 at 6:02 Alessandro SbenagliaAlessandro Sbenaglia 15333 silver badges1313 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 mon loader). Here is the draft:

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

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

本文标签： javascriptHow to use webpack and web3 in ReactStack Overflow