Deploying App To Heroku Doesnt Work If Used Together With DefinePlugin

Until now I have been building my webpack bundle like this webpack -p and deploying to Heroku. Everything worked great. I wanted to have a little more control so instead of using -p I used UglifyJsPlugin and DefinePlugin inside my webpack config since that is exactly what -p is doing. This is where the problem started.

If I use -p without DefinePlugin this is how my build file looks at the end.

var PORT = process.env.NGINX_PORT ? '/tmp/nginx.socket' : process.env.PORT;

process.env.PORT is keept and deployment to Heroku is working.

If I use DefinePlugin

var PORT = Object({"NODE_ENV":"production"}).NGINX_PORT ? '/tmp/nginx.socket' : Object({"NODE_ENV":"production"}).PORT;

My process.env.PORT is not here anymore and deployment to Heroku fails.

How can I use DefinePlugin but still keep process.env.PORT intact?

This is my webpack config

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

and my start script

"start": "cross-env NODE_ENV=production node ./src/build/bundle.js"

If you want to keep process.env.PORT getting from env, just change the way that you use the plugin.

new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})

DefinePlugin will translate everything you put in the constructor. That happened with you because you just had process.env at the top level. You have to be specific to what you want it to translate.