18

I've created a basic app and deployed it for production. After running webpack -p and starting the server, I am now getting this console log error:

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

Here is my webpack.config.js file:

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

Am very new to React and Webpack especially. If anyone could kindly point out what's wrong and help me wrap my head around webpack (which is very confusing) then it would be forever thankful!

EDIT:

I added the webpack plugin and ran NODE_ENV=production webpack -p and got this error in terminal: 

/Users/Joseph/workspace/weather-fcc/webpack.config.js:27
    new webpack.DefinePlugin({
        ^

ReferenceError: webpack is not defined
    at Object.<anonymous> (/Users/Joseph/workspace/weather-fcc/webpack.config.js:27:9)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at requireConfig (/usr/local/lib/node_modules/webpack/bin/convert-argv.js:96:18)
    at /usr/local/lib/node_modules/webpack/bin/convert-argv.js:109:17` FWIW my webpack version is 1.12.9
doctopus
  • 5,349
  • 8
  • 53
  • 105

1 Answers1

22

Webpack 4 Update

If you're using webpack >= 4, you can set mode to production. This will automatically define NODE_ENV to production without needing to use the define plugin. https://webpack.js.org/concepts/mode/#mode-production.

It also seems that webpack has updated the -p flag to automatically define process.env.NODE_ENV to production in your bundled code (thanks @x-yuri for pointing this out). So while the answer below is now unnecessary, I'm keeping it there for reference and also as an explanation of how the webpack define plugin works.

Original answer + explanation

TLDR: Use the webpack define plugin to set process.env.NODE_ENV to production.

Long version:

React, Redux, and many other JS libraries include extra verifications and error logging that make development easier. However, you obviously don't want this in production since these make your codebase larger and slower. These checks are usually wrapped in statements that look like this:

if (process.env.NODE_ENV !== 'production') {
  // do development checks
}

The error you're getting is Redux telling you that although you've minified the code, process.env.NODE_ENV isn't set to production, so the development checks are still in place. To fix this, you'll want to use the webpack define plugin to set process.env.NODE_ENV to production.

var webpack = require('webpack');

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
  ]
};

Note that I'm defining the value of process.env.NODE_ENV to whatever it's set to for you when you run webpack. So to generate your production bundle, you'll want to run NODE_ENV=production webpack -p, not just webpack -p. This will replace any instance of process.env.NODE_ENV with production in your bundle. So that check that I showed above will now look like this:

if ('production' !== 'production') {
  // do development checks
}

Minifiers are smart enough to detect that the code in the if statement will never happen and will remove it from your production bundle. Thus, you get the best of both worlds: a better development experience and no extra code in your production bundle :)

taylorc93
  • 3,676
  • 2
  • 20
  • 34
  • Edited my original post. Added the plugin and still getting an error unfortunately! FWIW my webpack version is 1.12.9 – doctopus Apr 29 '17 at 11:42
  • Make sure that you have `var webpack = require('webpack')` at the top of your config file – taylorc93 Apr 29 '17 at 11:45
  • Working now! Wooohooo!! Awesome explanation about the webpack plugin - thank you! – doctopus Apr 29 '17 at 11:54
  • 2
    "For example, the --optimize-minimize flag will include the UglifyJSPlugin behind the scenes. The --define process.env.NODE_ENV="'production'" will do the same for the DefinePlugin instance described above. And, webpack -p will automatically invoke both those flags and thus the plugins to be included." Isn't running `webpack -p` [enough](https://webpack.js.org/guides/production/#cli-alternatives)? If you were to use `NODE_ENV` inside `webpack.config.js`, only then you'd need to prepend `NODE_ENV=production`. Am I missing anything? – x-yuri Apr 23 '18 at 20:55
  • Yes, you are correct. This has probably changed since I wrote this answer, but I'd still recommend understanding how this all works under the hood – taylorc93 Apr 24 '18 at 16:22
  • There's also an easier way to solve this problem if you're using webpack >= 4. I've updated my answer to include this solution – taylorc93 Apr 24 '18 at 16:23
  • What if you're seeing this error in development mode? – docta_faustus Aug 18 '22 at 19:03