React Webpack Production errors

Question

I'm trying to setup a webpack (1.13.3) config for a React (15.3.2) app, and I want the production version of React in my production build. I'm on Windows.

I'm using this (which is everywhere online when you search):

new webpack.ProvidePlugin({
  'process.env': {
    'NODE_ENV': JSON.stringify('production')
  }
})

However, as soon as I add this and run webpack (CLI) I get slapped round the face with many many errors.

I get a whole bunch of these warnings :

WARNING in ./~/fbjs/lib/partitionObject.js.flow Module parse failed: C:\\node\\sandbox\\react-webpack\\node_modules\\fbjs\\lib[ SOME FILE NAME HERE].flow Unexpected token (18:24) You may need an appropriate loader to handle this file type.

...and a bunch of these errors :

ERROR in ./~/react/lib/NativeMethodsMixin.js Module not found: Error: Cannot resolve module 'react-native/lib/TextInputState' in C:\\node\\sandbox\\react-webpack\\node_modules\\react\\lib @ ./~/react/lib/NativeMethodsMixin.js 17:21-63

I'm not using React Native, I wouldn't know how.

I'm also using webpack.optimize.UglifyJsPlugin in my webpack.config.production.js file.

When I remove the webpack.ProvidePlugin bit the build works, but includes the development version of React and I get warnings in 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.

What are these webpack errors all about..? How do I get a production build of React which is also minified..?

UPDATE

Full webpack config requested. I've setup a test app for this, with minimum config and the warnings and errors are still showing:

webpack.config.js

module.exports = process.env.NODE_ENV === 'production' ? require('./webpack.config.production.js') : require('./webpack.config.development.js')

webpack.config.base.js

module.exports = {
  entry: {
    'bundle': './client/index.js'
  },
  output: {
    path: './public',
    filename: 'js/[name].js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: { presets: ['es2015', 'react'] }
      }
    ]
  }
}

webpack.config.development.js

var config = require('./webpack.config.base')
module.exports = config

webpack.config.production.js

var webpack = require('webpack')

var config = require('./webpack.config.base')

config.plugins = [
  new webpack.ProvidePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify('production')
    }
  }),
  new webpack.optimize.UglifyJsPlugin({
    include: /\.js$/,
    compress: { warnings: false }
  })
]

module.exports = config

The test app I'm using only has the following installed:

"dependencies": {
  "express": "^4.14.0",
  "react": "^15.3.2",
  "react-dom": "^15.3.2"
},
"devDependencies": {
  "babel": "^6.5.2",
  "babel-core": "^6.18.2",
  "babel-loader": "^6.2.7",
  "babel-preset-es2015": "^6.18.0",
  "babel-preset-react": "^6.16.0",
  "webpack": "^1.13.3"
}

/client/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import Hello from '../components/Hello'
ReactDOM.render(<Hello />, document.getElementById('page'))

/components/Hello.js

import React from 'react'
const Hello = props => <p>Hello world...</p>
export default Hello

Asked again in a separate question, but with the full error list, and from a React Native view, because the errors contain references to React Native, even though I'm not trying to use it:

Webpack in production: Why React Native errors?

Answer 1

Answered here: Webpack in production: Why React Native errors? by Aruna Herath.

I should be using DefinePlugin not ProvidePlugin .