Vite 3 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

> [email protected] 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?