CODEWITHSUNDEEP
typescriptwebpackdependenciesbundle
Presto
Presto

Reputation: 888

Webpack export module is not defined

I want to use webpack to compile bundle.js for my application. I created dependency tree by added imports and exports into my *.ts files. I have one problem when I try to run my application.

I have a 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

and this is my moduleX file:

import { componentE } from 'main';
import { componentC } from 'moduleC'

export componentA extends componentC {

    ...

    if (componentE.someProperty === true) {

    }

    ...
}

and after run build dev and try to run my app I've got something like that:

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

When I reviewed a source at chrome at moduleX.js?d3a3:5913 I can see:

var componentA = /** @class */ (function (_super) {
    __extends(componentA, _super);

    //componentA code

}(componentC));

and I have a error in }(componentC));: Uncaught ReferenceError: componentC is not defined.

Where is the problem? Will you help me with that?

Upvotes: 0

Views: 1102

Answers (1)

basarat
basarat

Reputation: 275799

Where is the problem? Will you help me with that?

You have a cyclic dependency.

Fix

Remove it.

Example

E.g. foo dependends on bar depends on baz depends on foo (cycle!).

Tools

Various. I've written one too : https://alm-tools.gitbooks.io/alm/content/features/dependency.html

Upvotes: 1

Related Questions