进程未定义——ReferenceError

Question

解决 Create React App 项目中的“进程未定义”错误需要配置 webpack 的resolve.fallback 选项，以便为浏览器环境中不可用的 Node.js 核心模块提供 polyfill 或模拟实现。

const { override } = require('customize-cra');
const webpack = require('webpack');

module.exports = override((config) => {
  config.resolve.fallback = {
    ...config.resolve.fallback,
    'process': false, // Set 'process' to false instead of using a mock
    'zlib': require.resolve('browserify-zlib'),
    'querystring': require.resolve('querystring-es3'),
    'stream': require.resolve('stream-browserify'),
    'path': require.resolve('path-browserify'),
    'fs': false,
    'timers': require.resolve('timers-browserify'),
    'crypto': require.resolve('crypto-browserify'),
    'http': require.resolve('stream-http'),
    'https': require.resolve('https-browserify'),
    'net': require.resolve('net-browserify'),
    'url': require.resolve('url/'),
    'assert': require.resolve('assert/'),
    'vm': require.resolve('vm-browserify'),
    'async_hooks': false,
    'child_process': false,
  };

  // Exclude the 'destroy' package
  config.module.rules.push({
    test: /\/node_modules\/destroy\//,
    use: 'null-loader',
  });

  // Resolve conflicting values for 'process.env'
  config.plugins.push(
    new webpack.EnvironmentPlugin({
      NODE_ENV: process.env.NODE_ENV === 'debug',
    })
  );

  return config;
});

我遇到的错误

process is not defined
ReferenceError: process is not defined
    at ./node_modules/readable-stream/lib/_stream_writable.js (http://localhost:3000/static/js/bundle.js:130687:18)
    at options.factory (http://localhost:3000/static/js/bundle.js:227078:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:226477:32)
    at fn (http://localhost:3000/static/js/bundle.js:226736:21)
    at ./node_modules/readable-stream/readable-browser.js (http://localhost:3000/static/js/bundle.js:131512:20)
    at options.factory (http://localhost:3000/static/js/bundle.js:227078:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:226477:32)
    at fn (http://localhost:3000/static/js/bundle.js:226736:21)
    at ./node_modules/browserify-sign/browser/index.js (http://localhost:3000/static/js/bundle.js:33021:14)
    at options.factory (http://localhost:3000/static/js/bundle.js:227078:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:226477:32)
    at fn (http://localhost:3000/static/js/bundle.js:226736:21)
    at ./node_modules/crypto-browserify/index.js (http://localhost:3000/static/js/bundle.js:40757:12)
    at options.factory (http://localhost:3000/static/js/bundle.js:227078:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:226477:32)
    at fn (http://localhost:3000/static/js/bundle.js:226736:21)
    at ./node_modules/etag/index.js (http://localhost:3000/static/js/bundle.js:58075:14)
    at options.factory (http://localhost:3000/static/js/bundle.js:227078:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:226477:32)
    at fn (http://localhost:3000/static/js/bundle.js:226736:21)

Answer 1

“进程未定义”错误通常是因为进程对象（Node.js 全局对象）在运行 React 应用程序的浏览器环境中不会自动可用。您应该在项目的 webpack 配置中为该流程设置适当的 polyfill。

您当前的配置设置了 'process': false，这明确告诉 webpack 不要填充或模拟此模块，因此会出现错误。

您不需要将 process 设置为 false，而是需要使用模拟 process 对象的 polyfill。一个常用的包是 process。 如果尚未安装，您可以通过运行将其添加到您的项目中：

npm install process

修改您的 webpack 配置以使用进程 polyfill。

const { override } = require('customize-cra');
const webpack = require('webpack');

module.exports = override((config) => {
  config.resolve.fallback = {
    ...config.resolve.fallback,
    'process': require.resolve('process/browser'),  // Use the process polyfill
    'zlib': require.resolve('browserify-zlib'),
    'querystring': require.resolve('querystring-es3'),
    'stream': require.resolve('stream-browserify'),
    'path': require.resolve('path-browserify'),
    'fs': false,  // No polyfill for fs
    'timers': require.resolve('timers-browserify'),
    'crypto': require.resolve('crypto-browserify'),
    'http': require.resolve('stream-http'),
    'https': require.resolve('https-browserify'),
    'net': require.resolve('net-browserify'),
    'url': require.resolve('url/'),
    'assert': require.resolve('assert/'),
    'vm': require.resolve('vm-browserify'),
    'async_hooks': false,
    'child_process': false,
  };

  config.module.rules.push({
    test: /\/node_modules\/destroy\//,
    use: 'null-loader',
  });

  // Ensure the NODE_ENV is set correctly
  config.plugins.push(
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'production',  // Set this according to your environment needs
    })
  );

  return config;
});

此设置使用进程/浏览器polyfill，它模拟浏览器环境中的进程对象。通过使用 require.resolve('process/browser')，您基本上可以确保 webpack 在捆绑过程中正确找到并集成模块。

进行这些更改后，请确保重新启动开发服务器以使更改生效。