Node v20.18.0 is incompatible with vue-tsc and causes vue-tsc errors when using @quasar/app-vite@2.4.0

[kftang]

What happened?

Using @quasar/app-vite@2.4.0 with node v20.18.0 causes vue-tsc to emit errors related to the @vitejs/plugin-vue library.

$ npx vue-tsc -p .
node_modules/@vitejs/plugin-vue/dist/index.d.ts:120:94 - error TS1003: Identifier expected.

120 export { Api, Options, ResolvedOptions, type VueQuery, vuePlugin as default, vuePluginCjs as "module.exports", parseVueRequest };
                                                                                                 ~~~~~~~~~~~~~~~~

node_modules/@vitejs/plugin-vue/dist/index.d.ts:120:110 - error TS1005: ';' expected.

120 export { Api, Options, ResolvedOptions, type VueQuery, vuePlugin as default, vuePluginCjs as "module.exports", parseVueRequest };
                                                                                                                 ~

node_modules/@vitejs/plugin-vue/dist/index.d.ts:120:128 - error TS1128: Declaration or statement expected.

120 export { Api, Options, ResolvedOptions, type VueQuery, vuePlugin as default, vuePluginCjs as "module.exports", parseVueRequest };
                                                                                                                                   ~


Found 3 errors in the same file, starting at: node_modules/@vitejs/plugin-vue/dist/index.d.ts:120

even when node_modules/ is excluded and skipLibCheck = true

Upon running npm install, I do see the following warnings:

npm warn EBADENGINE Unsupported engine {
npm warn EBADENGINE   package: '@vitejs/plugin-vue@6.0.1',
npm warn EBADENGINE   required: { node: '^20.19.0 || >=22.12.0' },
npm warn EBADENGINE   current: { node: 'v20.18.0', npm: '10.8.2' }
npm warn EBADENGINE }
npm warn EBADENGINE Unsupported engine {
npm warn EBADENGINE   package: 'vite@7.1.5',
npm warn EBADENGINE   required: { node: '^20.19.0 || >=22.12.0' },
npm warn EBADENGINE   current: { node: 'v20.18.0', npm: '10.8.2' }
npm warn EBADENGINE }

What did you expect to happen?

vue-tsc should not check files within node_modules/

Reproduction URL

https://codesandbox.io/p/devbox/interesting-spence-f98fyy?workspaceId=ws_V7Xv6j1FwQXfmpt47Jcd3C

How to reproduce?

$ npm init quasar@latest
...
✔ What would you like to build? › App with Quasar CLI, let's go!
✔ Project folder: … quasar-project
✔ Pick script type: › Typescript
✔ Pick Quasar App CLI variant: › Quasar App CLI with Vite
✔ Package name: … quasar-project
✔ Project product name: (must start with letter if building mobile apps) … Quasar App
✔ Project description: … A Quasar Project
✔ Pick a Vue component style: › Composition API with <script setup>
✔ Pick your CSS preprocessor: › None (the others will still be available)
✔ Check the features needed for your project: › Linting (vite-plugin-checker + ESLint + vue-tsc)
✔ Add Prettier for code formatting? … no
...

$ cd quasar-project

$ npx vue-tsc -p .
node_modules/@vitejs/plugin-vue/dist/index.d.ts:120:94 - error TS1003: Identifier expected.

120 export { Api, Options, ResolvedOptions, type VueQuery, vuePlugin as default, vuePluginCjs as "module.exports", parseVueRequest };
                                                                                                 ~~~~~~~~~~~~~~~~

node_modules/@vitejs/plugin-vue/dist/index.d.ts:120:110 - error TS1005: ';' expected.

120 export { Api, Options, ResolvedOptions, type VueQuery, vuePlugin as default, vuePluginCjs as "module.exports", parseVueRequest };
                                                                                                                 ~

node_modules/@vitejs/plugin-vue/dist/index.d.ts:120:128 - error TS1128: Declaration or statement expected.

120 export { Api, Options, ResolvedOptions, type VueQuery, vuePlugin as default, vuePluginCjs as "module.exports", parseVueRequest };
                                                                                                                                   ~


Found 3 errors in the same file, starting at: node_modules/@vitejs/plugin-vue/dist/index.d.ts:120

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

Relevant log output

Additional context

No response

[github-actions]

Hi @kftang! 👋

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

[pablofuentes88]

Same here, I tried different approaches and got the same result:

• Windows: doesn’t work
• Linux: doesn’t work
• npm: doesn’t work
• Bun 1.2.21: doesn’t work
• Node 20+: doesn’t work
• Node 22+: doesn’t work
• skipLibCheck: true: doesn’t work
• Updating all dependencies and devDependencies: doesn’t work
• Editing node_modules/@quasar/app-vite/node_modules/@vitejs/plugin-vue/dist/index.d.ts line 120 with

export { Api, Options, ResolvedOptions, type VueQuery, vuePlugin as default, parseVueRequest }; → works

Another issue: Hot Reload doesn’t work in any situation.

[FragsterAt]

npm install says that you need to update at least to node version 20.19

[tenwa]

Seeing the same error, having upgraded to the latest vitejs. I am running node 22.19.0, used the line

export { Api, Options, ResolvedOptions, type VueQuery, vuePlugin as default, parseVueRequest }; → works

From above, and seems to have stops the error showing, not sure if it's a good fix.

[pablofuentes88]

Seeing the same error, having upgraded to the latest vitejs. I am running node 22.19.0, used the line

export { Api, Options, ResolvedOptions, type VueQuery, vuePlugin as default, parseVueRequest }; → works

From above, and seems to have stops the error showing, not sure if it's a good fix.

It’s not a definitive solution, just a temporary patch. Once the library is updated, the change you made will be overwritten, and if the update doesn’t fix the issue, the error will reappear.

[JunHaoShih]

Same issue here. Currently I solve it by upgrading typescript to 5.6.2 which is not good.

[Evanna456]

@JunHaoShih upgrading to typescript 5.6.2 fixed my issue but my antivirus is still flagging the console with IDP.HELU.PSE48 infection which I hope is false positive. My older projects doesn't have this issue.

[rstoenescu]

Please upgrade:

1. To the minimum requested Node version.
2. Latest "typescript" package (5.9.2 as of writing these lines)