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: and it seems like it should be easy...

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./mrsteele/dotenv-webpack and it seems like it should be easy...

• javascript
• webpack
• dotenv

5 Answers 5

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.

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

This was the plementary 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./post/2022/06/22/react-access-environment-variables-from-dotenv-env

I was just trying to access my .env variables during development, not even building my app yet, and couldn't access any through the other methods using dot-env-webpack or DefinePlugin. This way worked out for me:

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

Read more: https://webpack.js/plugins/environment-plugin/

Why you don't use dotenv package?

dotenv