Allowing access to process and process.env in Webpack 5

Question

I'm using environment variables to set the basename of a react-router-dom BrowserRouter. However, Webpack 5 does not allow accessing environment variables.

From other stackoverflow questions, I've seen that using this:

new webpack.ProvidePlugin({
    process: 'process/browser',
})

makes process available. However, process.env is empty ( {} ).

Also, if I use

const dotenv = require('dotenv')
dotenv.config();
console.log(process.env);

I can see the variables in my.env file are present in process.env in the config file but I can't find a way to make them accessible from process.env in the code.

I have tried:

new Dotenv({ systemvars: true })

And some other plugins suggested in Webpack: Bundle.js - Uncaught ReferenceError: process is not defined but adding any other plugin other than the 'process/browser' makes process not defined again.

I know there's a reason behind not allowing the use of process.env but I do need it.

Answer 1

Did you check this?

DotenvPlugin

The third-party DotenvPlugin (dotenv-webpack) allows you to expose (a subset of) dotenv variables:

new Dotenv({
  path: './.env', // Path to .env file (this is the default)
  safe: true, // load .env.example (defaults to "false" which does not use dotenv-safe)
});