Environment variables set on webpack.config.client.development.js are not respected.

[José Arzuaga]

When I set an environment variable as in here: the values do not make it through. For example, if I add a new entry and then console.log it, I get undefined

[Nikolay]

Provide an exact use case

[José Arzuaga]

I want to add a new env variable that has different values for production and development. I did so by adding it on the link I posted above and it's undefined. The env variable is for configuring an exception logging library.

[Nikolay]

Post the exact code

[José Arzuaga]

On webpack.config.client.development.js I add SENTRY_DSN to process.env. Then I go to client/rendering-service/main.js and client/src/components/Menu.js and add console.log(process.env.SENTRY_DSN).

webpack.config.client.development.js

  // environment variables
  new webpack.DefinePlugin({
    process.env: {
      NODE_ENV: JSON.stringify('development'),
      BABEL_ENV: JSON.stringify('development/client'), 
      SENTRY_DSN: JSON.stringify('some value)
    },
    REDUX_DEVTOOLS : false  // enable/disable redux-devtools
  }),
);

client/rendering-service/main.js and client/src/components/Menu.js

console.log("SENTRY_DSN: ");
console.log(process.env.SENTRY_DSN);

Output on the terminal after running npm run dev

SENTRY_DSN: 
undefined

[Nikolay]

Webpack variables aren't available in main.js

[José Arzuaga]

That's interesting. If I add the variable in webpack.config.js instead, it is available. I'll keep looking. Thanks for the help.

[Nikolay]

No, it can not be available in main.js because it's unrelated to Webpack.
It is available only in Webpack-built code