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

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 2

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.

Answer 3

Why you don t use dotenv package?

dotenv

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

Answer 5

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.org/plugins/environment-plugin/

友情链接