Problems caused by using alisaes and omitting file suffixes at the same time

Describe the bug

If a specific file suffix is added as the resolve.extension field, vite allows its users to ignore the file suffix. However, when the user ignores the file suffix and uses the alias (@) to refer to a file in the project, an internal server error will occur. This error indicates that the file whose suffix is omitted does not exist. For example, if you add the .vue field in resolve.extension, you can omit the.vue suffix when referencing a vue file. However, in the case where we use @/path to refer to a file in the project, the project does not work properly. I will submit a PR to fix this problem!

Reproduction

https://github.com/ygj6/vite-issue-investigative/tree/alias_bug

In the main.js file, if user uses import App from '@/App' to refer to the App.vue. An error appears which indicates No loader is configured for ".vue" files: src/App.vue. However, there are two cases which can work as normal. For example, import App from './App or import App from '@/App.vue.

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: Windows 10 10.0.19041
    CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
    Memory: 15.51 GB / 23.74 GB
  Binaries:
    Node: 12.16.3 - D:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.4 - D:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 90.0.4430.212
    Edge: Spartan (44.19041.964.0), Chromium (90.0.818.66)
    Internet Explorer: 11.0.19041.1

Used package manager:

Logs

---

Before submitting the issue, please make sure you do the following

• 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.
• Provide a description in this issue that describes the bug.
• 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/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[ygj6]

okay, we have also taken note of the community’s suggestions on the file suffixes. However, this usage has been widely used in many of our existing projects, so if we want to maintain the consistency of the projects, we have no choice but to omit the file suffix. In addition, since the community allows users to omit the file suffix, i think it is necessary to ensure the correctness of this function.

[ikeq]

A temporary workaround vite-plugin-resolve-extension-vue.

// vite.config.js
import resolveExtensionVue from 'vite-plugin-resolve-extension-vue';

export default {
  plugins: [resolveExtensionVue()],
};