[BUG] tsx fails to resolve .tsx file when imported with .js extension in Typescript ESM project

[petercpwong]

Bug description

tsx is able to resolve to .js and .ts files but fails to resolve .tsx files when trying to import using a .js extension in a Typescript ESM project.

For example:

import { MyComponent } from './MyComponent.js'

The import statement above should resolve to ./MyComponent.ts or ./MyComponent.tsx as per this discussion and the official TS docs. Typescript will not rewrite import statements (specifically the extension) when transpiling, so the .js extension is required in import statements inside ESM projects. This is so the transpiled code can correctly resolve to the final target file.

However, I'm geting this error when using tsx:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '<REDACTED>/MyComponent.js' imported from <REDACTED>/index.ts

It works perfectly fine when using ts-node (specifically ts-node-esm) and also when building with tsc

Reproduction

https://stackblitz.com/edit/stackblitz-tsx-esm-bug?file=index.ts

Environment

System:
    OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 7.20 GB / 31.24 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.16.0 - ~/.volta/tools/image/node/18.16.0/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 9.5.1 - ~/.volta/tools/image/node/18.16.0/bin/npm
    pnpm: 8.6.9 - ~/.local/share/pnpm/pnpm
  npmPackages:
    tsx: ^3.12.7 => 3.12.7

Can you work on a fix?

• I’m interested in opening a pull request to address this issue.

[privatenumber]

Closing as a duplicate of #112