Angular: utils/util.js -> Uncaught ReferenceError: process is not defined

Posted 2023-02-18

【中文标题】Angular: utils/util.js -> Uncaught ReferenceError: process is not defined

【英文标题】：

【发布时间】：2022-01-07 15:29:02

【问题描述】：

我觉得这应该简单解决，但经过几次尝试，我还是没有解决。

这是我收到的错误：

Uncaught ReferenceError: process is not defined
38509 @ [PathToProject]\node_modules\util\util.js:109

当我将 web3 实例化为一个干净/新的站点时会触发此问题（还有两个其他“测试”组件，一个链接一个按钮）

我已经搜索并发现大量信息表明

process 是一个服务器端的“节点”变量，我可以通过添加到我的 webpack.config.js 将其设置为客户端可用，我已经这样做了。 我也许可以通过在我的 app.component.ts 中声明一个全局角度变量来解决，但似乎这个依赖项目 .js 文件没有访问它。

我也尝试过直接更新依赖项目，但即使编译，我的更改似乎也没有分发到 webpack build /dist/ 结果中。

我认为这可能有一个非常简单的解决方案，但我只是忽略了它。我只是在这里打转轮胎，可能需要一点帮助，但我是我圈子中第一个冒险进入 web3 的人，并且没有亲密的朋友可以摆脱它。有人可以在这里提供一些见解或解决此问题的替代方法吗？

相关代码：

webpack.config.js

var webpack = require('webpack');
const path = require('path');


module.exports = 
    module: 
      rules: [
        
          test: /\.(sass|less|css|ts)$/,
          use: [
            'ts-loader'
          ],
        
      ],
    ,
    plugins: [
        new webpack.DefinePlugin(
          'process.env.NODE_ENV': 'develop',
        )
    ],
    entry: './src/main.ts',
    output: 
      filename: 'main.js',
      path: path.resolve(__dirname, 'dist'),
    ,
    resolve: 
      extensions: [ '.js', '.ts', '.html' ],
      modules: [
          path.resolve(__dirname, 'node_modules/'),
          path.resolve("", "src")
      ],
      alias: 
          Environments: path.resolve(__dirname, 'src/environments/'),
      ,
      fallback: 
        "fs": false,
        "tls": false,
        "net": false,
        "path": false,
        "zlib": false,
        "http": require.resolve("stream-http"),
        "https": require.resolve("https-browserify"),
        "stream": false,
        "crypto": require.resolve("crypto-browserify"),
        "crypto-browserify": require.resolve('crypto-browserify'),  
    , 
    

全局常量.ts

export class GlobalConstants 
    public static process: any  = 
        env: 
            NODE_ENV: 'development'
        
    

app.component.ts

import  Component  from '@angular/core';
import GlobalConstants  from './common/global-constants';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
)
export class AppComponent 
  title = 'Cool Title';
  process = GlobalConstants.process;

utils/util.js 的相关部分（第 106-116 行）

var debugs = ;
var debugEnvRegex = /^$/;

if (process.env.NODE_DEBUG) 
  var debugEnv = process.env.NODE_DEBUG;
  debugEnv = debugEnv.replace(/[|\\()[\]^$+?.]/g, '\\$&')
    .replace(/\*/g, '.*')
    .replace(/,/g, '$|^')
    .toUpperCase();
  debugEnvRegex = new RegExp('^' + debugEnv + '$', 'i');

真诚感谢任何帮助。

【问题讨论】：

1 天后找到了您的问题，遇到了完全相同的问题。你在哪里导入util？

Util 有几个层次：\n main.js -> 使用 web3 \n web3 index.js -> require('web3-core') \n web3-core index.js ->要求（“web3-core-requestmanager”）； \n web3-core-requestmanager index.js -> require('util'); \n\n 我已经搜索了 2 天以上，大多数解决方案都是使用 webpack DefinePlugin，但这对我来说没有什么区别。想知道这是否是由于其中一个库最近发生了变化。

【参考方案1】：

将以下内容添加到 polyfills.ts（通常在 src 目录中）：

    (window as any).global = window;
    global.Buffer = global.Buffer || require('buffer').Buffer;
    global.process = require('process');

【讨论】：

谢谢你。我不知道如何利用 polyfill。通过一些额外的故障排除，我能够让我的页面至少正常执行。