CODEWITHSUNDEEP
javascriptwebpackenvironment-variables
Pablo
Pablo

Reputation: 10602

how to include env variables into Webpack 5?

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?

Upvotes: 4

Views: 4856

Answers (1)

Pablo
Pablo

Reputation: 10602

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.

Upvotes: 3

Related Questions