我刚刚从头开始了一个新的react应用程序。我按照https://medium.com/age-of-awareness/setup-react-with-webpack-and-babel-5114a14a47e9
上的说明操作这是我的包裹。json文件{
"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"
}
}
一切都很顺利，运行和构建，直到我尝试添加web3包。我使用
npm install web3 --save-dev
来安装包，并使用
将其引用到index.js文件中import Web3 from "web3";
之后，如果我尝试运行或构建，我得到了很多错误:
ERROR in ./node_modules/cipher-base/index.js 2:16-43
Module not found: Error: Can't resolve 'stream' in 'C:developerRFThtml2node_modulescipher-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:developerRFThtml2node_moduleseth-liblib'
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:developerRFThtml2node_modulesethereumjs-utildist.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:developerRFThtml2node_modulesethereumjs-utildist.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:developerRFThtml2node_modulesethereumjs-utildist.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:developerRFThtml2node_modulesweb3-eth-accountslib'
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:developerRFThtml2node_modulesweb3-eth-accountsnode_moduleseth-liblib'
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:developerRFThtml2node_modulesweb3-providers-httplib'
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:developerRFThtml2node_modulesweb3-providers-httplib'
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:developerRFThtml2node_modulesxhr2-cookiesdist'
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:developerRFThtml2node_modulesxhr2-cookiesdist'
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:developerRFThtml2node_modulesxhr2-cookiesdist'
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
发生了什么?我正在尝试这个解决方案，因为我原来的项目是在react(我认为browserfy)没有webpack和一切工作，但我认为块(即使分裂)是非常大的(在某些情况下超过3MB)。我没能优化它，我想到了webpack。对吗?
问题是Webpack不再为您解决这里列出的节点核心模块。基本上有两个选项可以解决与你使用web3的特定软件包相关的问题:
- 选项#1:这一个只是使用直接版本，它已经为位于
dist/web3.min.js的web构建了。然后把你的导入切换到
import Web3 from "web3/dist/web3.min";
但是，如果你的代码是TypeScript的话，这种方法会导致输入问题。
- 选项#2:这种方式与步骤1构建web3.min.js的方式相同，但它发生在你的webpack 5上。为了解析节点核心模块，您可以添加上面的回退列表并安装所需的软件包，或者使用这个来简化工作。请记住，不要将
node_modules从JS代码的加载器中排除(babel-loader总是一个常见的加载器)。这是草案:
// webpack.config.js
{
// ...
plugins: [
new NodePolyfillPlugin({
excludeAliases: ["console"]
}),
]
// ...
}
1。-在webpack.config.js中添加:
resolve: {
fallback: {
"os": require.resolve("os-browserify/browser"),
"https": require.resolve("https-browserify"),
"http": require.resolve("stream-http"),
"crypto": require.resolve("crypto-browserify")
}
}
2。—执行npm i --save-dev stream-http
3。- https-browserify、crypto-browserify、os-browserify/browser…