TypeScript cannot emit valid ES modules due to file extension issue

[ctjlewis]

Bug Report

This report is based on the problem covered in #28288 and #16577, but intends to emphasize the fact that this explicitly precludes TS from emitting valid ECMAScript modules.

Issue

Because TS imports do not allow file extensions, but imports in emitted ES modules are not resolved to their relevant file extensions (import ... from './myModule' vs. import ... from './myModule.js'), this output is unusable unless transpiled again with Rollup + Babel or a similar toolkit, no matter how much active care is taken while authoring source code. Executing emitted modules will always throw ERR_MODULE_NOT_FOUND because these sources are not rewritten.

Switching to "module": "commonjs" is not a valid suggestion in this case, as the goal is to get valid ESM output.

⏯ Playground Link

Use yarn test: https://repl.it/@christiantjl/TSImportFileExtensions

💻 Code

tsconfig.json

{
  "compilerOptions": {
    "outDir": "build/",
    
    "target": "esnext",
    "module": "esnext",

    "moduleResolution": "node",
    "esModuleInterop": true
  }
}

index.ts

import { test } from './importMe';
console.log(test); 

build/index.js

import { test } from './importMe';
console.log(test);

🙁 Actual behavior

The import { test } from './importMe' statement is not modified.

🙂 Expected behavior

build/index.js should contain:

import { test } from './importMe.js';
console.log(test);

[andrewbranch]

Because TS imports do not allow file extensions

They do—index.ts should be written

import { test } from './importMe.js';
console.log(test); 

[RGFTheCoder]

My greatest pet-peeve is that automatic TS imports in VSCode are done as import './importMe' rather than import './importMe.js' by default, which always causes the browser, or node, to error saying it can't find the file. It's really annoying, but at least it changes to .js after you change one of the imports manually.

[ctjlewis]

@RGFTheCoder Yeah, the TS error should be adjusted to say "please use .js file extension when importing TypeScript files" or something. Currently the error presented on:

import test from './test.ts'

is:

An import path cannot end with a '.ts' extension. Consider importing './test' instead.ts(2691)

It is highly unintuitive that you need to use a .js file extension when importing another TS file from inside a TS file, and nobody would really be expected to try that without being explained this first. Ideally the compilation process would just handle it, since that's what it's for: Turning valid TS into valid ES.

It currently turns valid TS into invalid ES. The compiled output does not execute as expected when following the directions provided by TS2691. It is erroneous output.

[andrewbranch]

@RGFTheCoder there’s a setting for that so you don’t have to manually fix up an import for every file:

In the future, there will likely be a set of compiler settings that make this the default, and/or make extensionless imports not resolve, but we’re not quite there yet.

Yeah, the TS error should be adjusted to say "please use .js file extension when importing TypeScript files" or something.

Seems reasonable. Not quite with that phrasing, but your PR looks good.

Ideally the compilation process would just handle it, since that's what it's for: Turning valid TS into valid ES.

Starting down this path made me realize I failed to label this as a duplicate of #16577.

[richardkazuomiller]

I wish this issue could be left open until the problem is solved. There are actual problems with the workaround of just adding .js to the end of the file. Just to name the ones at the top of my mind:

1. The .js file doesn't exist.
2. Because the file doesn't exist, ESLint and similar tools will throw an error. I don't know if there's a setting to tell ESLint "Yes, I know that the file I'm trying to import doesn't exist, but I promise that it will later. Please look for a .ts file, or a .tsx file depending on the situation, and if that one doesn't exist, then you can throw an error." If there is, please correct me 🙏.
3. The TypeScript documentation uses extension-less imports. None of the documentation of TypeScript says "If you don't put .js files at the end of your imports, you can't use ES modules."
4. There is an elephant in the room, which is that any project that uses modules needs file extensions in the imports. Even if we can't agree on what to do about it, that is the situation we are in, and yet the compiler chooses to ignore said elephant by just outputting files that everyone knows won't run without having some other build step to fix them.