Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
7 tasks done
sebwas opened this issue Dec 22, 2021 · 4 comments · Fixed by #6252
Closed
7 tasks done

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

sebwas opened this issue Dec 22, 2021 · 4 comments · Fixed by #6252

Comments

@sebwas
Copy link

sebwas commented Dec 22, 2021

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

@sebwas
Copy link
Author

sebwas commented Dec 22, 2021

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
Copy link
Contributor

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

@sebwas
Copy link
Author

sebwas commented Dec 22, 2021

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

haoqunjiang added a commit to haoqunjiang/vite that referenced this issue Dec 24, 2021
to match the peer dependency version in the `package.json`.

`@vue/compiler-sfc` is no longer used, therefore removed from the message.

Closes vitejs#6234
@sebwas
Copy link
Author

sebwas commented Dec 24, 2021

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.

@github-actions github-actions bot locked and limited conversation to collaborators Jan 8, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants