Cannot find external module

[EliotVU]

Given this directory structure:

/dist/data/app/script/classes/shared/item.ts
/dist/data/app/script/classes/shared/status.ts
/dist/data/app/script/classes/shared/tag.ts

/dist/data/app/script/classes/clientItem.ts
/dist/data/app/script/classes/clientTag.ts

And importing clientItem from main.js(traceured, not typescripted), leads to:

ERROR in ./dist/data/app/script/classes/clientItem.ts
...script/classes/clientTag.ts:0:50 
Cannot find external module './shared/tag'.

Any idea why it cannot find the module even though it is obviously right there?

This is the webpack configuration:

var webpackConfig = {
    devtool: 'source-map',
    resolve: {
        root: path.join(__dirname),
        extensions: ['', '.ts', '.js'],
        modulesDirectories: ['node_modules', 'bower_components']
    },
    resolveLoader: {
        root: path.join(__dirname, 'node_modules')
    },
    module: {loaders: [
        {
            test: /\.js$/,
            loader: 'webpack-traceur?runtime&sourceMaps&experimental',
            exclude: [/bower_components/, /node_modules/]
        },
        {
            test: /\.ts$/,
            loader: 'awesome-typescript-loader?target=ES5',
            exclude: [/bower_components/, /node_modules/]
        }
    ]},
    noParse: vendorModules,
    plugins: [
        new webpack.ResolverPlugin(
            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('bower.json', ['main'])
        ),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        })
    ],
    entry: {
        app: path.join('dist', 'data', 'app', 'script', 'main.js'),
        vendor: vendorModules
    },
    output: {
        path: path.join(__dirname, 'dist', 'data', 'app', 'script'),
        filename: '[name].bundle.js',
        pathinfo: true
    }
};

Now that said, compiling those .ts files work as expected when compiling it without using any Webpack loaders.

[s-panferov]

@EliotVU could you please give some small example to reproduce? I haven't checked the case like that with traceur, so I need to take a look.

[EliotVU]

Ok so my project was originally using RequireJS and Traceur and a few Typescript files where using static typing made sense such as clientItem.ts.

That setup worked fine but I decided to use Webpack for its bundling given that requirejs wasn't very good at it and also rather slow. Now after porting to to Webpack + traceur + typescript and your loader the above issue arises.

So the current setup is: Entry -> main.js -> loads some files which in turn load the clientItem.ts as follows:

Items.js
import {ClientTag, ClientTagReference} from '../classes/clientTag'; 

at this point clientTag itself fails to find its own Typescript imports, and this class's imports look like:

clientTag.ts
import {Tag, TagRule, TagType, TagReference} from './shared/tag';
import {Visibility} from './shared/item';

Anything else? Perhaps mixing the two just isn't doable?

[EliotVU]

Ok I have made a new minimal project for the sake of demonstrating this issue,

you can download it at www.eliotvu.com/files/lab.rar

install it using "npm install" and run it with "gulp".

I had hoped making this little separation might have revealed the problem or a mistake but unfortunately it still cannot find any imports from within .ts files.

[s-panferov]

@EliotVU thank you for your example. Now I know what is wrong with the loader. I'll try to fix this ASAP.

[s-panferov]

@EliotVU fixed in v0.2.3, please confirm

[EliotVU]

This fixes the lab example but in the actual non minimal app a new issue occurs where I have multiple typescript files importing the same file and this leads to a new problem where the loader tries to load for example item.ts from another .ts file whom doesn't import it and thus the path also breaks as that .ts file is in a subfolder.

ERROR in ./dist/data/app/script/classes/shared/status.ts
.../dist/data/app/script/classes/clientItem.ts:0:31 
Cannot find external module './shared/item'.

Content of status.ts:

export enum StatusCode{
    NotFound = '404',
    NotValid = '400',
    NotUnique = 'MUST_BE_UNIQUE',
    OK = '200'
}

status.ts should not be trying to import ./shared/item at all.

[EliotVU]

To add to that: I have clientItem.ts and clientTag.ts, with the new fix clientItem.ts works and manages to import all the other .ts files except for clientTag.ts which imports the same modules as clientItem.ts, which looks like this:

clientItem.ts
import {Item, Visibility} from './shared/item'; // success
import {ClientTagReference} from './clientTag'; // success but...

clientTag.ts
import {Tag, TagRule, TagType, TagReference} from './shared/tag'; // success?
import {Visibility} from './shared/item'; // fails

Seems to me the loader is having issues with importing the same module multiple times?

ERROR in ./dist/data/app/script/classes/clientTag.ts
.../dist/data/app/script/classes/clientItem.ts:0:31 
Cannot find external module './shared/item'.

[EliotVU]

Updated the lab example to demonstrate this issue, www.eliotvu.com/files/lab2.rar

[s-panferov]

@EliotVU thanks again! I've found an error with two (or more) root TS files as in your case. Please try v0.2.4

[EliotVU]

New error:

ERROR in ./dist/data/app/script/classes/shared/status.ts
Module build failed: Error: no output found for ...\dist\data\app\script\classes\shared\status.ts

at ...\node_modules\awesome-typescript-loader\dist\index.js:78:19

Content of status.ts

export enum StatusCode{
    NotFound = '404',
    NotValid = '400',
    NotUnique = 'MUST_BE_UNIQUE',
    OK = '200'
}

[s-panferov]

@EliotVU I don't think that it's loader error, because the code you published is not a valid TypeScript. It must show you errors like:

/Users/panferov-s/Workspace/issue/lab/src/classes/shared/status.ts:4:9
Type 'string' is not assignable to type 'StatusCode'.

It does it in my case. Could you please publish one more example with your error?

[EliotVU]

Ah good point, I forgot I'm using invalid typescript for that one file, which actually does work regardless of the error, it is more like a warning even if it may be marked as an error.

I believe the issue here with the loader is that it probably denies the file if an error occurred? Where as ordinary Typescript will just throw an error but still continue with building the .js file and thus work regardless. p.s. assigning a string to an enum is supposed to be supported in a later file so I kept it.

So could you make it so it continues building regardless?

[s-panferov]

@EliotVU yes, I think I can. But I can't repeat setup when errors about StatusCode don't appear. If you don't see the errors — please send me the code so I can repeat this.

I'll implement "emit anyway" stuff.

[EliotVU]

I added the status.ts to "lab" but I get the same error as yours so no need to reupload. That said I don't get it in the main project where it just says "no output found for ...", no clue why it doesn't mention the error first.

[EliotVU]

In lab.rar (the last one you got from me) this error also happens to appear on very random occasions:
ERROR in ./src/classes/client-item.ts
Module build failed: Error: no output found for ...\lab\src\classes\client-item.ts

I also figured even when successful there is no app.bundle.js in /dist/ ever.

[EliotVU]

Oh the /dist/ is empty cause I forgot I'm using gulp-webpack without gulp pipes 📦

[EliotVU]

Alright after some debugging and editing your code I noticed an odd issue that might be the cause of all this:

When trying this code in main.js:

var _status = require('./classes/shared/status');
var Status = _status.Status;
console.log(Status.NotFound);

// now both client-tag and client-item will fail regardless of client-tag imports
var Tag = require('./classes/client-tag');
console.log(new Tag.Tag());

var Item = require('./classes/client-item'); // works
console.log(new Item.Item());

Status.module: not empty
client-tag.module: not found and empty
client-item.module: not found and empty

Now if I compile the main.js in this require order:

var Item = require('./classes/client-item'); // works
console.log(new Item.Item());

// now both client-tag and client-item will fail regardless of client-tag imports
var Tag = require('./classes/client-tag');
console.log(new Tag.Tag());

var _status = require('./classes/shared/status');
var Status = _status.Status;
console.log(Status.NotFound);

Status.module: empty
client-tag.module: not empty
client-item.module: not empty

Where empty means no text at all.

Uh?

[EliotVU]

I fixed this by rewriting your flow code at index.js:

flow.then(
    function () {
        return state.checkDependenciesSafe(resolver, fileName);
    })
    .then(function () {
        console.log('----');
        console.log('compiling file', fileName);

        var output = state.emit(fileName);
        var text = '';
        for( var i = 0; i < output.files.length; ++ i ){
            if( path.normalize(output.files[i].name.replace('.js', '.ts')) === path.normalize(fileName) ){
                text = output.files[i].text;
            }
        }
        console.log(text.substr(0, 64))
        console.log('compiled file', fileName);
        console.log('----');
        state.resetService();
        state.resetProgram();
        callback(null, text);
    })
    .finally(function(){
        deps.clear();
        deps.add(fileName);
        state.dependencies.applyChain(fileName, deps);
    });

What fixes it are the resetService and resetProgram calls, though this only good as a temporary fix because this causes it to recompile all .ts files for each .ts files but at least it ain't no more skipping some random files lol?

Example Log:

compiling file c:\wamp\www\lab\src\classes\client-tag.ts
writing file c:/wamp/www/lab/src/classes/shared/status.js.map
writing file c:/wamp/www/lab/src/classes/shared/status.js
writing file c:/wamp/www/lab/src/classes/shared/tag.js.map
writing file c:/wamp/www/lab/src/classes/shared/tag.js
writing file c:/wamp/www/lab/src/classes/client-tag.js.map
writing file c:/wamp/www/lab/src/classes/client-tag.js
writing file c:/wamp/www/lab/src/classes/client-item.js.map
writing file c:/wamp/www/lab/src/classes/client-item.js
emitting done for c:\wamp\www\lab\src\classes\client-tag.ts
var __extends = this.__extends || function (d, b) {
for (va
compiled file c:\wamp\www\lab\src\classes\client-tag.ts

status.ts is not even imported by client-tag.ts but still written,
now without the fix it also tries to write status.js but also stops there with the whole writing, thus skipping all the other files.

[s-panferov]

@EliotVU just a status update. Right now I can't understand what is wrong, it looks like TS compiler error or something like that. The workaround is to use one root entry TS file.

I'll continue working on that problem during the next weekend.

[EliotVU]

Alright thanks, looking out for the fix! Currently compiling the Typescript files takes about 5-7 seconds with this reset "hack".

[s-panferov]

@EliotVU

awesome-typescript-loader@0.3.0-rc.0 was published. please check and reopen the issue if something is wrong.

[s-panferov]

@EliotVU, sorry, the right version is v0.3.0-rc.1

[EliotVU]

Thanks, it appears to have been fixed. Well except for the module not found error, but that has already been reported. Thanks for your time!