Webpack: Conflicting values for 'process.env.NODE_ENV'

# Webpack: Conflicting values for 'process.env.NODE_ENV'

The Webpack DefinePlugin error "Webpack: Conflicting values for 'process.env.NODE_ENV'" occurs when you configure DefinePlugin incorrectly or try to reassign process.env.NODE_ENV when instantiating the plugin.

The DefinePlugin() instantiation code in your webpack.config.js file should look similar to the following.

Copied!
const webpack = require('webpack');

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

Make sure to replace production with your specific NODE_ENV value, e.g. development.

You can also set the process.env.NODE_ENV value based on the value of the environment variable.

Copied!
const webpack = require('webpack');

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

You can also set the mode option to tell Webpack to use its built-in optimization based on the supplied value.

Copied!
const webpack = require('webpack');

module.exports = {
    mode: 'development', // or 'production'
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development')
        })
    ]
}

You can also set the option when using the CLI.

Copied!
# 👇️ Webpack 5+
npx webpack watch --mode development

# 👇️ Webpack 4
npx webpack --mode=development --watch

Make sure to run the correct command depending on your Webpack version.

If you need to check your Webpack version, check out the following article.

The mode option can be set to production or development.

• development - sets process.env.NODE_ENV on DefinePlugin to have a value of development. This enables names for modules and chunks and helps you when debugging.

• production - sets process.env.NODE_ENV on DefinePlugin to have a value of production. This enables shorter names for modules and chunks to decrease your bundle size.

If the mode option is not set, then it defaults to production.

The mode option and the process.env.NODE_ENV value in your DefinePlugin have to be the same, otherwise, the warning is shown.

You have to make sure that the mode option has the same value as the process.env.NODE_ENV property in your DefinePlugin.

If you want to set the mode and the process.env.NODE_ENV values dynamically using the CLI, export a function instead of an object from your webpack.config.js file.

Copied!
const webpack = require('webpack');

module.exports = (env, argv) => {
  // 👇️ If the mode isn't set, defaults to `development`
  // This could also be `production`
  const mode = argv.mode || 'development';

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

We used the logical OR (||) operator to default the value of the mode argument to development.

You could also use a default value of production if that suits your use case.

The argv object can be used to read the command line arguments.

You can set the mode option using a command line argument.

Copied!
# 👇️ Webpack 5+
npx webpack watch --mode development

# 👇️ Webpack 4
npx webpack --mode=development --watch

Make sure to run the correct command depending on your Webpack version.

I've also written an article that shows how to set the process.env.NODE_ENV environment variable in multiple ways.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• React not reading .env file Environment Variables [Solved]
• 'export' is not recognized as an internal or external command
• How to add Comments to a .env file - Complete Guide
• Cannot find module 'webpack' error [Solved]
• webpack: command not found error [Solved]