[Feature Request] Add extension to relative import id

[loynoir]

Feature Request

Add extension .mjs to relative import id,

when specific --out-extension:.js=.mjs

Repeoduce

import deps from "./deps"
console.log(deps)

esbuild \
    index.ts \
    --out-extension:.js=.mjs \
    --outdir=dist

Actual

import deps from "./deps";
console.log(deps);

$ node dist/index.mjs
Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'path/to/dist/deps' imported from path/to/dist/index.mjs

Expected

import deps from "./deps.mjs";
console.log(deps);

$ node dist/index.mjs
42

[hyrious]

tsc doesn't append .mjs too.
see #622

[evanw]

Yes, TypeScript works this way by design, and therefore esbuild's TypeScript support also works this way. If you would like for Microsoft to change how TypeScript works you should ask them, not me. I don't work at Microsoft and don't have any control over their roadmap. I believe microsoft/TypeScript#27957 is a relevant issue to follow.

The workarounds for this situation are described here: #622 (comment). Either use .js and "type": "module" or write your own esbuild plugin to implement the behavior you want.

[loynoir]

@evanw

As the bottleneck here is relative import , what do you think of #1564 ?

Allow CLI accessing some out-of-box external preset.

In this case, add an out-of-box preset mark all non-relative import id as external.

So, the output will has no relative import, both typescript and node will happy.

[evanw]

TypeScript's upcoming version 4.5 now has a way to do this. If you have a TypeScript file that needs to import another TypeScript file that will have a .mjs extension when compiled, you should use the .mts file extension for the TypeScript file and you should use import "./deps.mjs" in your TypeScript code to import deps.mts. This will be the official way to do it going forward and doesn't need any special support from esbuild. You can read the announcement here: https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-beta/#new-file-extensions.

Closing this issue since this is being addressed outside of esbuild by the TypeScript team, and is possible to implement within esbuild via a plugin without needing to modify esbuild itself.

[stefanvonderkrone]

if someone is interrested in my solution:
#622 (comment)

[shellscape]

I think it's completely reasonable for a compiler to add a file extension as a transformation. Compilers make all kinds of adjustments for other nuanced mechanics of intent. At the very least, a plugin should solve this. And for what it's worth, the TS team has been repeatedly chided by the community for the decision. Their decision making isn't exactly pure.

Edit: Boom. There's a plugin. https://github.com/favware/esbuild-plugin-file-path-extensions