DefinePlugin does not inject variable

I have been trying to figure this out for over an hour now. Here is the subject code:

const ENVIRONMENT = process.env.NODE_ENV;
const BASENAME = process.env.APP_BASENAME;

console.log('process.env', {
    ENVIRONMENT: ENVIRONMENT,
    'process.env': process.env,
    NODE_ENV: process.env.NODE_ENV,
    APP_BASENAME: process.env.APP_BASENAME
});

if (ENVIRONMENT !== 'development' && ENVIRONMENT !== 'production') {
    throw new Error('Unknown ENVIRONMENT.');
}

export {
    BASENAME,
    ENVIRONMENT
};

Here is my webpack config:

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

module.exports = {
    devtool: 'source-map',
    debug: false,
    context: __dirname,
    entry: {
        'app': [
            path.resolve(__dirname, './src/app')
        ]
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].js',
        publicPath: '/static/'
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compressor: {
                /* eslint-disable camelcase */
                screw_ie8: true,
                /* eslint-enable */
                warnings: false
            }
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': '"production"',
            'process.env.APP_BASENAME': '"' + (process.env.APP_BASENAME || '') + '"'
        }),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"',
                APP_BASENAME: '"' + (process.env.APP_BASENAME || '') + '"'
            }
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.DedupePlugin(),
        new webpack.NoErrorsPlugin()
    ],
    module: {
        loaders: [
            {
                include: path.resolve(__dirname, './src'),
                loader: 'babel',
                test: /\.js$/,
            },
            {
                loaders: [
                    'style?sourceMap',
                    'css?modules&importLoaders=1&localIdentName=[name]___[local]___[hash:base64:5]',
                    'resolve-url',
                    'sass?sourceMap'
                ],
                test: /\.scss$/
            }
        ]
    }
};

As you can see, I have tried multiple methods of using DefinePlugin:

new webpack.DefinePlugin({
    'process.env.NODE_ENV': '"production"',
    'process.env.APP_BASENAME': '"' + (process.env.APP_BASENAME || '') + '"'
}),
new webpack.DefinePlugin({
    'process.env': {
        NODE_ENV: '"production"',
        APP_BASENAME: '"' + (process.env.APP_BASENAME || '') + '"'
    }
}),

Here is the console output:

{
    APP_BASENAME: "/campaign-master/upload-static",
    ENVIRONMENT: undefined,
    NODE_ENV: undefined,
    process.env: {
        APP_BASENAME: "/campaign-master/upload-static",
        NODE_ENV: "production"
    }
}

The script execution ends with an exception:

Uncaught Error: Unknown ENVIRONMENT.

As a result of the condition that you can see in the config.js.

What is the reason process.env.NODE_ENV is not getting replaced?

[amackintosh]

Hmm, I was just having this issue and it was trolling me. process.env was showing as an empty object, but after I read this https://github.com/webpack/webpack/issues/868 I tried explicitly calling process.env.NODE_ENV and process.env.APP_VERSION, and boom it worked fine. Watchout for that. It could be some of yours’ problems…

    new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify('development'),
        'process.env.APP_VERSION': JSON.stringify(process.env.npm_package_version),
    })

Inside some module:

console.log(process.env.APP_VERSION) === 0.0.1

console.log(process.env) === {}

[donce]

@amackintosh This is because DefinePlugin doesn’t build any object - it just replaces all occurrences of process.env.NODE_ENV in code with the constant you provided. In short, this works like find-and-replace variable with value 😃