Vite 3/4/5 support for Quasar CLI with Vite

[yusufkandemir]

We already support Vite 3 for @quasar/vite-plugin starting from v3.1.0. We should support it in @quasar/app-vite too, preferably without user-facing breaking changes, just like we did in the Vite plugin.

https://vitejs.dev/guide/migration.html

We already weren't supporting Node 12, so that isn't a breaking change for us. I am not sure about the effect of the other changes, ATM.

[Smrtnyk]

any plan for this?

[BenceSzalai]

I've made a clone of the quasar repo and changed the dependencies of app-vite to Vite 3 in https://github.com/quasarframework/quasar/blob/dev/app-vite/package.json#L56 and https://github.com/quasarframework/quasar/blob/dev/app-vite/package.json#L82:

{
...
  "dependencies": {
...
    "@vitejs/plugin-vue": "^3.1.0",
...
    "vite": "^3.2.2",
...
}

This way it uses Vite version 3.

I'm only using SPA mode, however both dev and build works fine.

There's a warning: polyfillModulePreload is deprecated. Use modulePreload.polyfill instead. but that can be fixed by replacing https://github.com/quasarframework/quasar/blob/dev/app-vite/lib/quasar-config-file.js#L420 with:

      modulePreload: { polyfill: false },

(I also had to update "vue-i18n": "^9.1.9", to "vue-i18n": "^9.2.2", and "@intlify/vite-plugin-vue-i18n": "^3.4.0", to "@intlify/vite-plugin-vue-i18n": "^6.0.3", in my main project, but this is not tightly related to app-vite.)

I'd assume there are more problems in SSR and other modes, but for SPA it seems to be pretty compatible.

Are there significant known issues that prevent Vite 3 support from being added? Is there anything the community can do to make this happen? PR for the above maybe as a starting point?

[yusufkandemir]

@BenceSzalai I worked a bit on this before, and those changes were enough to get a SPA project working as you said. Other modes could be more problematic as you said, didn't test them in depth myself. vue-i18n stuff is kind of tightly related, but it's only related to create-quasar(yarn create quasar). @rstoenescu said to me to not work on this yet, I don't know any specific reason. There are probably some breaking changes we plan to make during the upgrade.
Thanks for confirming these changes were enough to get a non-starter project running, and sharing it with us. Let's wait for more to see what happens.

[domvie]

Is there any news on this or perhaps an ETA on when we can expect vite 3 support for @quasar/app-vite?

[luispittagros]

This is huge a requirement for us.

[rstoenescu]

There is a temporary workaround (until the Quasar CLI gets released with Vite 4):
Add the following to your /package.json (and use Yarn v1):

"resolutions": {
    "vite": "^4.0.0",
    "@vitejs/plugin-vue": "^4.0.0"
  }

Trying to release the new q/app CLI with Vite 4 in January/February -- upgrading Vite is easy, but I also want to add a big new feature which will require a lot of dev time. And also, I want to reduce the number of major versions for the CLI to be released because backporting fixes is a potential huge pain. So grouping multiple new stuff in a single batch. Should the other feature take too long to implement, expect q/app with Vite 4 in January.

[IlCallo]

Adding up on the temporary workaround, note that if you're using vue-i18n you'll need to remove @intlify/vite-plugin-vue-i18n and replace it with @intlify/unplugin-vue-i18n to have Vite 4 support