开发者问题收集

Webpack 捆绑错误:无法读取未定义的属性

2021-07-20
3311

我的 Web 应用程序使用 Webpack 5.45.1 作为模块捆绑器,唯一的库是以太坊 web3.js 1.4.0。

// webpack configuration file
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
const path = require('path');

module.exports = {
    mode: 'development',
    output: {
        path: path.resolve(__dirname, 'dist/dev'),
        filename: '[name].bundle.js',
    },
    entry: {
        index: './src/index.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['css-loader'],
            }
        ]
    },
    plugins: [
        new NodePolyfillPlugin()
    ]
}

入口点包含一个语句: import Web3 from 'web3';

使用浏览器执行生成的捆绑包时出现以下错误:

assertion_error.js:486 Uncaught TypeError: Cannot read property 'custom' of undefined
    at eval (assertion_error.js:486)
    at eval (assertion_error.js:500)
    at Object../node_modules/assert/build/internal/assert/assertion_error.js (index.bundle.js:1063)
    at __webpack_require__ (index.bundle.js:6721)
    at eval (assert.js:38)
    at Object../node_modules/assert/build/assert.js (index.bundle.js:1052)
    at __webpack_require__ (index.bundle.js:6721)
    at eval (index.js:3)
    at Object../node_modules/console-browserify/index.js (index.bundle.js:1624)
    at __webpack_require__ (index.bundle.js:6721)

我发现, undefined 是此表达式的值: require('util/').inspect

有人可以提供关于如何修复它的提示吗?

2个回答

这是因为,当您想在浏览器或客户端环境中使用 web3 时,您必须手动将预构建的 “node_modules/web3/dist/web3.min.js” 包含到带有脚本标记的 html 中。这就是文档中描述的方式,或者您只是从 cdn 获取它。

您应该只这样做:

import web3 from "web3";

如果您想在 nodejs 运行时(服务器端代码或命令行)中运行它。

如果您坚持自己构建它,那么您必须克隆 web3.js git 存储库并运行 npm run build ,然后获取 /dist/web3.min.js 文件,并将其包含在页面的 html 脚本标记中,这仍然是几乎相同的事情并且没有必要。

仔细阅读文档并亲自查看。 web3.js github 仓库

Benjamin
2021-08-30

事实证明,我的问题出在 NodePolyfillPlugin 上,它有一个与循环依赖相关的错误。我在 github 上打开了 issue

Ilya Loskutov
2021-08-30