Skip to main content

How to Resolve the Webpack Error: "Conflicting values for 'process.env.NODE_ENV'"

The Webpack warning Conflicting values for 'process.env.NODE_ENV' occurs when the value you set for process.env.NODE_ENV in the DefinePlugin is different from the value Webpack is using for its mode configuration.

This guide will explain why this conflict happens and show you the modern, standard way to solve it by deriving the DefinePlugin value directly from the mode option, ensuring they are always in sync.

The Core Problem: mode vs. DefinePlugin​

In Webpack, there are two key places where the environment (development or production) is configured:

  1. The mode Configuration Option: Introduced in Webpack 4, this is the primary way to tell Webpack how to build your project. Setting mode to 'production' or 'development' enables a large number of built-in optimizations for that specific environment.
  2. webpack.DefinePlugin: This plugin is used to create global constants that can be accessed in your application code. A very common use case is to define process.env.NODE_ENV, which is used by libraries like React to enable or disable development-only features (like warnings).
note

The conflict arises when the value of mode and the value you manually set in DefinePlugin do not match.

The Cause of the Conflict​

When you set mode: 'production', Webpack automatically runs new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }) for you under the hood.

If you then also manually define it in your plugins array with a different value, Webpack detects the conflict.

Problem: in this example, mode is 'production', but DefinePlugin is hardcoded to 'development'.

// webpack.config.js

module.exports = {
  // 1. Webpack is told to build in 'production' mode.
  mode: 'production',
  
  plugins: [
    // 2. But the plugin is told the environment is 'development'.
    // ⛔️ This creates a conflict.
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ]
};
note

This results in the warning: Conflicting values for 'process.env.NODE_ENV'.

The modern and most robust solution is to never hardcode process.env.NODE_ENV in your DefinePlugin. Instead, export a function from your webpack.config.js and use the mode argument that Webpack provides to dynamically set the value.

This ensures they are always in sync.

Solution:

// webpack.config.js
const webpack = require('webpack');

// Export a function instead of a configuration object.
module.exports = (env, argv) => {
  // `argv.mode` will be 'production', 'development', or 'none',
  // depending on how Webpack was run.
  const mode = argv.mode || 'development'; // Default to 'development' if not set

  return {
    // Use the `mode` variable for the main config.
    mode: mode,
    
    // ... your other webpack config (entry, output, etc.)
    
    plugins: [
      // Use the `mode` variable to set the value in DefinePlugin.
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(mode)
      })
      // ... other plugins
    ]
  };
};
note

With this setup, the mode and DefinePlugin values will always match, completely eliminating the warning.

How to Set the mode in Webpack​

Now that your config is dynamic, you can control the mode from the command line when you run Webpack.

The Command:

# To run a production build:
npx webpack --mode=production

# To run a development build:
npx webpack --mode=development

This value is passed to your webpack.config.js function in the argv object, and the configuration is generated accordingly. You can add these commands to the scripts section of your package.json for convenience.

// package.json
{
  "scripts": {
    "build": "webpack --mode=production",
    "dev": "webpack serve --mode=development"
  }
}

Conclusion​

The "Conflicting values for 'process.env.NODE_ENV'" warning is a helpful message from Webpack that your configuration is inconsistent.

  • The root cause is a mismatch between the mode option and the value manually set in webpack.DefinePlugin.
  • The recommended best practice is to export a function from your webpack.config.js that accepts argv as an argument.
  • Use argv.mode to dynamically set both the main mode property and the process.env.NODE_ENV value inside DefinePlugin, ensuring they are always synchronized.

Table of Contents