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

[vladcosorg]

or "overrides": { "vite": "^4.0.0", "@vitejs/plugin-vue": "^4.0.0" } for npm 9

[NunoSav]

I've applied:

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

and switched vue-i18n to @intlify/unplugin-vue-i18n.

Now i get:

node_modules/@quasar/app-vite/lib/config-tools.js:70
    acc.push((plugin.default || plugin)(opts))
                                       ^

TypeError: (plugin.default || plugin) is not a function

Edit: Solved by using the following config:

vitePlugins: [
        [
          require('@intlify/unplugin-vue-i18n').default,
          {
            // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
            // compositionOnly: false,

            // you need to set i18n resource including paths !
            include: path.resolve(__dirname, './src/i18n/**'),
          },
        ],
      ],

[maiolica]

Can confirm that the above workarounds are perfectly working. I was still having page reload issues, have solved them by removing a circular dependency (found via madge) and enabling the debugger in Vite through extendViteConf:

    extendViteConf(viteConf) {
      viteConf.logLevel = 'info';
    },

The dependencies that were reported to cause a reload were then added to optimizeDeps.include:

    extendViteConf(viteConf) {
      viteConf.logLevel = 'info';

      viteConf.optimizeDeps.include = [
        '@quasar/quasar-ui-qmarkdown',
        'chart.js',
      ];
    },

Hope this can help others.

[gustavotoyota]

Browser debugging stopped working in VSCode after applying the vite overrides.

[gustavotoyota]

Browser debugging works again by using these overrides:

  "overrides": {
    "vite": "^3.0.0",
    "@vitejs/plugin-vue": "^3.0.0"
  }

[george-dragnea]

Hi,

I have added:

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

Replace @intlify/vite-plugin-vue-i18n with @intlify/unplugin-vue-i18n, and also the necessary replace in quasar.conf.js.

But I get the following errors: polyfillModulePreload is deprecated. Use modulePreload.polyfill instead. I have try to add modulePreload: { polyfill: false },, but without luck.

Also I get the following error: Setting server.middlewareMode to 'ssr' is deprecated, set server.middlewareMode to true and appType to 'custom' instead

The webpage is white, and the title in tab is <%= productName %>.

Has someone make it to work in ssr mode, or there is a release date when the update will be available?

Thanks.

[razorness]

@george-dragnea The first notice (polyfillModulePreload is deprecated. Use modulePreload.polyfill instead.) can be ignored.

[alancnet]

@george-dragnea I am also getting <%= productName %>. Attempting to figure it out now. Any info on this?

[george-dragnea]

I am sorry @alancnet but I haven't found any solution. When I will have some free time I will investigate further, and if I will find any solution I will write on this thread.

[ufhy]

temporary solved ssr in dev mode

extendViteConf (viteConf) {
    delete viteConf.build.polyfillModulePreload

    if (ctx.mode.ssr) {
        viteConf.appType = 'custom'
        viteConf.server.middlewareMode = true
    }
}

any suggestion how to run in dist folder?

$ quasar build -m ssr
$ cd .\dist\ssr\
$ npm run start

then i've got error like this

> quasar-ssr@0.0.1 start
> node index.js

node:internal/modules/cjs/loader:998
  throw err;
  ^

Error: Cannot find module './server/server-entry.js'
Require stack:
- E:\SourceCode\template\quasar-ssr\dist\ssr\index.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
    at Module._load (node:internal/modules/cjs/loader:841:27)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (E:\SourceCode\template\quasar-ssr\dist\ssr\index.js:1:1269)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ 'E:\\SourceCode\\template\\quasar-ssr\\dist\\ssr\\index.js' ]
}

[freddy38510]

@ufhy could you try this ?

extendViteConf (cfg, { isServer ) {
  // module preload
  delete cfg.build.polyfillModulePreload; // deprecated
  cfg.build.modulePreload = { polyfill: true };

  // devserver
  cfg.appType = 'custom';
  cfg.server.middlewareMode = true;

  // only for server config
  if (isServer) {
    // let Vite generate a CJS bundle
    cfg.ssr.format = 'cjs';

    // use the same externalization heuristics of Vite v2
    if (!cfg.legacy) { cfg.legacy = {}; }
    cfg.legacy.buildSsrCjsExternalHeuristics = true;
  }
}

[BenceSzalai]

FYI: I've just tried Vite v5.0.0-beta.0 with Quasar and apparently it works fine (with the same tweaks that worked for Vite v4). This may change by the time Vite v5 reaches Release, but right now they seem to be compatible.

[rstoenescu]

A quick update. The new q/app-vite will come with Vite 5. It's currently on the final stages of testing before doing a public release, along with the new (and completely rewritten) q/app-webpack.

[sschneider-ihre-pvs]

still doesn't work on windows not mit v5 nor with any of the other suggestions.

[rstoenescu]

By the "new q/app-vite" I mean the next major version, not the current q/app-vite v1.x.y

[razorness]

@sschneider-ihre-pvs I have it running with Vite 3/4 since ages. It also runs on Windows. With TypeScript, Yarn v3, Vite Plugins and custom path aliases. SPA, PWA and Capacitor modes.

$ quasar info

Operating System - Windows_NT(10.0.22621) - win32/x64
NodeJs - 18.17.1

Global packages
  NPM - 10.0.0
  yarn - 3.6.3
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.12.6 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.5.1 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.6 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.3.4 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.2.4
  pinia - 2.1.6 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 4.4.9 -- Native-ESM powered web dev build tool

Quasar App Extensions
  @quasar/quasar-app-extension-qoverlay - 2.0.1 -- A Quasar App Extension
  @quasar/quasar-app-extension-qcalendar - 4.0.0-beta.16 -- A Quasar App Extension for @quasar/quasar-ui-qcalendar

Networking
  Host - ...
  Ethernet - ...
  vEthernet (Default Switch) - 172.31.208.1
  vEthernet (WSL) - 172.18.48.1

package.json

{
    "private": true,
    "scripts": {
        "dev": "cross-env NODE_ENV=development quasar dev",
        "build": "cross-env NODE_ENV=production quasar build -m pwa"
    },
    "dependencies": {
        "quasar": "^2.12.6",
        "vue": "^3.3.4",
        "vue-i18n": "^9.4.0"
    },
    "devDependencies": {
        "@intlify/unplugin-vue-i18n": "^1.2.0",
        "@quasar/app-vite": "^1.5.1",
        "@vitejs/plugin-vue": "^4.3.4",
        "cross-env": "^7.0.3",
        "typescript": "^5.2.2",
        "vite": "^4.4.9"
    },
    "resolutions": {
        "@vitejs/plugin-vue": "^4.3.4",
        "typescript": "^5.2.2",
        "vite": "^4.4.9",
        "vue": "^3.3.4"
    }
}

quasar.config.js

const { configure } = require('quasar/wrappers'),
    path          = require('path');

module.exports = configure(function (ctx) {
  return {

    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
    build: {
      extendViteConf(viteConf) {

        // AFAIR: fixes some package referencing in SCSS
        const alias = [ { find: /^~.+/, replacement: (val) => val.replace(/^~/, '') } ];
        // append existing aliases and move from object to array style
        for (let search in viteConf.resolve.alias) {
          alias.push({
            find       : search,
            replacement: viteConf.resolve.alias[ search ]
          });
        }

        // example for custom aliases
        viteConf.resolve.alias = [
          ...alias,
          { find: 'lib', replacement: path.resolve(__dirname, 'src/lib') },
          { find: 'composable', replacement: path.resolve(__dirname, 'src/composable') },
          { find: 'service', replacement: path.resolve(__dirname, 'src/service') },
        ];
        // clear out dir before build
        viteConf.build.emptyOutDir = true;

      },

      vitePlugins: [
        // get use of @intlify/unplugin-vue-i18n
        [ require('@intlify/unplugin-vue-i18n').default, {
          include: path.resolve(__dirname, './src/i18n/**')
        } ]
      ]
    },
  };
});

[sschneider-ihre-pvs]

for me it does not work

<PATH>help-content.vue (3:7) Error when using sourcemap for reporting an error: Can't resolve original location of error.
✓ 1930 modules transformed.
✓ built in 1m 14s
"default" is not exported by "<PATH>help-content.vue?vue&type=styles&index=0&lang.sass", imported by "<PATH>help-content.vue".
file: <PATH>help-content.vue:3:7
1: import _sfc_main from "<PATH>help-c...
2: export * from "<PATH>help-content.v...
3: import block0 from "<PATH>help-cont...
          ^
4: if (typeof block0 === "function")
5:   block0(_sfc_main);
file:///<PATH>node_modules/rollup/dist/es/shared/node-entry.js:2287
        base = Object.assign(new Error(base.message), base);
                             ^
Error [RollupError]: "default" is not exported by "<PATH>help-content.vue?vue&type=styles&index=0&lang.sass", imported by "<PATH>help-content.vue".
    at error (file:///<PATH>node_modules/rollup/dist/es/shared/node-entry.js:2287:30)

Operating System - Windows_NT(10.0.19045) - win32/x64
NodeJs - 18.14.0

Global packages
  NPM - 9.6.7
  yarn - 1.22.4

Important local packages
  quasar - 2.12.4 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.0.0-alpha.34 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.5 -- Quasar Framework fonts, icons and animations
  vue - 3.3.4 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.2.4
  vite - 5.0.0-beta.2 -- Native-ESM powered web dev build tool
  esbuild - 0.18.20 -- An extremely fast JavaScript and CSS bundler and minifier.
  eslint - 8.46.0 -- An AST-based pattern checker for JavaScript.
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks

Quasar App Extensions
  @quasar/quasar-app-extension-apollo - 2.0.0-beta.5 -- A Quasar app extension to add GraphQL support using Apollo Client.

[BenceSzalai]

FYI: Build is broken in Vite v5.0.0-beta.5 and v5.0.0-beta.6 due to a HTML line-break issue. It is supposed to become fixed in the next beta. If anyone is using Vite 5 right now pin the version to v5.0.0-beta.4 or earlier.

UPDATE: Fixed in 5.0.0-beta.7 (https://github.com/vitejs/vite/pull/14589)

[sschneider-ihre-pvs]

Still broken with the same error.

[HibernantBear]

I've applied:

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

and switched vue-i18n to @intlify/unplugin-vue-i18n.

Now i get:

node_modules/@quasar/app-vite/lib/config-tools.js:70
    acc.push((plugin.default || plugin)(opts))
                                       ^

TypeError: (plugin.default || plugin) is not a function

Edit: Solved by using the following config:

vitePlugins: [
        [
          require('@intlify/unplugin-vue-i18n').default,
          {
            // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
            // compositionOnly: false,

            // you need to set i18n resource including paths !
            include: path.resolve(__dirname, './src/i18n/**'),
          },
        ],
      ],

this solved my i18n upgrade problem, thanks

[rdonadeu]

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

Worked for me, "quasar build" works fine, but now I have another problem.

In my company, we have multiple quasar projects working with nginx in different docker containers. 5 days ago I fixed the preload helper, and yesterday when I build the containers with all the changes, nginx didn't work with a particular project. The other quasar containers were working correctly, after a lot of hours looking for the problem, thinking it was because of nginx. We found out that quasar didn't generate the SSL certificates, so nginx couldn't handshake.

2023/10/23 12:14:14 [error] 29#29: *1 SSL_do_handshake() failed (SSL: error:0A000410:SSL routines::sslv3 alert handshake failure:SSL alert number 40) while SSL handshaking to upstream, client: 192.168.65.1, server: suppliers-portal-local.******.com, request: "GET / HTTP/2.0", upstream: "[https://172.22.0.6:443/"](https://172.22.0.6/%22), host: "suppliers-portal-local.*******.com" 192.168.65.1 - - [23/Oct/2023:12:14:14 +0000] "GET / HTTP/2.0" 502 559 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36" "-"

After reverting commits I found out that adding the "resolutions" option in package options is what makes quasar to not work, also it don't throw any error, looks like it's working but probably isn't, I don't know how to check it. As it shows an 502 error.

I'm not asking for a solution, as I can't provide my code for reviewing. But just wanted to post this in case someone faces the same issue. I will look for another solution.

[cimpok]

Vite 5 has been released on Nov.16. Any news on Quasar CLI + Vite 5 integration ? Is it coming? Or can/should we setup it up ourselves?

[bonis955]

I tried to install vite 5 on quasar but i have this warning

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details. plugin 'quasar:index-html-transform' uses deprecated 'enforce' option. Use 'order' option instead. plugin 'quasar:index-html-transform' uses deprecated 'transform' option. Use 'handler' option instead.

Does anyone know how to solve it?

[razorness]

@bonis955 These warnings are thrown because Quasar uses deprated APIs. You can ingore them. A future release of @quasar/app-vite will fix these warnings.

[jaybo]

@bonis955 Can you briefly detail the steps required to use Vite 5? I naively tried updating vite and @vitejs/plugin-vue to the latest versions without success.

I believe I'm facing this bug, and don't know the best means to fix it: https://github.com/vitejs/vite/issues/9703

[bonis955]

@jaybo i put this code in my package.json and it works

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

[jaybo]

@bonis955 Zounds! That mostly works!

1. SPA/PWA Typescript project was created afresh maybe 1 month ago with Cli/Vite, then large existing webpack project migrated in.

2. Environment:

   » Pkg quasar............. v2.14.1
   » Pkg @quasar/app-vite... v1.7.1
   » Browser target......... es2019|edge88|firefox78|chrome87|safari13.1

3. Dev worked fine. Production always resulted in:
   https://github.com/vitejs/vite/issues/9703 and wouldn't run. Spend 3 days flailing until I happened upon this web page.

4. Just adding the following to package.json seems to have fixed Production issues.

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

5. But now Dev is broken! Running quasar dev -m spa --debug results in ERR_SSL_VERSION_OR_CIPHER_MISMATCH between VSCode and Chrome and I can no longer debug.

6. So my current strategy is to remove resolutions for Dev and add it back for Production, blowing away and then reinstalling node_modules for each cycle.

[Bullz3y3]

I'm posting this for anyone who wants to use <i18n> block in Vue components in Quasar. Not the <i18n-t> components, but custom block for locales like <i18n>...json...</i18n> or <i18n src="locales.json"></i18n>. Without updating vite, it just gives: 'At least one <template> or <script> is required in a single file component.' error. So to fix it.

1. Update Vite in @quasar/app-vite. In package.json:

     "overrides": {
         "vite": "^5.0.10",
         "@vitejs/plugin-vue": "^4.5.2"
     }

2. Remove deprecated @intlify/vite-plugin-vue-i18n that ships with Quasar: npm uninstall @intlify/vite-plugin-vue-i18n, and install the latest: npm i @intlify/unplugin-vue-i18n
3. In quasar.config.js, put inside vitePlugins:

   vitePlugins: [
     ['@intlify/unplugin-vue-i18n/vite', {
         include: path.resolve(__dirname, './src/i18n/**')
     }]
   ]

4. If you want to remove deprecated notice for: polyfillModulePreload. In quasar.config.js

   extendViteConf (viteConf) {
     delete viteConf.build.polyfillModulePreload;
     //to disable module preload: viteConf.build.modulePreload = false
   },

[bonis955]

Any news about new q/app-vite?

[DaleMckeown]

I just tried updating to Vite 5 (using the workaround above).

It seems to work, but throws some deprecation notices:

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
polyfillModulePreload is deprecated. Use modulePreload.polyfill instead.
plugin 'quasar:index-html-transform' uses deprecated 'enforce' option. Use 'order' option instead.
plugin 'quasar:index-html-transform' uses deprecated 'transform' option. Use 'handler' option instead.
plugin 'quasar:pwa-resources' uses deprecated 'transform' option. Use 'handler' option instead.

[TobyMosque]

Instead of a workaround, maybe would be better to create a new project using the beta version... the process isn't that straight, but isn't that hard...

clone the quasar repo

git clone https://github.com/quasarframework/quasar.git

uncomment beta choices on path/to/quasar/repo/create-quasar/templates/app/quasar-v2/index.js https://github.com/quasarframework/quasar/blob/dev/create-quasar/templates/app/quasar-v2/index.js

so, do a node path/to/quasar/repo/create-quasar

of course, there is the risk of be using a early/beta version, but IMHO that is better than a workaround.

[DaleMckeown]

So are we expected to create new projects and migrate our code in every time we want to upgrade the package? Seems like a lot of overhead for large projects. Ideally, we'd just update the package versions and be done with it.

[yusufkandemir]

@DaleMckeown, dear @TobyMosque just provided yet another workaround for the time being. It might not work for everyone. When the major version gets documented and released publicly, you will not have to create a new project and migrate over your code. But, it will have to be more than just upgrading the packages for migrating over to a major version for sure.

[DaleMckeown]

@yusufkandemir Thanks for providing additional clarity.

[TobyMosque]

maybe that can help u guys to upgrade u current project to use the beta app... here the diffs between a project created using the current cli and one created using the beta one:

https://github.com/TobyMosque/q-v1-v2-diffs/commit/f02e0bb5f5a8fc16c2ead92b550bef1d888befed

[rstoenescu]

Vite 5 (among a TON of other new features and improvements) is now available through q/app-vite v2.0.0-beta.1

Must read (all):

• Release notes
• Forum announcement
• Docs page (if you get 404, wait for the docs PWA to update for you)