Ts-loader: Web Pack define plugin variables are recoginized by ts-loader

[deryl27]

@jbrantly

In my webpack-config I have defined a plugin i.e DefinePlugin having variable as DEV-MODE.

I have used the variables in the .ts files . For eg : if (DEV-MODE)

this variable cannot be identified when ts-loader compiles the code
Gives an error : Cannot find name DEV-MODE

[jbrantly]

TypeScript doesn't know about the variable and therefore gives an error. You need to tell TypeScript about it.

// some .d.ts file somewhere
declare var DEVMODE: boolean;

Also I don't think you can have a hyphen in a variable name.

[deryl27]

@jbrantly I try this out

OOPS yep just an example it should be DEVMODE

[jbrantly]

See https://github.com/jbrantly/ts-loader/tree/master/test/conditionalRequire as well

[jbrantly]

Closing as there is no issue with ts-loader here.

[msegers]

You can have a hypen btw, it's only accessible like such : window["DEV-MODE"] though

[mrdulin]

same issue. don't know whether or not is the ts-loader problem.

[johnnyreilly]

It's not https://blog.johnnyreilly.com/2016/07/using-webpacks-defineplugin-with-typescript.html

[vyushin]

I have the same issue. Thanks for recommendation above! declare is a good vay to pass data from the webpack config. But now I don't want to write declare anywhere when I use defined variables. What if I will declare defined variables one time in one place and will use their everywhere?

I have define plugin like this:

plugins: [
  new webpack.DefinePlugin({
    DIST_PATH: JSON.stringify(DIST_PATH),
    SRC_PATH: JSON.stringify(SRC_PATH),
    TMP_PATH: JSON.stringify(TMP_PATH),
  })
]

then I created constants.ts file:

declare const DIST_PATH: string;
declare const SRC_PATH: string;
declare const TMP_PATH: string;

const _DIST_PATH = DIST_PATH;
const _SRC_PATH = SRC_PATH;
const _TMP_PATH = TMP_PATH;

export {_DIST_PATH as DIST_PATH};
export {_SRC_PATH as SRC_PATH};
export {_TMP_PATH as TMP_PATH};

Now I got the opportunity import defined variables everywhere.

import {DIST_PATH, SRC_PATH, TMP_PATH} from "../constants";
console.log(DIST_PATH, SRC_PATH, TMP_PATH);

I hope this decision will be useful for someone. :)

[FRSgit]

After some digging I found out that in [email protected] following code works as well (still looks a little bit ugly though, but at least it's 3 lines less 😐):

declare const DIST_PATH: string;
declare const SRC_PATH: number;
declare const TMP_PATH: boolean;

export { DIST_PATH as DIST_PATH };
export { SRC_PATH as SRC_PATH };
export { TMP_PATH as TMP_PATH };

Then you can import it as it was described previously:

import {DIST_PATH, SRC_PATH, TMP_PATH} from "../constants";
console.log(DIST_PATH, SRC_PATH, TMP_PATH);

Since this issue topic was my no. 1 occurence when googling I thought that I'll share that - for future wanderers ;)

[FRSgit]

One important note - actually to let webpack's dead code elimination to kick in, better option is to create declaration file and include it (or it's parent directory) into your tsconfig.json file, so:

You need to create constants.d.ts file:

declare const DIST_PATH: string;
declare const SRC_PATH: number;
declare const TMP_PATH: boolean;

Then add it's parent directory to tsconfig.json:

{
  "compilerOptions": {
    /* other options */
    "typeRoots" : [
      "./src/typings" // path to your typings directory (relative to tsconfig.json)
    ]
  }
}

Finally, you can use these global variables anywhere, without any import statements 😃

[vyushin]

@FRSgit, loks good )

[MaRuifeng]

Below setup worked for me.

1. Create a @types folder under src.
2. Create a file constants.d.ts in it with below content

declare const DIST_PATH: string;
declare const SRC_PATH: number;
declare const TMP_PATH: boolean;

These global variables can be safely used like a charm. I think this works because TypeScript by default includes all @types packages into compilation? https://www.typescriptlang.org/tsconfig#types

I am a bit skeptical on @FRSgit solution as it overrides the default typeRoots behaviour.

[FRSgit]

@MaRuifeng If @types directory does work - it's a pretty good finding! But according to the docs it shouldn't - they explicitly say that only @types packages within node_modules directory should be included by default. Are you sure you don't have the .d.ts files included in some other way (maybe you include all of the files from src directory using include config property)?

About overriding of the default typeRoots behaviour - well, it's a matter of taste I would say. It's a config option, so it's meant to be changed. Also, lots of projects do override this default behaviour already because of different reasons (almost in any of my projects I have some "custom" typings directory which I needed to include). So as I said, it's not that huge of a deal for everyone. But if it fits your case best - good for you! 💪

[pasim]

After some digging I found out that in [email protected] following code works as well (still looks a little bit ugly though, but at least it's 3 lines less 😐):

declare const DIST_PATH: string;
declare const SRC_PATH: number;
declare const TMP_PATH: boolean;

export { DIST_PATH as DIST_PATH };
export { SRC_PATH as SRC_PATH };
export { TMP_PATH as TMP_PATH };

Then you can import it as it was described previously:

import {DIST_PATH, SRC_PATH, TMP_PATH} from "../constants";
console.log(DIST_PATH, SRC_PATH, TMP_PATH);

Since this issue topic was my no. 1 occurence when googling I thought that I'll share that - for future wanderers ;)

@FRSgit selected your option and it worked.