'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 |
|---|
