Why webpack gives an error for about NODE_ENV?

Question

I am using webpack+react+redux on a web application. And I am using webpack-dev-server to launch dev web server. When I access my application on a browser, it gives below error messages on the console:

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. 

You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux. You can use loose-envify  to ensure you have the correct code for your production build.

Below is my webpack.config.js file. I didn't specify production mode, why webpack gives me such warning message? And how can I get rid of it?

const webpack = require('webpack');
const path = require('path');
const NpmInstallPlugin = require('npm-install-webpack-plugin');
const WebpackShellPlugin = require('webpack-shell-plugin');
var CompressionPlugin = require("compression-webpack-plugin");

const PATHS = {
  react: path.join(__dirname, 'node_modules/react/dist/react.min.js'),
  app: path.join(__dirname, 'src'),
  build: path.join(__dirname, './dist')
};

module.exports = {
  entry: {
    app: './app/index.jsx',
    android: './app/utils/platform_android.js',
    ios: './app/utils/platform_ios.js',
    web: './app/utils/platform_web.js',
    vendor: [
      'axios',
      'react',
      'react-dom',
      'react-redux',
      'react-router',
      'react-router-redux',
      'redux',
      'redux-thunk',
      'react-alert',
      'sha1',
      'moment',
      'nuka-carousel',
      'react-cookie',
      'material-ui',
      'react-spinkit',
      'react-tap-event-plugin',
      'react-tappable',
    ],
  },
  output: {
    path: PATHS.build,
    filename: '[name].bundle.js',
  },
  watch: true,
  devtool: 'source-map',
  relativeUrls: true,
  resolve: {
    extensions: ['', '.js', '.jsx', '.css', '.less'],
    modulesDirectories: ['node_modules'],
    alias: {
      normalize_css: __dirname + '/node_modules/normalize.css/normalize.css',
    }
  },
  module: {
    preLoaders: [

      {
        test: /\.js$/,
        loader: "source-map-loader"
      },
      // {
      //   test: /\.js$/,
      //   exclude: /node_modules/,
      //   loader: 'jshint-loader'

      // }
    ],
    loaders: [

      {
        test: /\.html$/,
        loader: 'file?name=[name].[ext]',
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets=es2015',
      },
      {
        test: /\.less$/,
        loader: "style!css!less",
      },
      {test: /\.css$/, loader: 'style-loader!css-loader'},
      {test: /\.png$/, loader: "url-loader?limit=100000"},

      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ['babel-loader?presets=es2015']
      },
      {
      test: /\.svg$/,
      loader: 'svg-sprite',
      include: /public\/icons/
    }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
      },
      output: {
        comments: false,
      },
    }),
    new NpmInstallPlugin({
      save: true // --save
    }),

    new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.html$/,
      threshold: 10240,
      minRatio: 0.8
    }),
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */["vendor"], /* filename= */"[name].bundle.js", Infinity),
  ],
  devServer: {
    colors: true,
    contentBase: __dirname,
    historyApiFallback: true,
    hot: true,
    inline: true,
    port: 9093,
    progress: true,
    stats: {
      cached: false
    }
  }
}

EDIT1:

I removed this line:

react: path.join(__dirname, 'node_modules/react/dist/react.min.js'),

Then updated the NODE_ENV to development as below:

new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("development")
      }
    })

Then I still got the same warning.

warning.js:14You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production build.

score 1 · Answer 1 · answered Aug 10 '16 at 06:06

1

I don't know how to say it more clear than webpack does...

You are not in a production build mode, but using a minified version of React. Use a non-minified one, so replace

react: path.join(__dirname, 'node_modules/react/dist/react.min.js'),

with

react: path.join(__dirname, 'node_modules/react/dist/react.js'),

or whatever place where you have your react not minified.

And this is not an error - it is a warning, so you can still work with this one.

Just another thing by the way: path.join adds proper slashes for each operating system. What you do here is

path.join(__dirname, 'node_modules/react/dist/react.min.js')

when you should go with

path.join(__dirname, 'node_modules', 'react', 'dist', 'react.min.js')

This is how the path should be properly used

answered Aug 10 '16 at 06:06

smnbbrv

23,502
9
78
109

Does that mean I need to define two webpack config files? One for dev mode, one for production mode? And most of these two files are same with just a few lines different, right? – Joey Yi Zhao Aug 10 '16 at 07:43
It seems that I didn't use the react path anywhere in my config file so I removed it. I have edited my post and still got the same error. – Joey Yi Zhao Aug 10 '16 at 09:06
@ZhaoYi well two webpack files is quite a normal practice, however you can use a non minified version and a UglifyJS webpack plugin on top of it which will minify everything including your code. Concerning the second comment: is the error the same? About react??? – smnbbrv Aug 10 '16 at 09:33

score 0 · Accepted Answer · answered Aug 10 '16 at 09:46

The warning you get now is because you are letting Webpack minify your build, but you are still setting NODE_ENV to development.

If you use UglifyJsPlugin you should always set NODE_ENV to production. If you're not building for production, remove UglifyJsPlugin to not get any warnings.

Webpack, React and Redux try to give you some best practice hints here. In development mode (NODE_ENV not set to production), they all give more warnings and have lower performance. When you minify them they assume you're running a production build. For production builds, they really expect NODE_ENV to be set correctly.

So in short:

Production builds: set NODE_ENV to production and use UglifyJsPlugin.
Dev builds: set NODE_ENV to development and don't use any minification plugins.

score 0 · Answer 3 · answered Aug 10 '16 at 12:40

I fixed it by removing below configuration from webpack.config.js for development build. It seems that this plugin will compress the js code which is not suitable for development mode.

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false,
  },
  output: {
    comments: false,
  },
})

Why webpack gives an error for about NODE_ENV?

3 Answers3