how to include env variables into Webpack 5?

Question

I know there is a lot of documentation online, and several questions related with this, but nothing seems to work.

I have a simple vanilla JS project, bundled with webpack.

This is my webpack.dev.js file:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  devtool: 'eval-source-map',
  output: {
    path: path.resolve('public'),
    filename: 'dist/bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
      {
        test: /\.svg$/,
        use: 'file-loader',
      },
    ],
  },
  plugins: [
    new webpack.EnvironmentPlugin(['CUSTOM_PATH']),
  ],
  devServer: {
    static: './public',
  },
};

This is my .env file:

CUSTOM_PATH=https://test.s3.us-west-2.amazonaws.com/test/dev/

And finally this is the script on my package.json

"start": "export $(xargs < ../.env) && webpack serve --open --config webpack.dev.js",

When I start the project, I got an error, saying process is not defined, when trying to do a simple console.log(process.env.CUSTOM_PATH)

Uncaught (in promise) ReferenceError: process is not defined

This will run on the browser, not in a node server.

What's missing? How can I build with an environment variable?

@jabaa ok yes, but when webpack builds it, it should replace, right? I mean, react or angular, both runs on the browser, but they can handle process.env on their code before bundle — Pablo
– Pablo, Commented Sep 8, 2021 at 13:10
I thought new webpack.EnvironmentPlugin would do that, if you know how to do that, I would appreciate a link :) — Pablo
– Pablo, Commented Sep 8, 2021 at 13:13
Now I get Uncaught (in promise) ReferenceError: CUSTOM_PATH is not defined — Pablo
– Pablo, Commented Sep 8, 2021 at 13:16
DefinePlugin and EnvironmentPlugin won't parse your .env file, I suspect, if you will pass environment variable directly, it'll work "start": "CUSTOM_PATH=https://test.s3.. export $(xargs.. — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Sep 8, 2021 at 13:20
@YevgenGorbunkov I tried that also, but then webpack returns an error: CUSTOM_PATH environment variable is undefined — Pablo
– Pablo, Commented Sep 8, 2021 at 13:25

Pablo · Accepted Answer · 2021-09-08 13:34:53Z

3

Ended up updating my webpack.dev.js to

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  devtool: 'eval-source-map',
  output: {
    path: path.resolve('public'),
    filename: 'dist/bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
      {
        test: /\.svg$/,
        use: 'file-loader',
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        CUSTOM_PATH: JSON.stringify(process.env.CUSTOM_PATH)
      }
    }),
  ],
  devServer: {
    static: './public',
  },
};

Without the JSON.stringify does not work for some reason, even if it's already a string.

answered Sep 8, 2021 at 13:34

Pablo

11k18 gold badges60 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2800708 Over a year ago

DefinePlugin worked for me. Only way I found so far that does!

Collectives™ on Stack Overflow

how to include env variables into Webpack 5?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related