CODEWITHSUNDEEP
reactjswebpackproduction-environment
Fernando Jose Torres Bermudez
Fernando Jose Torres Bermudez

Reputation: 91

Uncaught Error: React is running in production mode, but dead code

when I`m deploy my project in production, out me this error:

Uncaught Error: React is running in production mode, but dead code elimination has not been applied. Read how to correctly configure React for production:

My webpack file have this code in plugins section:

 `new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('production')
  }),
  new webpack.optimize.AggressiveMergingPlugin(),
  new webpack.optimize.UglifyJsPlugin({
    minimize: true
  }),
  new CompressionPlugin({
    asset: '[path].gz[query]',
    algorithm: 'gzip',
    test: /\.js$|\.css$|\.html$/,
    threshold: 10240,
    minRatio: 0.8
  })`

Thanks for your help

Upvotes: 7

Views: 8832

Answers (1)

Christopher Phillips
Christopher Phillips

Reputation: 146

Michal Zalecki has a very good article on how to Optimize React for production with Webpack:

https://michalzalecki.com/optimize-react-build-for-production-with-webpack/#remove-dead-code-with-tree-shaking

There are two things to check based on the error given to you here.

1) The first should be to remove the minimize option.

This will allow you to go into your production bundle to see /* unused harmony export fact */ comments being inserted.

If those are not being inserted I would go into your Bable config and make sure the code is being properly transpiled under the es2015 preset. Tree shaking only works for ES2015 modules.

2) I would also be sure to include the source-map devtool option if you're not already doing so. Source maps are dope, but I'll allow our friends at teamtreehouse to explain why:

http://blog.teamtreehouse.com/introduction-source-maps

Upvotes: 2

Related Questions