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?

I think you should configure ts-loader with transpileOnly flag, and compile it with babel — ArtemSky
– ArtemSky, Commented Dec 14, 2017 at 19:51

sdgfsdh · Accepted Answer · 2021-04-13 10:53:42Z

12

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);

answered Apr 13, 2021 at 10:53

sdgfsdh

37.8k31 gold badges168 silver badges299 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

goldins · Accepted Answer · 2020-11-25 15:45:16Z

5

create-react-app environment variables should be prefixed with REACT_APP_:

Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.

from the "Adding Custom Environment Variables" documentation.

You should be adding these environment variables to your .env file(s) in place of adding these to your .bash_profile file. The appropriate file will be picked up depending on the build (i.e. start or build), and the application will be easier to share and deploy.

edited Nov 25, 2020 at 15:45

answered Dec 14, 2017 at 20:11

goldins

1,4061 gold badge12 silver badges14 bronze badges

1 Comment

bbalan Over a year ago

Thank you - I modified my solution to incorporate your feedback and that from Akyuna Akish.

Akyuna Akish · Accepted Answer · 2017-12-14 20:04:08Z

5

The way I do it is to have a .env file(add it to .gitignore) in the root of my project files.

Within that file I define my project environment variables(additional variables can be separated by adding each to it's own line):

NODE_ENV=development

Then using the dotenv npm module I can access the values in any webpack file(or server side expressJS file for example).

// in the command line
$ npm install --save dotenv

// at the top of the webpack config file
require('dotenv').config();

// in the plugins of the webpack config
plugins: [
    new webpack.DefinePlugin({
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
],

Now I can reference it within my app being transpiled by webpack:

console.log(NODE_ENV); // development

edited Dec 14, 2017 at 20:04

answered Dec 14, 2017 at 19:59

Akyuna Akish

1471 silver badge7 bronze badges

3 Comments

goldins Over a year ago

It might be worth noting that .env files should be used for prod/sand/etc (e.g. .env.prod). builds as well and should not be added to .gitignore, only .env or .env.local files should be git-ignored.

Akyuna Akish Over a year ago

I could see that, I usually deploy to Heroku which allows you to configure environment variables via the command line without a .env.prod file. Though with other hosting services I could see a .env.prod file coming in handy.

gorn Over a year ago

webpack is not defined, can be handled by adding const webpack = require('webpack') at the top of the webpack config file. However, NODE_ENV is still undefined in my app (TS2304: Cannot find name 'NODE_ENV'.)

bbalan · Accepted Answer · 2017-12-14 20:03:59Z

-1

Answering my own question: my project was generated using create-react-app, and according to its documentation, environment variables are accessed this way:

console.log(process.env.API_KEY_GOOGLE_MAPS)

webpack.DefinePlugin() is not required.

answered Dec 14, 2017 at 20:03

bbalan

7113 gold badges7 silver badges21 bronze badges

Collectives™ on Stack Overflow

Environment variables in Typescript with Webpack

4 Answers 4

Comments

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related