'webpack warning - WARNING in DefinePlugin Conflicting values for 'process.env.NODE_ENV'

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.

node.jsreactjsnpmwebpackbabeljs


Solution 1:[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')
    })
]

Solution 2:[2]

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. The mode parameter is the mode to be used when webpack is running, meaning during "build time" (or "compile time").
  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).

Solution

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.

Solution 3:[3]

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.

Solution 4:[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.

Solution 5:[5]

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.

Sources

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

Source: Stack Overflow

Solution Source
Solution 1 Nikolas L.
Solution 2 Manu Eidenberger
Solution 3 Dan
Solution 4 konclave
Solution 5

Related Questions