I've been grappling with this specific error for the last couple of hours, and it's definitely not a run-of-the-mill undefined error. The issue arises when I define a value in the webpack plugins section (for a global variable) to serve as an API endpoint, but accessing it within the application results in a peculiar error message. Let me walk you through the structure of the plugins in webpack.dev.js (which then gets merged into webpack.config.js).
new DefinePlugin({
'ENV': JSON.stringify(METADATA.ENV),
'HMR': METADATA.HMR,
// ... other lines here
'API_PARENT': "DEV_PARENT_TEST" // this is the problematic line
})
In my file custom-typings.d.ts, I made sure to declare it to prevent any TypeScript errors.
declare var API_PARENT: string;
But, when I attempt to output console.log(API_PARENT) in one of my app components, I am met with the baffling error below:
EXCEPTION: Uncaught (in promise): ReferenceError: DEV_PARENT_TEST is not defined
ReferenceError: DEV_PARENT_TEST is not defined
The error points directly to that log line. What puzzles me is why this error is even occurring in the first place. After all, DEV_PARENT_TEST isn't a key; it's simply a value. So why does a reference error pop up for it?