TypeError [Error]: pluginContext.vueCompilerOptions.plugins is not iterable

[Unfaehig]

What happened?

I tried to use the CLI to generate a starting project using TypeScript support. Sadly this is craching, if you try to start it in dev mode you get following error: TypeError [Error]: pluginContext.vueCompilerOptions.plugins is not iterable. You can start the server when removing the vueTsc option in vite-plugin-checker plugin of the quasar.config.ts file. However it feels not right!

What did you expect to happen?

Just runs out of the box to test framework :)

Reproduction URL

How to reproduce?

1. npm init quasar

• App with Quasar CLI, let's go!
• Quasar v2 (Vue 3 | latest and greatest)
• Typescript
• Quasar App CLI with Vite 5 (BETA | next major version - v2) or Quasar App CLI with Vite 2 (stable | v1)
• Composition API with <script setup>
• Sass with SCSS syntax
• Linting (vite-plugin-checker + ESLint + vue-tsc) - Just this one is enough

2. quasar dev

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)

Platforms/Browsers

No response

Quasar info output

No response

Relevant log output

.d88888b.
d88P" "Y88b
888     888
888     888 888  888  8888b.  .d8888b   8888b.  888d888
888     888 888  888     "88b 88K          "88b 888P"
888 Y8b 888 888  888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888  888      X88 888  888 888
 "Y888888"   "Y88888 "Y888888  88888P' "Y888888 888
       Y8b

 App • Using quasar.config.ts in "ts" format

 » Reported at............ 8/30/2024 12:23:30 AM
 » App dir................ 
 » App URL................ http://localhost:9000/
 » Dev mode............... spa
 » Pkg quasar............. v2.16.9
 » Pkg @quasar/app-vite... v2.0.0-beta.20
 » Browser target......... es2022|firefox115|chrome115|safari14

 App • Opening default browser at http://localhost:9000/


node:internal/event_target:1090
  process.nextTick(() => { throw err; });
                           ^
TypeError [Error]: pluginContext.vueCompilerOptions.plugins is not iterable
    at createPlugins (XXX/node_modules/@vue/language-core/lib/plugins.js:48:45)
    at Object.createVueLanguagePlugin (XXX/node_modules/@vue/language-core/lib/languagePlugin.js:52:49)
    at exports.getLanguagePlugins (XXX/node_modules/vite-plugin-checker/dist/cjs/checkers/vueTsc/languagePlugins.cjs:30:33)
    at Object.apply (XXX/node_modules/@volar/typescript/lib/node/proxyCreateProgram.js:50:33)
    at getBuilderCreationParameters (XXX/node_modules/vite-plugin-checker/dist/cjs/checkers/vueTsc/typescript-vue-tsc/lib/typescript.js:128533:18)
    at createSemanticDiagnosticsBuilderProgram (XXX/node_modules/vite-plugin-checker/dist/cjs/checkers/vueTsc/typescript-vue-tsc/lib/typescript.js:129027:74)
    at createNewProgram (XXX/node_modules/vite-plugin-checker/dist/cjs/checkers/vueTsc/typescript-vue-tsc/lib/typescript.js:131080:22)
    at synchronizeProgram (XXX/node_modules/vite-plugin-checker/dist/cjs/checkers/vueTsc/typescript-vue-tsc/lib/typescript.js:131054:7)
    at Object.createWatchProgram (XXX/node_modules/vite-plugin-checker/dist/cjs/checkers/vueTsc/typescript-vue-tsc/lib/typescript.js:130960:3)
    at Object.configureServer (XXX/node_modules/vite-plugin-checker/dist/cjs/checkers/vueTsc/main.js:128:13)

Node.js v22.7.0

Additional context

No response

[github-actions]

Hi @Unfaehig! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[Aeradon]

I just tried setting up a project and got the exact same problem.
I also tried using both versions of Vite, but I got the same error.

[annlumia]

I got the similiar problem.

I have tried with nodejs v18, 20, 22.

 .d88888b.
d88P" "Y88b
888     888
888     888 888  888  8888b.  .d8888b   8888b.  888d888
888     888 888  888     "88b 88K          "88b 888P"
888 Y8b 888 888  888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888  888      X88 888  888 888
 "Y888888"   "Y88888 "Y888888  88888P' "Y888888 888
       Y8b


 » Reported at............ 8/30/2024 10:31:17 AM
 » App dir................ /home/hotman/repos/Tester/quasar-project
 » App URL................ http://localhost:9000/
                           http://192.168.1.33:9000/
 » Dev mode............... spa
 » Pkg quasar............. v2.16.9
 » Pkg @quasar/app-vite... v1.9.5
 » Browser target......... es2019|edge88|firefox78|chrome87|safari13.1

 App • Opening default browser at http://localhost:9000/


node:internal/event_target:1062
  process.nextTick(() => { throw err; });
                           ^
TypeError [Error]: pluginContext.vueCompilerOptions.plugins is not iterable
    at createPlugins (/home/hotman/repos/Tester/quasar-project/node_modules/@vue/language-core/lib/plugins.js:48:45)
    at Object.createVueLanguagePlugin (/home/hotman/repos/Tester/quasar-project/node_modules/@vue/language-core/lib/languagePlugin.js:52:49)
    at exports.getLanguagePlugins (/home/hotman/repos/Tester/quasar-project/node_modules/vite-plugin-checker/dist/cjs/checkers/vueTsc/languagePlugins.cjs:30:33)
    at Object.apply (/home/hotman/repos/Tester/quasar-project/node_modules/@volar/typescript/lib/node/proxyCreateProgram.js:50:33)
    at getBuilderCreationParameters (/home/hotman/repos/Tester/quasar-project/node_modules/vite-plugin-checker/dist/cjs/checkers/vueTsc/typescript-vue-tsc/lib/typescript.js:128533:18)
    at createSemanticDiagnosticsBuilderProgram (/home/hotman/repos/Tester/quasar-project/node_modules/vite-plugin-checker/dist/cjs/checkers/vueTsc/typescript-vue-tsc/lib/typescript.js:129027:74)
    at createNewProgram (/home/hotman/repos/Tester/quasar-project/node_modules/vite-plugin-checker/dist/cjs/checkers/vueTsc/typescript-vue-tsc/lib/typescript.js:131080:22)
    at synchronizeProgram (/home/hotman/repos/Tester/quasar-project/node_modules/vite-plugin-checker/dist/cjs/checkers/vueTsc/typescript-vue-tsc/lib/typescript.js:131054:7)
    at Object.createWatchProgram (/home/hotman/repos/Tester/quasar-project/node_modules/vite-plugin-checker/dist/cjs/checkers/vueTsc/typescript-vue-tsc/lib/typescript.js:130960:3)
    at Object.configureServer (/home/hotman/repos/Tester/quasar-project/node_modules/vite-plugin-checker/dist/cjs/checkers/vueTsc/main.js:128:13)
Emitted 'error' event on Worker instance at:
    at [kOnErrorMessage] (node:internal/worker:314:10)
    at [kOnMessage] (node:internal/worker:325:37)
    at MessagePort.<anonymous> (node:internal/worker:225:57)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:786:20)
    at exports.emitMessage (node:internal/per_context/messageport:23:28)

Node.js v18.19.1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[paina-ma]

+1

[TobyMosque]

vuejs/language-tools#4755
temporary fix: pin vue-tsc at the version 2.0.29

[eliatos74]

I was able to run with this solution

vuejs/language-tools#4755 correção temporária: fixar vue-tscna versão2.0.29

[imphunq]

+1

[smn3]

I have the same problem on Windows 10, but not on Ubuntu Linux, even if package.json has same versions of packages used.

[vinoddotcom]

I have the same problem .

[andrija-menuapp]

Same here

[myBoris]

I have the same problem .

[yusufkandemir]

We used the workaround for this 2 days ago in create-quasar. So, new projects should not be affected. If you create a new project and still see the issue, then make sure to include @latest to ensure the latest version is used, e.g. npm init quasar@latest, pnpm create quasar@latest

For the existing projects, please don't upgrade vue-tsc to anything above 2.0.29 while the upstream fixes the issue. Running package manager update commands(e.g. npm update, pnpm update) can also update it under the hood, so don't run such commands or pin vue-tsc to a specific version (e.g. "2.0.29") and not a range (e.g. ^2.0.29).

Unless the upstream issue gets resolved, or something new happens, please don't respond to this issue. This issue is not related to Quasar, there is nothing else we can do, thanks for your understanding.

[Valentim-Gab]

I'm facing the same problem. The funny thing is, I created the project on another computer, and it worked fine, but on both my work and home computers, I'm having issues.

I copied the package.json from that other machine, and it worked, but the versions are all the same—only the order of the dependencies is different. It's been a headache so far!

[Valentim-Gab]

We used the workaround for this 2 days ago in create-quasar. So, new projects should not be affected. If you create a new project and still see the issue, then make sure to include @latest to ensure the latest version is used, e.g. npm init quasar@latest, pnpm create quasar@latest

For the existing projects, please don't upgrade vue-tsc to anything above 2.0.29 while the upstream fixes the issue. Running package manager update commands(e.g. npm update, pnpm update) can also update it under the hood, so don't run such commands or pin vue-tsc to a specific version (e.g. "2.0.29") and not a range (e.g. ^2.0.29).

Unless the upstream issue gets resolved, or something new happens, please don't respond to this issue. This issue is not related to Quasar, there is nothing else we can do, thanks for your understanding.

It worked here!

[gaomingzhao666]

same issue in vue^3.5.3

[yusufkandemir]

@FelixNumworks I think you may have been confused, the issue you've linked is not related to this issue. See #17416 for the relevant issue, we will address that shortly.

[yusufkandemir]

This issue was fixed at https://github.com/fi3ework/vite-plugin-checker/releases/tag/vite-plugin-checker%400.8.0. Everyone should be able to update vite-plugin-checker and unpin vue-tsc now. We will test and unpin vue-tsc in create-quasar soon.

[jonasfroeller]

@yusufkandemir I still get the error with vite-plugin-checker ^0.8.0.

[adamdehaven]

@jonasfroeller nuxt/nuxt#29144 (comment)

[jonasfroeller]

@adamdehaven Thank you for the response, but when I do that I get this, which makes no sense to me:

With that error the website doesn't even show for like 2 minutes and then it shows and reloads again after some js is executed. Some parts work and others do not. This is so weird. I did not update any package that should influence nuxt or vue and I somehow got a few warnings and errors now, that I can not fix.

But it worked for the warning, yeah...

Spent so much time trying to fix this, but in the end I have to give up and disable typescript. I will try to add the plugin manually to vite, to have more control over it. (adding it manually didn't fix it)

[gaomingzhao666]

@jonasfroeller You can try to update nuxt to v3.13.2 and vue-tsc to 2.1.6, that's works for my case.

[jonasfroeller]

@gaomingzhao666 Thank you for the suggestion, but that doesn't fix that weird vue-tsc error. I had to disable ts... That was the only fix.

[adamdehaven]

I had to disable ts

That's not a fix 🤔

[jonasfroeller]

@adamdehaven right, but I can not code without doing that.

[mitsakosgr]

Try setting vite-plugin-checker and vue-tsc to specific version:

"vite-plugin-checker": "0.7.2",
"vue-tsc": "2.0.29",

Also, for my case disabling Hybrid Mode for Vue Extension, is VS Code, helped with weird syntax errors or no intellisense in code.

Go to settings and search for vue.server.hybridMode and set it to false.