You are currently using minified code outside of NODE_ENV === 'production'. This means you are running a slower Redux development

I created a basic application and deployed it for production. After starting webpack -p and starting the server, now I get an error message in the console:

You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production build. 

Here is my webpack.config.js file:

 module.exports = { entry: [ './src/index.js' ], output: { path: __dirname, publicPath: '/', filename: 'bundle.js' }, module: { loaders: [{ exclude: /node_modules/, loader: 'babel', query: { presets: ['react', 'es2015', 'stage-1'] } }] }, resolve: { extensions: ['', '.js', '.jsx'] }, devServer: { historyApiFallback: true, contentBase: './' } }; 

Very new to React and Webpack especially. If someone can kindly indicate what happened, and help me wrap my head around the web package (which is very confusing), then this will be forever grateful!

EDIT:

I added the webpack plugin and ran NODE_ENV=production webpack -p and got this error in the terminal:

 /Users/Joseph/workspace/weather-fcc/webpack.config.js:27 new webpack.DefinePlugin({ ^ ReferenceError: webpack is not defined at Object.<anonymous> (/Users/Joseph/workspace/weather-fcc/webpack.config.js:27:9) at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at requireConfig (/usr/local/lib/node_modules/webpack/bin/convert-argv.js:96:18) at /usr/local/lib/node_modules/webpack/bin/convert-argv.js:109:17` FWIW my webpack version is 1.12.9 
+5
source share
1 answer

TL; DR . Use webpack define plugin to set process.env.NODE_ENV to production.

Long version:

React, Redux, and many other JS libraries include additional checks and error logging that simplify development. However, you obviously do not want this in production, as they make your code base larger and slower. These checks are usually wrapped in expressions that look like this:

 if (process.env.NODE_ENV !== 'production') { // do development checks } 

The error you are getting is Redux telling you that although you minimized the code, process.env.NODE_ENV not set to production , so development checks still exist. To fix this, you will want to use the webpack define plugin to set process.env.NODE_ENV in production.

 var webpack = require('webpack'); module.exports = { entry: [ './src/index.js' ], output: { path: __dirname, publicPath: '/', filename: 'bundle.js' }, module: { loaders: [{ exclude: /node_modules/, loader: 'babel', query: { presets: ['react', 'es2015', 'stage-1'] } }] }, resolve: { extensions: ['', '.js', '.jsx'] }, devServer: { historyApiFallback: true, contentBase: './' }, plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) }), ] }; 

Note that I am defining the value of process.env.NODE_ENV for what it configured for you when running webpack. Therefore, to generate your production package, you need to run NODE_ENV=production webpack -p , not just webpack -p . This will replace any instance of process.env.NODE_ENV with production in your kit. Thus, the check that I showed above will now look like this:

 if ('production' !== 'production') { // do development checks } 

Minifiers are smart enough to detect that the code in the if statement will never happen and remove it from your production package. Thus, you get the best of both worlds: the best development experience and the lack of additional code in your production team :)

+9
source

Source: https://habr.com/ru/post/1267312/


All Articles