Unable to access process.env variables with dotenv-webpack

Question

I'm trying to access my .env file variables using dotenv-webpack so that they can be bundled later and I can use them on my website, however I followed the instructions and have looked online and can't make it work.

//.env
VAR=1234

// created a webpack.config.js with the following code
const Dotenv = require('dotenv-webpack');

module.exports = {
  plugins: [
    new Dotenv()
  ]
};

// index.js
console.log(process.env.VAR);
// undefined

I'm not sure what to do because I've followed the example in: https://github.com/mrsteele/dotenv-webpack and it seems like it should be easy...

score 2 · Answer 1 · answered Jan 15 '22 at 10:40

As suggested by Pandhu Wibowo, please give him the thumbs up, I managed to make it work using webpack-cli, webpack and dotenv packages. How to pass .env file variables to webpack config?

./env 
VAR=1234

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

// replace accordingly './.env' with the path of your .env file 
require('dotenv').config({ path: './.env' }); 

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": JSON.stringify(process.env)
    }),
  ]
};

./package.json
  "scripts": {
    "start": "webpack"
  },

npm run start
--> creates the bundle.js which will include the env variable

score 0 · Answer 2 · answered Jan 15 '22 at 10:07

0

Why you don't use dotenv package?

dotenv

answered Jan 15 '22 at 10:07

Pandhu Wibowo

182
8

Because dotenv package doesn't let me bundle the .env variables and access them on my website. I was trying to pass an API key from my .env folder and then let the website use this API key when its running. Yet I don't. want to expose the API key when adding the project to github – Alfonso Jan 15 '22 at 10:16
2

Can you try this? https://stackoverflow.com/questions/46224986/how-to-pass-env-file-variables-to-webpack-config – Pandhu Wibowo Jan 15 '22 at 10:23
It worked! I will add exactly what I did below!! Thank you, that was a very helpful stackoverflow link, took some time to make it work but I managed to wrap my head around it :) – Alfonso Jan 15 '22 at 10:35
1

Awesome! Good job! – Pandhu Wibowo Jan 15 '22 at 10:40
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 15 '22 at 12:44

score 0 · Answer 3 · answered Jan 06 '23 at 10:30

If you would like to use dotenv-webpack package to define environments files, you need to tell it where is your .env file, here's what I did:

webpack.dev.js

Import it:

const Dotenv = require('dotenv-webpack');

Use it in plugins array and pass to it .env.developement path:

plugins: [
      ...,
      new Dotenv({
        path: `${environmentsPath}/.env.development`,
        systemvars: true, //Set to true if you would rather load all system variables as well (useful for CI purposes)
      }),
    ],

webpack.prod.js

Import it:

const Dotenv = require('dotenv-webpack');

Use it in plugins array and pass to it .env path:

plugins: [
      ...,
      new Dotenv({
        path: `${environmentsPath}/.env`,
        systemvars: true, //Set to true if you would rather load all system variables as well (useful for CI purposes)
      }),
    ],

The good thing I like about this approach is that you can override the environment file using env-cmd package (e.g: "build:staging": "env-cmd -f environments/.env.staging webpack --config buildTools/webpack.prod.js --progress --color")

Please let me know if it helps.

score 0 · Answer 4 · answered Jan 07 '23 at 17:50

This was the complementary point for me:

To access environment variables from the client app they must be prefixed with REACT_APP_. Otherwise they will only be accessible on the server side.

so my .env file looks like

REACT_APP_API_KEY=my-api-key
REACT_APP_SECRET=secretInfo2

With the help of: https://jasonwatmore.com/post/2022/06/22/react-access-environment-variables-from-dotenv-env

score 0 · Answer 5 · answered Jul 13 '23 at 04:03

new webpack.EnvironmentPlugin({ NODE_ENV: 'development', // use 'development' unless process.env.NODE_ENV is defined DEBUG: false, });

https://webpack.js.org/plugins/environment-plugin/

I was just tryna acces my .env variables during development not even building my app yet and couldnt access any through the other methods using dot-env-webpack or DefinePlugin. This way worked out for me.

Unable to access process.env variables with dotenv-webpack

5 Answers5