webpack 警告 - DefinePlugin 中的警告“process.env.NODE_ENV”的值冲突

Question

I'm getting the warning in the title when I try to run development mode. This script used to work fine for an earlier website but now I always get this warning.

This is my package.json:

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.12",
    "@babel/preset-react": "^7.12.13",
    "babel-loader": "^8.2.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "webpack": "^5.27.2",
    "webpack-cli": "^4.5.0"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "react-router-dom": "^5.2.0"
  }
}

And my webpack.config.js:

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/frontend"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        // This has effect on the react lib size
        NODE_ENV: JSON.stringify("production"),
      },
    }),
  ],
};

I've searched around everywhere but couldn't find anything similar to this warning.

Answer 1

try changing

new webpack.DefinePlugin({
      "process.env": {
        // This has effect on the react lib size
        NODE_ENV: JSON.stringify("production"),
      },
    }),

to

plugins: [
    new webpack.DefinePlugin({
        'process.env.NODE_ENV' : JSON.stringify('production')
    })
]

Answer 2

Thanks for helping everyone, very much appreciated!

I ended up replacing "production" with "development" in the following snippet of the webpack.config:

plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        // This has effect on the react lib size
        NODE_ENV: JSON.stringify("development"),
      },
    }),
  ]

It got rid of the warning but I'm wondering what impact this has.

Answer 3

You are saying you "try to run development mode". According to your package.json that means running:

webpack --mode development --watch (NOTE: v4 syntax)

1. That mode parameter already set webpack's own mode , that is the mode to be used when webpack is running, meaning during " build time ", or "compile time" if you will.
2. The DefinePlugin checks that variable when you try to define it for your " run time " (which is different from " build time "), and thus warns you if the two are different ( code here ).

Soloution : Make sure, mode in your webpack.config object (or in the CLI command, which overrides it in the config object) is the same as the one you pass to the DefinePlugin .

How to access webpack CLI parameters in webpack.config.js ?

If you want to be able to provide the mode parameter from CLI or a package.json script, and still have the DefinePlugin not give a warning (meaning you get that value from the CLI and plug that into the DefinePlugin ), do this:

Change the contents of your webpack.config.js from your module.exports = { mode: ..., rules: ... }; (or export default {... } ) config object to a function as shown below. This function works exactly the same (you return the final config object), but allows reading environment variables from the first parameter env , as well as webpack CLI options from the second argument argv :

module.exports = (env, argv) => {
  // `mode` is `'XX'` if you ran webpack like so: `webpack watch --mode XX` (v5 syntax)
  const mode = argv.mode || 'development'; // dev mode by default

  // ...

  return {
    mode,   // this is optional, since webpack already knows the `mode` from the CLI parameter
    // ...
    plugins: [
      // ...
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(mode)
      })
    ]
    // ...
  };
};

PS : You are using Webpack@4. If you used Webpack@5, you would have to change webpack --mode development --watch to webpack watch --mode development .

PPS : Always prefer 'process.env.NODE_ENV': JSON.stringify('X') over 'process.env': JSON.stringify({ NODE_ENV: 'X' }) , since the former safely replaces all occurrences of process.env.NODE_ENV in your code with "X" , while the latter replaces any occurrence of process.env with { "NODE_ENV": "X" } . That in turn is likely going to mess up other environment variables. Example: process.env.Y will become { "NODE_ENV": "X" }.Y which is undefined .

Answer 4

This error means that you tried to reassign process.env.NODE_ENV in DefinePlugin call with the value different from it has before.

You can set it implicitly by adding mode option to config, or adding nodeEnv key to optimization . Or just set the environment variable before you run webpack.

And it looks like that is your case. You set NODE_ENV=development somewhere, ran webpack, and then you are trying to reassign it to production .

Check how do you run webpack and NODE_ENV environment value.

Answer 5

Just asnwered here: https://stackoverflow.com/a/70141040/7841170

In my case it was wrong path.

I ran the command from git Bash with wrong camelCase letters.

like: c://Dev/Product

instead of: c://dev/Product

Fixed the path and it works.

Answer 6

The value in  NODE_ENV: JSON.stringify("this_value_here") 
should match the value inside package.json "scripts": {
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
  }, 

If you are running "npm run dev" , keep the JSON.stringify("development") , if you are running "npm run build" ,change it to JSON.stringify("production") . Basically, match it to the type of mode you are running.