If (process.env.NODE_ENV === 'production') is always false

Question

When trying to create an angular -webpack application by running the build command from this list of scripts on package.json:

"scripts": { "test": "NODE_ENV=test karma start", "build": "if exist dist rd /s /q dist && mkdir dist && set NODE_ENV=production && webpack && cp app/index.html dist/index.html", "start": "webpack-dev-server --content-base app" }, 

this is the result on the console:

 $ npm run build > webpack-ng-egg@1.0.0 build M:\Learning webpack\egghead.io - AngularJS - Angula r and Webpack for Modular Applications\webpack-ng-egg > if exist dist rd /s /q dist && mkdir dist && set NODE_ENV='production' && webp ack && cp app/index.html dist/index.html process.env.NODE_ENV : 'production' process.env.NODE_ENV === 'production' ???? : false Hash: c3136b0024cbd48ccb2e Version: webpack 1.13.2 Time: 3185ms Asset Size Chunks Chunk Names bundle.js 1.23 MB 0 [emitted] main + 10 hidden modules 

this is what the webpack.config.js file looks like:

  var webpack = require('webpack'); var path = require('path'); var config = { context: path.resolve(__dirname, "app"), entry:'./app.js', output: { path : __dirname + '/app', filename:'bundle.js' // il ne sera pas généré dans le code, juste en mémoire }, plugins:[ new webpack.DefinePlugin({ ON_TEST:process.env.NODE_ENV === 'test' }) ], module:{ loaders: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, loader: 'babel', // 'babel-loader' is also a legal name to reference query: { presets: ['es2015'] } }, { test: /\.css$/, loader: "style-loader!css-loader", exclude: /(node_modules|bower_components)/ }, { test: /\.html$/, exclude: /(node_modules|bower_components)/, loader: 'raw', // 'babel-loader' is also a legal name to reference }, { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader', exclude: /(node_modules|bower_components)/ } ] }, devServer:{ //contentBase:path.join(__dirname, 'dist') // ceci est juste un exemple, si dist est l'endroit ou on aurait généré les fichiers inline:true, // les mises à jour de style ne sont plus affichés instantnément avec cette option donc j'ai ajouté le watch:true et çà marché!!! watch:true } /*resolve: { extensions: ['', '.js', '.jsx', '.css'] }, resolveLoader: { root: require('path').resolve(__dirname, "node_modules") }*/ } console.log("process.env.NODE_ENV : " + process.env.NODE_ENV); console.log("process.env.NODE_ENV === 'production' ???? : " + (process.env.NODE_ENV == 'production')); //config.output.path = path.resolve(__dirname, "dist"); //console.log("config.output.path : " + config.output.path); if(process.env.NODE_ENV === 'production') { console.log("this is the prod env!!!!!!!!!!"); config.output.path = path.resolve(__dirname, "dist"); } module.exports = config; 

the problem is that when testing (process.env.NODE_ENV === 'production') it never returns true, even if it should be (see what is registered on the console above). I tried to trace to a simple equality, not strict, but still all the time I am mistaken.

Answer 1

I had this problem today.

When I used set NODE_ENV=production && something in npm scripts , then NODE_ENV=production becomes production + " " with one space after it.

So, we compare production with production + " " , this obviously returns false.

package.json

 scripts: { "start": "set NODE_ENV=development && webpack --watch --progress", "test": "set NODE_ENV=production && webpack" } 

Comparisons

 console.log(process.env.NODE_ENV.trim() === "production"); //True if ran test else false console.log(process.env.NODE_ENV === "production"); //False console.log(process.env.NODE_ENV.trim() === "development"); //True if ran start else false console.log(process.env.NODE_ENV === "development"); //False 

Working sample webpack.config.js

 const webpack = require("webpack"); const dev = process.env.NODE_ENV.trim() !== "production"; module.exports = { entry: "./index.js", output: { path: "./", filename: "parse.js" }, module: { rules: [ { test: /\.js/, use: "babel-loader", exclude: /node_modules/ } ] }, plugins: dev ? [] : [ new webpack.optimize.UglifyJsPlugin() ], target: "node" }; 

So use trim() .

Answer 2

The problem is that you keep single quotes in NODE_ENV , so the value of NODE_ENV is actually "'production'" instead of just "production" . This is visible at the debug output.

Change set NODE_ENV='production' to set NODE_ENV=production , and it should work as you expect.

Answer 3

Using:

 if ((process.env.NODE_ENV || '').trim() !== 'production') { 

Be careful with the above solutions, as NODE_ENV can be undefined and will run .trim () for undefined.