Webpack and npm: Trouble setting environment variable NODE_ENV to production

Other Questions NPM
1

Hey everyone, I’m having a hard time with my Node.js app. I’m trying to use process.env.NODE_ENV in my code, but I keep getting an error saying process is not defined. It’s driving me crazy!

Here’s what I’ve got in my setup:

// package.json
{
  "scripts": {
    "build": "webpack",
    "build:prod": "ENV=production webpack -p"
  }
}

// webpack.config.js
const ENVIRONMENT = process.env.ENV ? process.env.ENV.toLowerCase() : 'dev';

module.exports = {
  // ... other config stuff
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        'ENV': JSON.stringify(ENVIRONMENT),
        'API_DEV': JSON.stringify('http://localhost:3000'),
        'API_PROD': JSON.stringify('https://api.myapp.com')
      }
    })
  ]
}

In my app code, I’m trying to do this:

let apiUrl;
if (process.env.ENV === 'production') {
  apiUrl = process.env.API_PROD;
} else {
  apiUrl = process.env.API_DEV;
}

But it’s not working. Am I missing something obvious? How can I fix this so I can use the environment variables in my app? Thanks for any help!

2

I’ve dealt with this issue before, and it’s often related to how Webpack handles environment variables. The problem likely stems from how you’re setting and accessing the environment variables.

Instead of using ‘ENV’, try using ‘NODE_ENV’ consistently throughout your setup. Modify your package.json script to:

"build:prod": "NODE_ENV=production webpack -p"

In your webpack.config.js, adjust the ENVIRONMENT constant:

const ENVIRONMENT = process.env.NODE_ENV || ‘development’;

These changes should align your environment variable usage across your build process and application code. Remember, Webpack replaces occurrences of process.env with the defined values at build time, so your production bundle won’t have access to the actual Node.js process object.

If you’re still encountering issues, consider using a .env file with dotenv for more robust environment variable management.

3

I’ve encountered similar issues before, and it can be quite frustrating. From what I see in your setup, there are a couple of things that might be causing the problem.

First, make sure you’re using the correct environment variable name. In your package.json, you’re setting ‘ENV’, but in webpack.config.js, you’re looking for ‘process.env.ENV’. These should match.

Secondly, when using DefinePlugin, you need to stringify all values, including the ‘ENV’ value. Try modifying your webpack config like this:

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify(ENVIRONMENT),
      'API_DEV': JSON.stringify('http://localhost:3000'),
      'API_PROD': JSON.stringify('https://api.myapp.com')
    }
  })
]

Also, in your app code, use ‘NODE_ENV’ instead of ‘ENV’:

if (process.env.NODE_ENV === 'production') {
  apiUrl = process.env.API_PROD;
} else {
  apiUrl = process.env.API_DEV;
}

These changes should resolve your issue. Let me know if you need any further clarification!

4

hey mate, i had a similar headache. try using cross-env in ur scripts. like this:

“build:prod”: “cross-env NODE_ENV=production webpack -p”

it helps with cross-platform stuff. also, double-check ur webpack config. make sure ur using NODE_ENV consistently. good luck!