Typescript imports with ".js" file extension are failing.

Describe the bug

Importing from a Typescript file by referencing it with a “.js” file extension is failing with the error below. It is my understanding that it should work (based on looking at #5510).

To reproduce, clone the repository provided, run pnpm install and pnpm run dev.

This is a VueJS project, but after sitting in front of this bug report for a long time and agonising over the question, I think it is probably a Vite bug and not a vuejs/core bug. That, or I am making an elementary mistake (sorry).

22:36:26 [vite] Internal server error: Failed to resolve import "../constructors.js" from "src/components/Example.vue". Does the file exist?
  Plugin: vite:import-analysis
  File: /home/redacted/redacted/vite-bug-report/vite-bug-report/src/components/Example.vue
  1  |  import { defineComponent as _defineComponent } from "vue";
  2  |  import { makeProfile } from "../constructors.js";
     |                               ^
  3  |  const _sfc_main = /* @__PURE__ */ _defineComponent({
  4  |    setup(__props, { expose }) {
      at formatError (/home/redacted/redacted/vite-bug-report/vite-bug-report/node_modules/.pnpm/vite@2.7.13/node_modules/vite/dist/node/chunks/dep-f5552faa.js:36769:46)
      at TransformContext.error (/home/redacted/redacted/vite-bug-report/vite-bug-report/node_modules/.pnpm/vite@2.7.13/node_modules/vite/dist/node/chunks/dep-f5552faa.js:36765:19)
      at normalizeUrl (/home/redacted/redacted/vite-bug-report/vite-bug-report/node_modules/.pnpm/vite@2.7.13/node_modules/vite/dist/node/chunks/dep-f5552faa.js:73703:26)
      at processTicksAndRejections (node:internal/process/task_queues:96:5)
      at async TransformContext.transform (/home/redacted/redacted/vite-bug-report/vite-bug-report/node_modules/.pnpm/vite@2.7.13/node_modules/vite/dist/node/chunks/dep-f5552faa.js:73843:57)
      at async Object.transform (/home/redacted/redacted/vite-bug-report/vite-bug-report/node_modules/.pnpm/vite@2.7.13/node_modules/vite/dist/node/chunks/dep-f5552faa.js:36985:30)
      at async doTransform (/home/redacted/redacted/vite-bug-report/vite-bug-report/node_modules/.pnpm/vite@2.7.13/node_modules/vite/dist/node/chunks/dep-f5552faa.js:52060:29) (x2)

Reproduction

https://github.com/dashavoo/vite-bug-report

System Info

System:
    OS: Linux 5.10 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Memory: 10.53 GB / 12.29 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  npmPackages:
    @vitejs/plugin-vue: 2 => 2.1.0
    vite: ^2.7.13 => 2.7.13

Used Package Manager

pnpm

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 https://github.com/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.

[wight554]

The issue is because #5510 handles cases where the importer is a TS file only, then it resolves the .js/.ts import check. In this case, because the importer is a Vue file (not a TS file), Vite incorrectly skips the import check, hence the error. To fix this, we need to provide a hint somewhere so that Vite knows the Vue file is written in TS, and do the extra import checks.

it’s also broken when used with typescript alias: tsconfig, vite config Error:

Error: [vite]: Rollup failed to resolve import "@src/components/App/index.js" from "src/main.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

Project for reference: https://github.com/wight554/blog-template/ (doesn’t contain nodenext changes)

I have to do smth like this to make it work:

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

[darthtrevino]

This comment seems to indicate that support for this feature has been shipped? I’m using v2.8.3 and this issue is still present.

https://github.com/vitejs/vite/issues/5539#issuecomment-960271520