Typescript import are missing the .js extension when it compiled to javascript [duplicate]

Question

I have decided to migrate my js project into ts, however I am faced with the following problem: all imports in ts files are missing the .js extension in the compiled js files. This in turn raises the following error: Loading failed for the module with source “http://localhost:5500/build/test/first”. on my browser console. Here is the code

/src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script src="/build/test/last.js" type="module"></script>
</html>

/src/test/first.ts

export class First {
    name: string;

    constructor(name: string) {
        this.name = name
    }
}

/src/test/last.ts

import {First} from "./first"
class Last {

    constructor() {
        let name = new First("this is my name").name;
        console.log(name)
    }
}

new Last();

/build/test/first.js

export class First {
    constructor(name) {
        this.name = name;
    }
}

/build/test/last.js

import { First } from "./first";
class Last {
    constructor() {
        let name = new First("this is my name").name;
        console.log(name);
    }
}

Notice that in last.js, the import is missing a .js extension and if I manually add the missing extension every thing works as expected. And finally here is my ts config

{
    "compilerOptions": {
        "target": "ESNext",
        "lib": ["DOM","ES2017", "DOM.Iterable", "ScriptHost"],
        "watch": true,
        "rootDir": "./src", 
        "outDir": "./build",
        "sourceMap": true,
        "removeComments": true,
        "noEmitOnError": true,
        "strict": true,
    }
}

Is there something I am missing that is not adding the right extension on the imports? If so, please tell me what I am doing wrong. Thanks.

Does this answer your question? Appending .js extension on relative import statements during Typescript compilation (ES6 modules) — Jörg W Mittag
– Jörg W Mittag, Commented Sep 12, 2020 at 6:56

Jörg W Mittag · Accepted Answer · 2020-06-04 06:08:27Z

-11

Is there something I am missing that is not adding the right extension on the imports?

Why would TypeScript randomly change your imports? You told it to import a module named ./first and it correctly compiled that to a an import for a module named ./first.

If you want to import a different module, you need to tell TypeScript to import a different module.

So, if you don't want to import a module named ./first but instead want to import a module named ./first.js, you need to tell TypeScript to import a module named ./first.js, not a module named ./first:

import {First} from "./first.js"

answered Jun 4, 2020 at 6:08

Jörg W Mittag

371k79 gold badges457 silver badges666 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Astonvish32 Over a year ago

Thank you for the explanation! And yes this solves the problem. I believe the confusion arose when I read the docs (typescriptlang.org/docs/handbook/modules.html) and it was not mentioned that the import must end with .js in the ts file. In fact all of their example on module does not have any extension on ts import. Many thanks!

Jörg W Mittag Over a year ago

"it was not mentioned that the import must end with .js in the ts file" – It is perfectly fine to have an import not end in .js. The import simply needs to be the thing that you want to import. It is really that simple. If you want to import the module named ./first, then you write from "./first", and if you want to import the module named ./first.js, then you write from "./first.js". TypeScript can't read your mind, it will simply import the module you tell it to import, no more, no less.

Jörg W Mittag Over a year ago

In my own project, I want to import a module named ./config, so obviously, I am importing ./config and not ./config.js. In fact, in my project, there is no ./config.js, so that wouldn't even work.

Astonvish32 Over a year ago

Thanks for the additional explanation.

Adam Gawne-Cain Over a year ago

The OPs question is reasonable and does not deserve -1. They started with two linked TS modules (where .ts extension in import is implied) and compiled them to two JS modules. The TS compiler should preserve the link between the generated JS modules, which requires it to add the .js extension to the import.

|

Collectives™ on Stack Overflow

Typescript import are missing the .js extension when it compiled to javascript [duplicate]

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related