未定义 ReferenceError 进程：React、webpack 5、winston

问：

我正在开发一个基于 React 的 （v18） 客户端，该客户端使用 和 . 一旦我添加到项目并开始使用记录器，我收到了大约 20 个错误，这些错误说是因为缺少自 webpack 版本 5 以来不再包含在核心 Node.js 模块中的 polyfills。webpack 5winston 3.11.0winstonModule not found: Error: Can't resolve 'SOME PACKAGE NAME' in webpack

我按照错误堆栈跟踪中的提示进行了操作，并添加了所有缺少的 polyfills（在 webpack 配置文件中配置它们并使用 NPM 安装）。

这是我的：package.json

{
  "name": "calculator-client",
  "version": "1.0.0",
  "description": "Client for calculator.",
  "author": "Serhii Chernikov",
  "license": "ISC",
  "repository": {
    "type": "git",
    "url": "..."
  },
  "bugs": {
    "url": "..."
  },
  "engines": {
    "node": ">=18.0.0"
  },
  "main": "./src/index.tsx",
  "scripts": {
    "start:dev": "webpack serve --config webpack/webpack.dev.config.js",
    "build:prod": "webpack --config webpack/webpack.prod.config.js"
  },
  "dependencies": {
    "assert": "^2.1.0",
    "axios": "^1.5.1",
    "browserify-zlib": "^0.2.0",
    "buffer": "^6.0.3",
    "crypto-browserify": "^3.12.0",
    "https-browserify": "^1.0.0",
    "os-browserify": "^0.3.0",
    "path-browserify": "^1.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "url": "^0.11.3",
    "util": "^0.12.5",
    "winston": "^3.11.0"
  },
  "devDependencies": {
    "@babel/core": "^7.23.2",
    "@babel/plugin-transform-runtime": "^7.23.2",
    "@babel/preset-env": "^7.23.2",
    "@babel/preset-react": "^7.22.15",
    "@babel/preset-typescript": "^7.23.2",
    "@babel/runtime": "^7.23.2",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
    "@types/react": "^18.2.31",
    "@types/react-dom": "^18.2.14",
    "babel-loader": "^9.1.3",
    "css-loader": "^6.8.1",
    "dotenv": "^16.3.1",
    "html-webpack-plugin": "^5.5.3",
    "react-refresh": "^0.14.0",
    "style-loader": "^3.3.3",
    "ts-loader": "^9.5.0",
    "tsconfig-paths-webpack-plugin": "^4.1.0",
    "typescript": "^5.2.2",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1",
    "webpack-merge": "^5.10.0"
  }
}

这里是：webpack.common.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  entry: {
    main: path.resolve(__dirname, '..', './src/index.tsx')
  },
  output: {
    path: path.resolve(__dirname, '..', './dist'),
    filename: '[name].bundle.js'
  },
  resolve: {
    fallback: {
      util: require.resolve('util/'),
      os: require.resolve('os-browserify/browser'),
      http: require.resolve('stream-http'),
      zlib: require.resolve('browserify-zlib'),
      assert: require.resolve('assert/'),
      buffer: require.resolve('buffer/'),
      stream: require.resolve('stream-browserify'),
      path: require.resolve('path-browserify'),
      crypto: require.resolve('crypto-browserify'),
      url: require.resolve('url/'),
      https: require.resolve('https-browserify'),
      fs: false
    },
    alias: {
      '@components': path.resolve(__dirname, '../src/components'),
      '@config': path.resolve(__dirname, '../src/config'),
      '@images': path.resolve(__dirname, '../src/images'),
      '@locales': path.resolve(__dirname, '../src/locales'),
      '@api-interactor': path.resolve(__dirname, '../src/api-interactor'),
      '@style': path.resolve(__dirname, '../src/style'),
      '@utils': path.resolve(__dirname, '../src/utils'),
      '@logger': path.resolve(__dirname, '../src/logger')
    },
    extensions: ['.tsx', '.ts', '.js', '.jsx', '.json'],
    plugins: [
      new TsconfigPathsPlugin({
        configFile: './tsconfig.json'
      })
    ]
  },
  module: {
    rules: [
      {
        test: /\.ts(x?)$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'ts-loader']
      },
      {
        test: /\.js(x?)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
        type: 'asset/resource'
      },
      {
        test: /\.(woff(2)?|eot|ttf|otf|svg)$/,
        type: 'asset/inline'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '..', './src/index.html')
    })
  ]
};

（看一看 - 我根据错误堆栈跟踪的提示添加了它）resolve.fallback

现在，当我运行 Docker 容器时，我没有收到任何错误。但是，当我在浏览器中打开客户端时，出现以下错误：

Uncaught ReferenceError: process is not defined
    at ./node_modules/util/util.js (util.js:109:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/@colors/colors/lib/colors.js (colors.js:36:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/@colors/colors/safe.js (safe.js:9:1)
    at options.factory (react refresh:6:1)

我试图按照类似问题的答案之一中的建议运行，但没有成功。npm install process

该错误肯定与 winston（在本例中）有关，尤其是 .但是我无法弄清楚解决方法。@colors/colors

有什么建议吗？