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' } ] } }

Check webpack.DefinePlugin and pass the process.env manually in the webpack config. — zerkms
– zerkms, Commented May 19, 2016 at 0:15
I updated my question with my current webpack config file. @zerkms — Solo
– Solo, Commented May 19, 2016 at 0:23
"enviroment check works perfectly" --- you check environment for the server process, while react works in browser. — zerkms
– zerkms, Commented May 19, 2016 at 0:24

zerkms · Accepted Answer · 2016-05-19 00:22:02Z

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.

Collectives™ on Stack Overflow

React doesn't switch to production mode

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related