React doesn't switch to production mode

Question

Warning in browser console:

bundle.js:1 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 http://facebook.github.io/react/downloads.html for more details.

---

Scripts from package.json:

  "scripts": {
    "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
    "start:dev": "webpack-dev-server --inline --content-base public/ --history-api-fallback",
    "start:prod": "webpack && node server.js"
  },

---

Command in Git Bash:

NODE_ENV=production npm start

---

If I use console.log(process.env.NODE_ENV) in server.js, I get production.

• React is installed via npm
• Latest version: 15.0.2
• I use Webpack UglifyJs plugin

Any idea what could be wrong?

---

From the link in first blockquote:

Note: by default, React will be in development mode. To use React in production mode, set the environment variable NODE_ENV to production (using envify or webpack's DefinePlugin). A minifier that performs dead-code elimination such as UglifyJS is recommended to completely remove the extra code present in development mode.

Am I missing something? Do I really need some kind of 3rd party package or plugin to set variable? But it already console logs that it's in production enviroment.. Doesn't seem logical to me.

---

Update: current webpack.config.js

var webpack = require('webpack')

module.exports = {
  entry: './index.js',

  output: {
    path: 'public',
    filename: 'bundle.js',
    publicPath: '/'
  },

  plugins: process.env.NODE_ENV === 'production' ? [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin()
  ] : [],

  module: {
    loaders: [
      { 
          test: /\.js$/, 
          exclude: /node_modules/, 
          loader: 'babel-loader?presets[]=es2015&presets[]=react' 
      }
    ]
  }
}

Answer 1

That's how I usually do that:

new webpack.DefinePlugin({
    'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
    },
}),

And pass that to the array of the webpack plugins.

Why the problem happens: when wepack processes code - the code being processed is not actually run but simply read+processed. So when you run it - then it's too late to access environment variables.

You're checking the environment for the process running on server, while react runs in the browser so obviously it does not have access to the server process environment variables. Hence you need to inject it there explicitly during build time.