Angular引入web3时util.js报process is not defined错误如何解决

问题根因 #

报错触发的原因是node_modules/util是Node.js原生适配的工具包，运行时会访问Node.js专属全局变量process，浏览器环境默认不存在该变量，你之前的配置存在两处核心问题：

1. webpack的DefinePlugin仅定义了process.env.NODE_ENV，未覆盖完整process对象，且字符串值未用JSON.stringify包裹，webpack编译时会将值识别为未定义变量而非字符串，配置完全不生效
2. Angular组件内部定义的process是组件类的实例属性，作用域仅局限在组件内部，第三方依赖的代码运行在全局作用域，完全无法访问该变量

可用解决方案（二选一即可） #

方案1：引入process浏览器polyfill（适配性最高，推荐）

1. 安装polyfill依赖
   npm install process --save-dev
2. 修改webpack.config.js的plugins配置段：

plugins: [
    // 全局注入process polyfill，所有第三方代码访问process时自动引入
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
    // 配置环境变量，必须用JSON.stringify包裹字符串值
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('develop'),
      'process.env.NODE_DEBUG': JSON.stringify('')
    })
],

修改完成后重新执行构建即可消除报错。

方案2：直接定义全局process对象（无需额外依赖）

如果不需要完整的process能力，仅需解决本次报错，可直接修改webpack.config.js的plugins配置：

plugins: [
    new webpack.DefinePlugin({
      'process': {
        env: {
          NODE_ENV: JSON.stringify('develop'),
          NODE_DEBUG: JSON.stringify('')
        }
      }
    })
],

其他无效方案说明 #

• 直接修改node_modules内的代码不生效是正常情况，webpack默认不会将手动修改的node_modules代码同步到构建产物，如需固化第三方包修改可使用patch-package工具，本次问题不需要该操作
• 在Angular组件/业务代码中声明变量的方案本身不适用于全局作用域的第三方依赖，无需再尝试

内容的提问来源于stack exchange，提问作者LeftBrain