webpack warning - WARNING in DefinePlugin Conflicting values for '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

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.

Answer 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.