I am looking to utilize webpack for compiling bundle.js in my application. To create a dependency tree, I added imports and exports into my *.ts files. However, I encountered an issue when trying to run the application.
Here is my main.ts file:
import { componentA, componentB } from 'moduleX';
import { componentC } from 'moduleC'
export var componentE: componentA;
$().ready(function () {
if (componentA.someProperty === true) {
...
}
}
export class MyClass extends componentC {
...
}
// end file
This is my moduleX file:
import { componentE } from 'main';
import { componentC } from 'moduleC'
export componentA extends componentC {
...
if (componentE.someProperty === true) {
}
...
}
Upon running build dev and testing my app, I encountered the following error:
Uncaught ReferenceError: componentC is not defined
at eval (moduleX.js?d3a3:5913)
at Object../js/moduleX.js (bundle.js?8.0.0:96)
at __webpack_require__ (bundle.js?8.0.0:20)
at eval (main.ts?8a84:4)
at Object../js/main.ts (bundle.js?8.0.0:163)
at __webpack_require__ (bundle.js?8.0.0:20)
at bundle.js?8.0.0:84
at bundle.js?8.0.0:87
While investigating the source in Chrome at moduleX.js?d3a3:5913, I noticed:
var componentA = /** @class */ (function (_super) {
__extends(componentA, _super);
//componentA code
}(componentC));
The error occurs at }(componentC));:
Uncaught ReferenceError: componentC is not definedCan you help me identify the problem and provide some guidance?