ReactJS shows error when uglifying even with production ENV with Webpack

问题

In order to drop the file size for the react app, I had to use the UglifyJsPlugin from Webpack, and it dropped from 1.5MB to ~450KB which is still a lot for the small app that I created BUT usable.

The problem is that now it shows an error because it says that I'm trying to uglify a development version of ReactJS, and instead I should use the production version, but nothing works. I've searched and searched online, tried plenty of different solutions, nothing removed the following error:

This is my code:

gulp.task('js', function() {
  return gulp.src(['./source/components/index.js'])
    .pipe(gulpWebpack({
      output: {
        filename: "./index.js",
      },
      module: {
        loaders: [
          {
            test: /\.js$/,
            include: __dirname + "/source",
            exclude: /(node_modules|bower_components|dist)/,
            loader: 'babel-loader',
            query: {
              presets: ['es2015', 'react']
            }
          },
          {
            test: /\.scss$/,
            loaders: [
              'style-loader',
              'css-loader?modules&importLoaders=1',
              'autoprefixer-loader?{browsers:["> 1%"]}',
              'sass-loader'
            ]
          },
          {
            test: /\.(png|jpg|gif|svg|eot|woff2?|ttf|otf|svg)$/,
            loader: "url-loader"//?limit=10000
          },
          {
            test: /\.html$/,
            loader: "html-loader"
          }
        ]
      },
      plugins: process.env.NODE_ENV === 'production' ? [
        new webpack.DefinePlugin({
          'process.env': {
            // This has effect on the react lib size
            NODE_ENV: JSON.stringify('production')
          }
        }),
        new webpack.optimize.UglifyJsPlugin()
      ] : []
    }))
    .pipe(gulp.dest('./dist/scripts'));
});

I tried a bunch of ideas I found online, like aliases (by changing 'react' to '~react', etc..., but get more errors and it doesn't fix the original error).

gulp.task('js', function() {
  return gulp.src(['./source/components/index.js'])
    .pipe(gulpWebpack({
      output: {
        filename: "./index.js",
      },
      resolve: {
        alias: process.env.NODE_ENV === 'production' ? {
          "~react": path.join(__dirname, './node_modules/react/dist/react.min.js'),
          "~react-dom": path.join(__dirname, './node_modules/react-dom/dist/react-dom.min.js')
        } : {
          "~react": path.join(__dirname, './node_modules/react/react.js'),
          "~react-dom": path.join(__dirname, './node_modules/react-dom/index.js')
        }
      },
      module: {
        noParse: [
          path.resolve(__dirname, './node_modules/react/dist/react.min.js'),
          path.join(__dirname, './node_modules/react-dom/dist/react-dom.min.js')
        ],
        loaders: [
          {
            test: /\.js$/,
            include: __dirname + "/source",
            exclude: /(node_modules|bower_components|dist)/,
            loader: 'babel-loader',
            query: {
              presets: ['es2015', 'react']
            }
          },
          {
            test: /\.scss$/,
            loaders: [
              'style-loader',
              'css-loader?modules&importLoaders=1',
              'autoprefixer-loader?{browsers:["> 1%"]}',
              'sass-loader'
            ]
          },
          {
            test: /\.(png|jpg|gif|svg|eot|woff2?|ttf|otf|svg)$/,
            loader: "url-loader"//?limit=10000
          },
          {
            test: /\.html$/,
            loader: "html-loader"
          }
        ]
      },
      plugins: process.env.NODE_ENV === 'production' ? [
        new webpack.DefinePlugin({
          'process.env': {
            // This has effect on the react lib size
            NODE_ENV: JSON.stringify('production')
          }
        }),
        new webpack.optimize.UglifyJsPlugin()
      ] : []
    }))
    .pipe(gulp.dest('./dist/scripts'));
});

But then I get this error:

If I don't Uglify, everything is good, BUT the file size is so big the app takes a bunch to load, which is bad for a website.

来源：https://stackoverflow.com/questions/43267458/reactjs-shows-error-when-uglifying-even-with-production-env-with-webpack