Vite not compiling vue SFCs without literal vue/compiler-sfc

[sebwas]

Describe the bug

When vue 3 is aliased, vite does not seem to be able to find the compiler-sfc package, even if it is explicitly installed (@vue/compiler-sfc).

From some brief dive into the code, the problem seems to be in plugin-vue/src/compiler.ts, where when trying to resolve the package, the @ symbol is not being considered, whereas previously it was.

The error message produced suggests that installing the package will solve the problem, so either the error message needs to be adjusted, or the problem needs to be solved at the root (I suggest including trying to resolve the package with the @ symbol).

Reproduction

Check out

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

---

In the terminal run npm i && npm run dev and you will see the error message.

---

The only changes I made was to alias vue and include @vue/compiler-sfc as a devDependency.

System Info

Locally:

  System:
    OS: macOS 12.0.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 269.88 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.2.0 - /opt/homebrew/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.1.4 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Firefox: 94.0.2
    Safari: 15.1

Stackblitz:

  System:
    OS: Linux undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: Unknown - /bin/jsh
  Binaries:
    Node: 14.16.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /bin/yarn
    npm: 7.17.0 - /bin/npm
  npmPackages:
    @vitejs/plugin-vue: ^2.0.0 => 2.0.1 
    vite: ^2.7.2 => 2.7.6

Used Package Manager

yarn

Logs

error when starting dev server:
Error: Failed to resolve vue/compiler-sfc.
@vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.
    at resolveCompiler (/home/projects/vitejs-vite-b9ckpd/node_modules/@vitejs/plugin-vue/dist/index.js:4069:11)
    at Object.configResolved (/home/projects/vitejs-vite-b9ckpd/node_modules/@vitejs/plugin-vue/dist/index.js:4768:39)
    at eval (/home/projects/vitejs-vite-b9ckpd/node_modules/vite/dist/node/chunks/dep-fcec4469.js:82486:127)
    at Array.map (<anonymous>)
    at resolveConfig (/home/projects/vitejs-vite-b9ckpd/node_modules/vite/dist/node/chunks/dep-fcec4469.js:82486:35)
    at async createServer (/home/projects/vitejs-vite-b9ckpd/node_modules/vite/dist/node/chunks/dep-fcec4469.js:67991:20)
    at async CAC.eval (/home/projects/vitejs-vite-b9ckpd/node_modules/vite/dist/node/cli.js:688:24)

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/vue-next 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.

[sebwas]

For someone else finding this, there is a workaround:

In the devDependencies, you can alias the required package:

{
  "devDependencies": {
    "vue/compiler-sfc": "npm:@vue/compiler-sfc@^3"
  }
}

[stygian-desolator]

If you use vue directly, instead of using vue3 as an alias, you won't get this error 😿

[sebwas]

@stygian-desolator
I mean ... Obviously, you're not wrong. But I wouldn't have discovered this, if it was a thing I could do.

And, unfortunately, that would still leave the error message with a wrong hint on how to solve it.

[sebwas]

Thank you for closing the issue, @antfu and fixing the error message, @sodatea.

Unfortunately, this might not solve the issue in my case, where I need to alias Vue.

Luckily, in this case, my workaround should still work. So if anyone runs into this issue, check the workaround that I posted.