Importing a TS file from a JS file with using extension .js does not work

[frank-weindel]

Describe the bug

There are a number of previous issues/PRs that have solved various aspects of this:

• importing aliased ts files using their corresponding js extesions fails  #7918
• Typescript imports with ".js" file extension are failing. #6671
• feat: importing ts files using their corresponding js extesions #5510
• Importing a .js typescript resource from a typescript file fails #3040

This and the above issues all relate to being able to import a TS file by a .js file extension. The previous issues seem to have solved this issue when the source file is a .ts file or a .vue file (with a special meta indicator). My issue is that TypeScript also supports type checking/compiling .js files with the checkJs config option. In this case, I need Vite to also support looking for a .ts file even if I provide its import path with .js. But that is not happening right now.

The problem is that I don't seem to have any easy way to satisfy both what Vite wants AND what TypeScript wants.

Please see the reproduction and steps below.

Reproduction

https://stackblitz.com/edit/vitejs-vite-6frdv6?file=package.json

Steps to reproduce

• Run npm install
• Run npm run tsc
  • Notice that TSC compilation is successful.
• Run npm run dev
  • Notice the error: [vite] Internal server error: Failed to resolve import "./myTsFile.js" from "main.js". Does the file exist?
• Change the import line in main.ts to:
  • import { MyTsClass } from './myTsFile.ts'; (the extension is now .ts)
• Run npm run tsc
  • Note that TSC reports an error: error TS2835: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Did you mean './myTsFile.js'?
• Run npm run dev
  • Notice it builds and runs successfully.

To summarize:

• tsc wants the extension of the import to be .js
• vite wants the extension of the import to be .ts

System Info

System:
    OS: macOS 12.2.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 2.98 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.nodenv/versions/16.14.0/bin/node
    Yarn: 1.22.15 - ~/.nodenv/versions/16.14.0/bin/yarn
    npm: 8.3.1 - ~/.nodenv/versions/16.14.0/bin/npm
  Browsers:
    Chrome: 109.0.5414.87
    Firefox: 108.0.1
    Safari: 15.3

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[suguanYang]

I think the problem is that vite use moduleResolution that similar to node to resolve the imports, but the tsc use nodenext that specified in the tsconfig. @sapphi-red

[frank-weindel]

Is anyone aware of any workaround that can be used to fix this at the moment? Something like this works if all JS import references have an equivalent TS file. But this is not the case in my project.

    resolve: {
      alias: [{ find: /((\/|^)(src|tests)\/.*)\.js$/, replacement: '$1.ts' }],
    },

[suguanYang]

You have 2 solutions:

1. use node as the moduleResolution, and change the import { MyTsClass } from './myTsFile.ts' to import { MyTsClass } from './myTsFile' , the behavior will keep same as vite
2. use @rollup/plugin-typescript

[frank-weindel]

Thank you @suguanYang!

I was just reading the TypeScript 5.0 beta announcement and there's yet a new moduleResolution option coming soon named "bundler" which looks like would be an even better choice than using "node".

[suguanYang]

Thank you @suguanYang!

I was just reading the TypeScript 5.0 beta announcement and there's yet a new moduleResolution option coming soon named "bundler" which looks like would be an even better choice than using "node".

You could check this plugin if its support this new moduleSolution @rollup/plugin-typescript

[sapphi-red]

Duplicate of #8993