node.js - webpack react process.env always empty (windows 10)

Question

I have read all of the articles here at stack overflow and about 200 more from google searches and i, for the life of me, can't get my head around process.env. No matter what i do it's always an empty object.

const path = require("path");
const webpack = require('webpack');

module.exports = {
    entry: {
        search: './src/search/search_index.js',
        // search: './src/search/search_index.js'
    },
    output: {
        path: path.join(__dirname, "../website/public/javascript/react"),
        publicPath: '/',
        filename: "[name].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': '"production"'
            }
        })
    ]
};

"scripts": {
    "start": "webpack-dev-server --inline --hot --content-base src/search",
    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
    "test:watch": "npm run test -- --watch"
}

console.log(process.env); // from a render method in the running application started with "npm start"

Always returns {}

I am trying to get NODE_ENV set to production on my build and have had zero luck %NODE_ENV% show production but regardless i get the warning message in console about it running on a slower build to use NODE_ENV production.

To try and unwind what's happening i just wanted to see what my app was getting in process.env and it's an empty object. So then i tried hard coding it with defineplugin to again just test whats going on and it's the same result.

Been banging my head against this for about 3 hours now. Any help is appreciated.

Answer 1

The DefinePlugin configuration you're using replaces occurrences of process.env.NODE_ENV expressions in your code with whichever value you configure - it won't touch references to process.env, as you haven't told it to do anything with that exact expression - the configuration you're using is just shorthand for replacing multiple expressions which share a common root.

Webpack is detecting that you're referencing a global process variable and is injecting the process mock from node-libs-browser, which as you can see defines an empty env object.

You can use node Webpack config to control this. Adding node: {process: false} to your config will disable injection of a mock for process.