Environment variables in Typescript with Webpack

Question

I am having trouble declaring globals in Typescript, using Webpack's DefinePlugin. I was hoping to get some input on what I am doing wrong.

I created an environment variable in my .bash_profile:

export API_KEY_GOOGLE_MAPS=xxxxxxxxxxxxxxxx

In my webpack.config.js, I have the following lines:

...
plugins: [
  new webpack.DefinePlugin({
    API_KEY_GOOGLE_MAPS: JSON.stringify(process.env.API_KEY_GOOGLE_MAPS),
  }),
],
...

Inside index.tsx (I am using React), I do the following:

declare var API_KEY_GOOGLE_MAPS: string;

console.log(API_KEY_GOOGLE_MAPS)

This produces the following error, at the line containing console.log:

ReferenceError: API_KEY_GOOGLE_MAPS is not defined

Does anybody have any leads?

Answer 1

The other answers require create-react-app so I will offer mine.

First, add the plugin to your Webpack configuration:

const webpack = require("webpack");

module.exports = {
  // ... 
  plugins: [
    new webpack.DefinePlugin({
      MY_ENV_VAR: JSON.stringify(true),
    }),
  ],
};

Next, declare the variable in TypeScript:

declare var MY_ENV_VAR : string | undefined;

Finally, you can access the variable in your code:

console.log(MY_ENV_VAR);