.env webpack pass value of environment variable but the app doesn't work

Question

.env file in the project root:

ESRI_KEY=api_key_value

For the webpack config I have:

const webpack = require('webpack');

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


module.exports = {

//----//
  
  plugins: [

    new Dotenv(),
  ],
};

and the code is:

console.log(process.env.ESRI_KEY);
const ESRI_KEY = process.env.ESRI_KEY;

const geocodeService = L.esri.Geocoding.geocodeService({
  apikey: `{ESRI_KEY}`,
});

I tried different combinations of passing like

apikey: `${ESRI_KEY}`
apikey: ESRI_KEY

and all of them work. I actually can see the ESRI_KEY value in the console and I can see it in the dist folder ether hidden on visible (depends on passing syntax). There are no errors in the console but for some reason, nothing happens unless I pass direct value like:

const geocodeService = L.esri.Geocoding.geocodeService({
  apikey: 'api_key_value',
});

There simply should appear a popup with the address of the place on the click (and it works if a pass direct api_key_value or simply use another js file with the value and place it on top of my main js in the HTML) but it doesn't work with .env and I can't figure at why and how to fix it.

In python, I had only one issue like this with a database password. Regardless of the rest of the environment variables Postgresql accepted only direct password_value in my main.py. So I'm trying to understand if my issue is related to code/webpack/.env or some keys specific.

score 0 · Answer 1 · answered Sep 07 '21 at 05:33

/* root_project/webpack.config.js */

Place a .env file in root project folder

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


const DotEnvWebpack = new DotEnvWebpackPlugin({
    /**
     * systemvars: true
     * load all the predefined 'process.env' variables which will
     * trump anything local per dotenv specs. (useful for CI purposes)
     */
    systemvars: true,
    safe: true, // load '.env.example' to verify the '.env' variables are all set.
    path: path.join(__dirname, `.env`),
  });

and then in plugins array

...
plugins : [
...,
DotEnvWebpack,
]

and then you can consume variables defined in .env and all variables of process.env

/* .env */

ESRI_KEY=api_key_value

console.log(process.env.ESRI_KEY);
const ESRI_KEY = process.env.ESRI_KEY;

.env webpack pass value of environment variable but the app doesn't work

1 Answers1