ReferenceError process is not defined: React, webpack 5, winston

Question

I'm working on a React-based (v18) client that uses webpack 5 and winston 3.11.0. Once I added winston to the project and started using a logger, I got around 20 errors which said Module not found: Error: Can't resolve 'SOME PACKAGE NAME' in webpack because of the missing polyfills which are no longer included in core Node.js modules since the webpack version 5.

I followed hints in the error stack trace and added all missing polyfills (configured them in a webpack config file and installed using NPM).

Here is my 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"
  }
}

Here is 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')
    })
  ]
};

(take a look at resolve.fallback – I added it based on hints from the error stack trace)

Now, when I run the Docker container, I don't get any errors. But then, when I open up my client in a browser, I get this error:

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)

I tried to run npm install process as suggested in one of the answers on a similar question, but it didn't work out.

The error is definitely related to the winston (in this case), particularly to @colors/colors. But I can't figure out the work around.

Any suggestions?