How do you configure Webpack to clear the React Warning for production minification?

Question

I am sure everyone has seen this error but here it is again:

Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See https://facebook.github.io/react/docs/optimizing-performance.html#use-the-production-build for more details.

So of course I followed the instructions in the link provided, yet though I have made all the necessary updates to my code, I am still getting this error.

According to some other answers I have seen on StackOverflow and Github, the process.env.NODE_ENV being set to production through the Webpack plugin DefinePlugin tells React to build using the minified version. So I logged process.env.NODE_ENV in my main application component and it is in fact being set to production by the plugin and still I am getting the warning.

So even though the environment variable is being set to production, I am getting the warning and my React Dev Tools says:

This page is using the development build of React. 🚧 Note that the development build is not suitable for production. Make sure to use the production build before deployment.

I cannot seem to isolate where the problem might be here since I have done all the necessary changes to get the production build to work.

Here is my webpack.config.js file:

const webpack = require('webpack');
const resolve = require('path').resolve;
const SRC_BASE = resolve(__dirname, 'src');
const merge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const argv = require('yargs').argv;
const HtmlWebpackPlugin = require('html-webpack-plugin');

const definePlugin = new webpack.DefinePlugin({
  __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
  __PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false')),
  __PRODUCTION__: JSON.stringify(JSON.parse(process.env.NODE_ENV === 'production' || 'false')),
  'process.env': {
    NODE_ENV: process.env.NODE_ENV === 'production' ? // set NODE_ENV to production or development
      JSON.stringify('production') : JSON.stringify('development'),
  },
});

const loaderOptionsPlugin = new webpack.LoaderOptionsPlugin({ options: { context: __dirname } });
const commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
const cssOutput = new ExtractTextPlugin({ filename: 'style.css', allChunks: true });
const sourceMapPlugin = new webpack.SourceMapDevToolPlugin({ filename: '[name].map' });
const htmlPlugin = new HtmlWebpackPlugin({
  template: `${SRC_BASE}/index.template.ejs`,
  filename: '../index.html', // relative to public/build/ so this is public/index.html
  inject: true,
  hash: true,
});

let config = {
  cache: true,
  entry: {
    main: ['babel-polyfill', resolve(SRC_BASE, 'index')],
  },
  output: {
    path: resolve(__dirname, 'public/build'),
    filename: '[name].bundle.js',
    publicPath: '/build/',
    sourceMapFilename: '[name].map',
  },
  resolve: {
    modules: [
      SRC_BASE,
      'node_modules',
    ],
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: [/\.jsx$/, /\.js$/],
        loader: 'babel-loader',
        exclude: /(local_modules|node_modules|bower_components)/,
        query: {
          presets: [
            'react',
            'es2015',
            'stage-1',
          ],
        },
      },
      {
        test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
        loader: 'file-loader',
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader!sass-loader',
        }),
      },
    ],
  },
  node: {
    fs: 'empty',
  },
  plugins: [
    definePlugin,
    commonsPlugin,
    cssOutput,
    htmlPlugin,
    loaderOptionsPlugin,
    sourceMapPlugin,
  ],
};

// Only load dashboard if we're watching the code
if (argv.watch) {
  const DashboardPlugin = require('webpack-dashboard/plugin');
  config = merge(config, { plugins: [new DashboardPlugin()] });
}

if (process.env.NODE_ENV === 'production') {
  console.log('******* I AM MERGING PRODUCTION CONFIGS ******');
  console.log(`process.env.NODE_ENV = ${process.env.NODE_ENV}`);
  config = merge(config, {
    devtool: 'cheap-module-source-map',
    plugins: [
      new webpack.LoaderOptionsPlugin({
        minimize: true,
        debug: false,
      }),
      new webpack.optimize.UglifyJsPlugin(),
    ],
    module: {
      rules: [
        { test: /redux-logger/, loader: 'null-loader' },
      ],
    },
  });
}

module.exports = config;

And here is my gulpfile.js tasks that runs gulp build --production :

/* Production Builds use this task */
gulp.task('webpack', (done) => {
  if (argv.production) {
    process.env.BUILD_DEV = false;
    process.env.NODE_ENV = 'production';
  }

  const buildConfig = require('./webpack.config');
  const compiler = webpack(buildConfig);
  const tag = '[webpack]';
  const info = gutil.colors.green;
  const error = gutil.colors.red;
  const warning = gutil.colors.yellow;

  const filterStackTraces = err =>
      err.toString().split(/[\r\n]+/).filter(line => ! line.match(/^\s+at Parser/)).join(EOL);

  if (argv.watch) {
    compiler.watch({}, (err, stats) => {
      const statDetails = stats.toJson();
      if (err) {
        gutil.log(error(tag), err.toString({ colors: true }));
      }
      else if (stats.hasErrors()) {
        statDetails.errors.forEach(ex => gutil.log(error(tag), filterStackTraces(ex)));
      }
      else if (stats.hasWarnings()) {
        statDetails.warnings.forEach(wx => gutil.log(warning(tag), filterStackTraces(wx)));
      }
      else {
        statDetails.chunks.forEach(chunk => {
          if (chunk.entry) gutil.log(info(tag), `Built ${chunk.files[0]} (${chunk.size} bytes)`);
        });
        gutil.log(info(tag), 'Build complete');
      }
    });
  }
  else {
    compiler.run((err, stats) => {
      if (err) {
        return done(new gutil.PluginError('webpack', err));
      }
      if (stats.hasErrors()) {
        const statDetails = stats.toJson();
        statDetails.errors.forEach(ex => gutil.log(error(tag), filterStackTraces(ex)));
        return done(new gutil.PluginError('webpack', 'Parse/ build error(s)'));
      }
      gutil.log(gutil.colors.green(tag), stats.toString({ colors: true }));
      done();
    });
  }
});

gulp.task('build', ['webpack']);

Answer 1

After stumbling around the interweb for some different ways to configure webpack to overcome this problem I found a configuration option in the UglifyJsPlugin that cleared the error.

plugins: [
    new webpack.optimize.UglifyJsPlugin({
      include: /\.min\.js$/, <------This option fixed it
    })
  ]

All though this cleared the warning in the console, I am still seeing my React Dev Tools saying that it is not using the production version.

Answer 2

I've had the same problem, but it doesn't seem to be a problem with webpack- it's likely something to do with Gulp. Have you tried running webpack with the config directly from the command line (ie webpack --config webpack-build.config.js or whatever) ? That produced a build without the warning quite happily. Here's my webpack config, cobbled together from various sources:

 const path = require('path') const webpack = require('webpack') module.exports = { devtool: 'cheap-module-source-map', entry: './src/scripts/app', output: { path: path.join(__dirname, 'dist/scripts'), filename: 'bundle.js', publicPath: '/static/' }, module: { loaders: [ { test: /\\.js$/, loader: 'babel-loader', query: { presets: ['env', 'react'] } } ] }, plugins: [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production') } }), new webpack.LoaderOptionsPlugin({ minimize: true, debug: false }), new webpack.optimize.UglifyJsPlugin({ beautify: false, mangle: { screw_ie8: true, keep_fnames: true }, compress: { screw_ie8: true }, comments: false }) ] } 

If I track down what's going on with gulp + webpack I'll write an update.