Webpack: Bundle.js - Uncaught ReferenceError: process is not defined

Question

Here\'s my webpack.config.js

\"use strict\";

module.exports = {
    entry: [\'./main.js\'],
    output: { path: __dirname, filename: \'bund         


        

Answer 1

You need to add a plugin to define your env (in webpack config):

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

Answer 2

With dotenv node module:

STEP 1: INSTALL dotenv:

yarn add -D dotenv or npm i -D dotenv

STEP 2: ADD .env file in your project root with the required variables:

NODE_ENV=development
apiKey=w23io222929kdjfk
domain=example.domain.org

STEP 3: DEFINE these variables with webpack.DefinePlugin:

// webpack.config.js
const webpack = require('webpack')
const dotenv = require('dotenv')

module.exports = {
  //...
  plugins: [
    // ...
    new webpack.DefinePlugin({
       'process.env': JSON.stringify(dotenv.config().parsed) // it will automatically pick up key values from .env file
    })
    // ...
  ]
  //...
}

STEP 4: ACCESS environment variables in your source code:

// src/index.js
alert(process.env.NODE_ENV)
alert(process.env.apiKey)

---

Important Links:

• dotenv: https://www.npmjs.com/package/dotenv
• webpack.DefinePlugin: https://webpack.js.org/plugins/define-plugin/

Good Luck...

Answer 3

Webpack 5 removes the ability to access environment variables using the notation process.env.MY_ENV_VAR. I had this same problem because I was getting a Uncaught ReferenceError: process is not defined error in my browser console. From the documentation of porting from v4 to v5 of Webpack, they mention the following:

1. Before upgrading to v5, verify that you can easily do it

Try to set the following options in your webpack 4 configuration and check if build still works correctly.

module.exports = {
   // ...
   node: {
       Buffer: false,
       process: false
   }
};

webpack 5 removes these options from the configuration schema and will always use false.

You have to remove these options again when upgrading your configuration for webpack 5.

2. Handling env vars because process was removed

• Regarding Runtime Errors:
  • process is not defined.
    • webpack 5 does no longer include a polyfill for this Node.js variable. Avoid using it in the frontend code.
    • Want to support frontend and browser usage? Use the exports or imports package.json field to use different code depending on the environment.
      • Also use the browser field to support older bundlers,.
      • Alternative: Wrap code blocks with the typeof process checks. Note that this will have a negative impact on the bundle size.
    • Want to use environment variables with process.env.VARIABLE? You need to use the DefinePlugin or EnvironmentPlugin to define these variables in the configuration.
      • Consider using VARIABLE instead and make sure to check typeof VARIABLE !== 'undefined' too. process.env is Node.js specific and should be avoided in frontend code.

Therefore, given the above information, it is possible to use environment variables using one of the two plugins below.

const webpack = require("webpack");

module.exports = {
    ...
    plugins: [
        new webpack.DefinePlugin({
            "process.env.MY_ENV_VAR": JSON.stringify(process.env.MY_ENV_VAR)
        }),
        new webpack.EnvironmentPlugin(['MY_ENV_VAR']); // <--This is shorthand, does the same thing as the DefinePlugin
    ],
};

Then in your production code it's still feasable to refer to the environment variable in the same way, example:

console.log(process.env.MY_ENV_VAR);

However, as they said in the documentation included above, using process.env is NOT the recommended way since that is Node.js specific.

Answer 4

Having dotenv-webpack/dotenv in your webpack and still doesn't work on Angular? Most probably you're trying to access process.env when running the Angular app on the browser (without Angular Universal), e.g. by ng serve.

Run npm i -S process and then in polyfills.ts paste the code below

import * as process from "process";
window["process"] = process;

Alternatively, if that's not the case and you're looking for webpack to obtain environmental variables then (I don't know why no one suggested yet) dotenv-webpack is the simplest one.

const dotenv = require("dotenv-webpack");
const webpackConfig = {
  plugins: [new dotenv()]
};
module.exports = webpackConfig; // Export all custom Webpack configs.

Of course you need to have them defined in .env file at the root of your project.

Answer 5

Update October 2020:

For webpack 5, you can reference process/browser from the appropriate plugins part of webpack.config.js

// webpack needs to be explicitly required
const webpack = require('webpack')

module.exports = {

/* ... rest of the config here ... */

  plugins: [
    // fix "process is not defined" error:
    // (do "npm install process" before running the build)
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
  ]
}