webpack React - It looks like you are using a minified copy of the development build

Problem: It looks like you’re using a minified copy of the development build of React.

So you may have found this message in your console log like I did. There is a link to the react downloads explaining that you need to set NODE_ENV to production so you get the production version of React. This doesn’t have some of the code that is useful for debugging in the development version.

You may also be surprised by this as you have tried to set NODE_ENV to production and it is not working.

eg: I had this in my packages.json:

"prod": "NODE_ENV=production webpack --progress --colors --config webpack.config.js"

A console log also showed it was being set correctly to production:

console.log(process.env.NODE_ENV)

After some searching I found this webpack issue that seemed to suggest something funky was going on. It looks like I need to use webpacks’s DefinePlugin. I was already using the UglifyJSPlugin, but perhaps you will need that too. // you may need to change to single quotes as the markdown parsing seems to have a bug in this post You may be able to get away with:

plugins:[
  new webpack.DefinePlugin({
    // you may need to change to single quotes as the markdown parsing seems to have a bug in this post
    "process.env":{
      "NODE_ENV": JSON.stringify('production')
    }
  }),

but I use webpack-config, so in my webpack.base.config.js I have:

new webpack.DefinePlugin({
  // you may need to change to single quotes as the markdown parsing seems to have a bug in this post
  "process.env": {
    "NODE_ENV": '"' + process.env.NODE_ENV + '"'
  }
}),

This allows me to use the NODE_ENV passed in from packages.json.

A quick hack to get webpack using the production version of React and it seems to be working for now.