~ / Home / Blog / “process” is not defined

05 Marzo 2021 • # javascript

“process” is not defined

Recently I’ve tried to upgrade Webpack from v4 to v5. There is a little breaking change that causes problems on frontend projects. If you are using “process.env” variables it won’t work anymore. I was using the dotenv-webpack package but it doesn’t work anymore for browsers.

We automatically replace any remaining process.envs in these environments with “MISSING_ENV_VAR” to avoid these errors.

💡 The solution

var dotenv = require(“dotenv”).config({ path: __dirname + “/.env” });
plugins: [
  new webpack.DefinePlugin({
    “process.env.DOTENV”: JSON.stringify(dotenv.parsed),
  }),
],

As the documentation says:

The DefinePlugin allows you to create global constants which can be configured at compile time. — DefinePlugin | webpack

So this will inject the variables in the code.

🤾 Usage

To use your new global constant in your code you can do this:

process.env.DOTENV.YOUR_VALUE

because the DOTENV parameter is an object containing the values in your .env file.

👵 Tips

Vuoi lavorare con me?
Facciamo due chiacchiere.

hi@lucafedrizzi.com

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░