无法使用 dotenv-webpack 访问 process.env 变量

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...

Answer 1

Why you don't use dotenv package?

dotenv

Answer 2

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

Answer 3

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 (eg: "build:staging": "env-cmd -f environments/.env.staging webpack --config buildTools/webpack.prod.js --progress --color" )

Please let me know if it helps.

Answer 4

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