global variables are undefined in typescript coming from webpack

Question

In typescript 2.4.0 I am trying to create global/environment variables using DefinePlugin using webpack. So here is the approach I am trying to take:

webpack.js Define part

new webpack.DefinePlugin({
   environment: JSON.stringify('DEVELOPMENT'),
}),

globals.ts

declare const environment: String;
console.log(environment);
export { environment };
console.log(environment);

environmentService.ts

import { IEnvironment } from 'environment';
import { environment } from '../globals';
console.log(environment);

export default class EnvironmentService implements IEnvironment  {
  environmentName: String = environment;

  get isDevelopment(): boolean {
    return this.environmentName === 'DEVELOPMENT';
  }

  get isProduction(): boolean {
    return this.environmentName === 'PRODUCTION';
  }
}

In the console log I get:

DEVELOPMENT
DEVELOPMENT
undefined

So console.log(environment); inside environmentService.ts is giving me undefined when I am expecting DEVELOPMENT and I am not sure why?

It appears it only exports the variable and not the value?

If someone can explain what I am doing wrong and why its getting undefined i would appreciate it.

Edit 1

I think I see what DefinePlugin is doing. Its not setting environment to DEVELOPMENT but rather replacing lines console.log(environment); with console.log('DEVELOPMENT'); and when it exports environment its undefined.

Where does it replace the value? You're importing DefinePlugin as IEnvironment, but you never use it... unless my thinking is wrong. — evolutionxbox
– evolutionxbox, Commented Jun 20, 2017 at 14:05

Ruifeng Ma · Accepted Answer · 2022-01-21 20:21:23Z

22

You can create a @types folder and put a declaration file global.d.ts in it, with just below content.

declare const environment: string;

TypeScript includes all @types packages by default during compilation: https://www.typescriptlang.org/tsconfig#types

edited Jan 21, 2022 at 20:21

answered Aug 29, 2020 at 0:33

Ruifeng Ma

2,8471 gold badge31 silver badges47 bronze badges

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

1 Comment

FloodGames Over a year ago

Yes, declare const environment: string removes the TS warning. use :string instead of :String

Yury Tarabanko · Accepted Answer · 2017-06-20 14:51:26Z

5

DefinePlugin inlines code parts, thats why you need all those JSON.stringify('DEVELOPMENT') not just 'DEVELOPMENT'. It replaces global identifiers it knows with the given code parts as is. If you define environment: '"PROD" + "DUCTION"'

Then

if(environment === 'PRODUCTION') {

}

Becomes

if("PROD" + "DUCTION" === 'PRODUCTION') {

}

Something like this should work in ts2

const env: String = environment;
export { env as environment };

answered Jun 20, 2017 at 14:51

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

3 Comments

null_pointer Over a year ago

Now I get Cannot find name 'environment.

Yury Tarabanko Over a year ago

@Michael Which line?

null_pointer Over a year ago

Got it to work. I took out declare const environment: String; so when I put it back in it worked. Thanks!

ZiiMakc · Accepted Answer · 2019-11-17 19:12:39Z

4

You need update your globals.ts like this for any webpack DefinePlugin variables:

declare const environment: string;
const _environment = environment
export { _environment as environment };

More here.

answered Nov 17, 2019 at 19:12

ZiiMakc

37.7k26 gold badges79 silver badges128 bronze badges

Collectives™ on Stack Overflow

global variables are undefined in typescript coming from webpack

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related