那些遇到过的问题

如何在 React 中使用 webpack 和 web3

Ale*_*lia 3 javascript reactjs webpack web3-react

我刚刚从头开始一个新的反应应用程序。我按照https://medium.com/age-of-awareness/setup-react-with-webpack-and-babel-5114a14a47e9上的说明进行操作

这是我的 package.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"
  }
}
Run Code Online (Sandbox Code Playgroud)

一切都很顺利，运行和构建，直到我尝试添加 web3 包。我用

npm install web3 --save-dev
Run Code Online (Sandbox Code Playgroud)

安装该包并将其引用到我的 index.js 文件中

import Web3 from "web3";
Run Code Online (Sandbox Code Playgroud)

之后，如果我尝试运行或构建，我会收到很多错误：

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
Run Code Online (Sandbox Code Playgroud)

发生了什么？我正在尝试这个解决方案，因为我原来的项目是在没有 webpack 的情况下进行反应（我认为 browserfy）并且一切正常，但我认为块（即使拆分）非常大（在某些情况下超过 3MB）。我无法优化它，我想到了 webpack。这样对吗？

tmh*_*005 9

问题是 Webpack 不再为您解析此处列出的节点核心模块。基本上有 2 个选项可以解决与您使用 web3 的特定软件包相关的问题：

  • 选项#1：这个只是使用已经为位于dist/web3.min.js. 然后将您的导入切换为：
import Web3 from "web3/dist/web3.min";
Run Code Online (Sandbox Code Playgroud)

但是，如果您的代码是 TypeScript，这种方式最终可能会出现输入问题。

  • 选项#2：这种方式与步骤 1 构建 web3.min.js 的方式相同，但它发生在你的 webpack 5 上。为了解析节点核心模块，你可以添加上面的后备列表并安装它们所需的包或使用这是为了让生活更轻松。请记住，不要node_modules从加载器中排除 JS 代码（babel-loader始终是通用加载器）。这是草案：
// webpack.config.js
{
  // ...
  plugins: [
    new NodePolyfillPlugin({
      excludeAliases: ["console"]
    }),
  ]
  // ...
}
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

3446 次

最近记录：

3 年，2 月 前
相关归档
为什么我 - 比循环中的i ++更快？ 231
Angular 2可选路由参数 144
检测滚动事件是否由用户创建 71
从数组中删除第一个元素并返回数组减去第一个元素 64
图像在React Native中调整大小 56
如何通过javascript访问屏幕显示的DPI设置？ 48
StorybookJS 中的模拟 useState 11
有没有办法在webpack 2中禁用树摇动？ 7
VelocityJS(速度 - 动画)+ WebPack - 我该如何使用它？ 5
vue-cli 与 Webpack：如何自定义分割导入块？ 2
难疑归档
如何重命名本地Git分支？ 8033
我怎么知道通过jQuery选择了哪个单选按钮？ 2583
"最小的惊讶"和可变的默认论证 2458
如何确定数组是否包含Java中的特定值？ 2194
在终端上打印颜色？ 1929
如何在Bash中的分隔符上拆分字符串？ 1885
接口和抽象类之间有什么区别？ 1705
按值对地图<键,值>进行排序 1569
接口与抽象类(通用OO) 1372
将标签重新定义为4个空格 1041