allowJs: why is `import "x.js"` being ignored?

[OliverJAsh]

Source:

// ./src/main.ts
import './console-log';
import './console-log.js';

console.log('console-log main')

// ./src/console-log.js
console.log('console-log JS')

// ./src/console-log.ts
console.log('console-log TS')

Config:

{
    "compilerOptions": {
        "module": "amd",
        "outFile": "./target/main.js",
        "allowJs": true
    },
    "files": ["./src/main.ts"]
}

Output:

// ./target/main.ts
console.log('console-log TS');
define("main", ["require", "exports", './console-log', './console-log.js'], function (require, exports) {
    "use strict";
    console.log('console-log main');
});

Notice that the output is missing the contents of the ./console-log.js import.

[kitsonk]

I suspect this is a dupe of #4595 and fixed via #8895

[OliverJAsh]

Is there any workaround? I guess I could rename all of my files to .ts

[kitsonk]

I guess the question is why do you have to be explicit about the file extension on your modules?

I see you are outputting to AMD... it is considered not a good idea to specify the file extension in AMD, because of portability issues just like this.

[OliverJAsh]

I have an app where some modules are TS, some are JS. I want to include all of them, but this bug means that currently, all my JS files are ignored.

I'm being explicit in my example because I have two files, one in TS and one in JS, and I want to import both. The fact they have the same name is irrelevant.

[kitsonk]

I'm being explicit in my example because I have two files, one in TS and one in JS, and I want to import both. The fact they have the same name is irrelevant.

Name two different modules .js and .ts is a recipe for disaster... When you files are transpiled and emitted, what do you think the .ts file is going to be named?

[OliverJAsh]

The issue persists even if the files have different names.

[kitsonk]

But then you don't (and shouldn't) append .js to your file name for an AMD module loader.

[OliverJAsh]

I see, that seems to fix it! Thank you.

On Fri, 10 Jun 2016 at 11:21 Kitson Kelly notifications@github.com wrote:

But then you don't (and shouldn't) append .js to your file name for an
AMD module loader.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#9070 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AA4QCa5zw196YN_9Tm7x4Xx-zJIHjquSks5qKTqOgaJpZM4Iyvi6
.

[OliverJAsh]

Now I have separate names, the modules are being included in the bundle. However, the AMD output is broken:

console.log('console-log JS');
console.log('console-log TS');
define("main", ["require", "exports", './console-log-1', './console-log-2'], function (require, exports) {
    "use strict";
    console.log('console-log main');
});

Requiring/importing main will fail because there are no AMD modules called console-log-1 or console-log-2. TypeScript did not wrap them as AMD modules. Why is this?

[DanielRosenwasser]

@OliverJAsh did console-log-1 or console-log-2 have any import or export statements? Our detection on whether or not a file is a module is based on that, and for global files, we just do simple concatentation. If you don't have any exports, you can use export {}.

[OliverJAsh]

They have no import/export statements. Should TypeScript be adding them as dependencies to the outputted module if they are not detected to be a module?

In my case I am gradually converting an app into modules, so it would be difficult to add export everywhere.

[mhegazy]

there are two issues, first the .js extension issue. this is tracked by #4595 and fixed in #8895 as @kitsonk noted.

the second is that the files are not considered modules, as @DanielRosenwasser noted. for these, consider adding an empty export statement in the JS files, e.g.:

// ./src/console-log.js
console.log('console-log JS')

export {}; // makes it a module

with that change, the output would look like:

define("console-log", ["require", "exports"], function (require, exports) {
    "use strict";
    // ./src/console-log.ts
    console.log('console-log TS');
});
define("console-log", ["require", "exports"], function (require, exports) {
    "use strict";
    // ./src/console-log.js
    console.log('console-log JS');
});
define("main", ["require", "exports", "console-log", "console-log"], function (require, exports) {
    "use strict";
    console.log('console-log main');
});

The change that needs to be done on the TS compiler side, is to treat a file as module, if it was imported. this is more inline with the spec. we should file a different issue to track that.

[OliverJAsh]

I think TypeScript should not allow the user to end up in the situation I did, with a broken AMD module. Could TypeScript throw an error/warn if you try to load a JS file that is not a module?

[kitsonk]

@OliverJAsh, covered by #9082