Typescript Reference error is not defined, webpack angular2

Question

This is not a general not defined error, I've been trying to debug it for the past two hours.
I am defining a value in webpack plugins (for a global variable) for API endpoint and trying to access it in the application gives a weird error. So here is the plugins structure in webpack.dev.js (which merges into webpack.config.js).

new DefinePlugin({
    'ENV': JSON.stringify(METADATA.ENV),
    'HMR': METADATA.HMR,
    // ... some other lines
    'API_PARENT': "DEV_PARENT_TEST" // this is the line in question
})

in custom-typings.d.ts I have declared it to avoid ts erros

declare var API_PARENT: string;

Now in one of my app components when I try console.log(API_PARENT) I get the mysterious error bellow

EXCEPTION: Uncaught (in promise): ReferenceError: DEV_PARENT_TEST is not defined
ReferenceError: DEV_PARENT_TEST is not defined

The stack trace leads to that log line. The part I don't get is that why this is throwing up in the first place. the DEV_PARENT_TEST is a value not even a key why is there a reference error on it!

Arman · Accepted Answer · 2017-01-30 15:05:04Z

1

I am answering this just in case someone else faced this error. It wasted 3 hours of my time until I solve it. The clue was in the first line JSON.stringify.

You must do that for all your string values. So the only change is in webpack.dev.js which should be

'API_PARENT': JSON.stringify("DEV_PARENT_TEST")

That that solves it all. Most likely this was a webpack question.

answered Jan 30, 2017 at 15:05

Arman

2,3103 gold badges26 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

Typescript Reference error is not defined, webpack angular2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related