Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

support .js extension for imports in .ts files #1

Closed
dominikg opened this issue Oct 5, 2021 · 9 comments · Fixed by #2
Closed

support .js extension for imports in .ts files #1

dominikg opened this issue Oct 5, 2021 · 9 comments · Fixed by #2

Comments

@dominikg
Copy link

dominikg commented Oct 5, 2021

It is supported in ts-node/esm and according to typescript that's the recommended way to import
https://twitter.com/orta/status/1444958295865937920

foo.ts

import bar from './bar.js'  // bar.js does not exist on disk, it is the transpilation result of bar.ts

Right now this fails with ENOENT, here's how it looks like in uvu's typescript.module example when you use math.ts and utils.ts instead of .js

devDependencies:
+ loadr 0.1.1
+ tsm 2.0.0
+ uvu 0.5.1
dominikg@mb14:~/develop/uvu/examples/typescript.module$ pnpm test

> @ test /home/dominikg/develop/uvu/examples/typescript.module
> tsm node_modules/uvu/bin.js tests

(node:8503) ExperimentalWarning: --experimental-loader is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
Error: ENOENT: no such file or directory, open '/home/dominikg/develop/uvu/examples/typescript.module/src/math.js'
@lukeed
Copy link
Owner

lukeed commented Oct 5, 2021

Waiting on the next version of esbuild which might handle this automatically: evanw/esbuild#1505 (comment)

Also, TS 4.5 is still in beta so this isn't officially doable yet

@lukeed
Copy link
Owner

lukeed commented Oct 5, 2021

Also, could you just drop the extension in this case?

import * as math from '../src/math';
// resolves to math.ts cuz it exists

That uvu example only includes the ".js" extension inside the import to match the reproduction it was closing. The other "typescript" example doesn't include extensions in the imports because TS has never needed it when importing another TS file.

For example: https://github.com/lukeed/uvu/blob/master/examples/typescript/tests/math.ts#L3

@dominikg
Copy link
Author

dominikg commented Oct 5, 2021

My understanding of authoring typescript esm is that you should always use import from 'foo.js' in .ts files , not import from 'foo.ts' or import from 'foo'. - Please correct me if i'm wrong here.
Dropping the extension works, but if using .js is the official recommendation, tsm should support it.

regarding typescript 4.5: I think that only adds support for mts/cts, 4.4 already works with "type": "module" in package.json and .ts files importing .js extension

@lukeed
Copy link
Owner

lukeed commented Oct 5, 2021

I've always left off extensions, but I also always only use TS alongside a bundler of some kind, so it doesn't matter. Going extension-less & relying on tsc output alone to produce JS files (with ESM flavor) would put you in a bad spot since the output also wouldn't include an extension, making the ESM runtime (node or browser) bail.

But you're right, it should match.

Playing with it now – fairly easy on the ESM side. Unblocking --require tsm might be a little trickier.

@lukeed
Copy link
Owner

lukeed commented Oct 5, 2021

Resolved :) Thanks for opening this up

@lukeed lukeed closed this as completed in #2 Oct 5, 2021
@karlhorky
Copy link

karlhorky commented Mar 25, 2022

I think these fully-specified ESM paths (with extensions) may not be fully working yet - eg. with other extensions such as .tsx:

$ ls
index.ts                            abc.tsx

$ cat index.ts
import abc from './abc.js';

$ yarn tsm index.ts
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/k/p/project/abc.js' imported from /Users/k/p/project/index.ts
    at new NodeError (node:internal/errors:371:5)
    at finalizeResolution (node:internal/modules/esm/resolve:416:11)
    at moduleResolve (node:internal/modules/esm/resolve:932:10)
    at defaultResolve (node:internal/modules/esm/resolve:1044:11)
    at resolve (file:///Users/k/p/project/node_modules/tsm/loader.mjs:1:870)
    at Loader.resolve (node:internal/modules/esm/loader:89:40)
    at Loader.getModuleJob (node:internal/modules/esm/loader:242:28)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  code: 'ERR_MODULE_NOT_FOUND'
}

tsc resolves the file just fine:

$ yarn tsc
✨  Done in 0.81s

@karlhorky
Copy link

Should I open a new issue for that?

@karlhorky
Copy link

Opened a PR instead: #33

@karlhorky
Copy link

Nice, tsm@2.3.0 (PR #43) is working, thanks! 🙌

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants