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

[ygj6]

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.

[haoqunjiang]

Well, though it is a bug, please be aware that:

Note it is NOT recommended to omit extensions for custom import types (e.g. .vue) since it can interfere with IDE and type support.

[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.

[liuarui]

好的，我们也注意到了社区对文件后缀的建议。但是这种用法在我们现有的很多项目中已经被广泛使用，所以如果我们想要保持项目的一致性，我们只能省略文件后缀。另外，由于社区允许用户省略文件后缀，所以我觉得有必要保证这个功能的正确性。

你好，想问下这个问题现在有解决吗？我们也碰到了这个问题，我们是在vue2项目中使用，在老项目中有非常多类似import App from '@/App'这种写法

[liuarui]

Well, though it is a bug, please be aware that:

Note it is NOT recommended to omit extensions for custom import types (e.g. .vue) since it can interfere with IDE and type support.

你好，想问下这个问题预计什么时候能修复呢？

[ygj6]

Hi @patak-js @nihalgonsalves , could you please review this PR #3534 , we have a lot of legacy projects which use @ alias and omit extensions. Thank you!

[ikeq]

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

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

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