'Uncaught ReferenceError: process is not defined in webpack

I was working on a React app with typescript. I got it working, then I wanted to add css-loader and changed the webpack from 4 to 5 and updated all packages to latest versions. Then I got the error in the console (not when building it, but in the browser)

Uncaught ReferenceError: process is not defined at Array.<anonymous> (app.js:10:1) at __webpack_require__

Something is wrong with the settings, but i can't find it.

{
  (...)
  "scripts": {
    "build": "NODE_ENV=production webpack --config webpack.config.js"
  },
  "dependencies": {
    "react": "^18.1.0",
    "react-dom": "^18.1.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.4",
    "@types/webpack": "^5.28.0",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.3.0",
    "typescript": "^4.6.4",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2"
  }
}

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "none",
  entry: {
    app: path.join(__dirname, "src", "index.tsx"),
  },
  target: "web",
  resolve: {
    extensions: [".ts", ".tsx", ".js",".css"],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: "/node_modules/",
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "src", "index.html"),
    }),
  ],
  watch: true,
};

how can i solve it? Thanks a lot for your help



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source