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

yusufkandemir · 2022-07-28T09:17:20Z

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.

The text was updated successfully, but these errors were encountered:

Smrtnyk · 2022-08-19T20:55:22Z

any plan for this?

BenceSzalai · 2022-11-02T15:14:24Z

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 · 2022-11-02T15:25:25Z

@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 · 2022-11-23T13:06:38Z

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

luispittagros · 2022-12-08T19:04:18Z

This is huge a requirement for us.

rstoenescu · 2022-12-15T14:50:55Z

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 · 2022-12-16T13:45:51Z

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 · 2023-01-24T16:45:20Z

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

NunoSav · 2023-02-11T15:00:52Z

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 · 2023-03-24T09:45:06Z

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 · 2023-04-08T14:24:39Z

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

gustavotoyota · 2023-04-08T15:45:45Z

Browser debugging works again by using these overrides:

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

george-dragnea · 2023-04-19T12:28:40Z

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 · 2023-04-19T13:33:49Z

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

alancnet · 2023-05-03T18:28:41Z

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

george-dragnea · 2023-05-03T18:54:08Z

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 · 2023-05-04T14:00:38Z

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 · 2023-05-14T11:19:24Z

@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;
  }
}

See quasarframework/quasar#14077 (comment)

* Add .vue extension * Remove ~ prefix to editbox import * Switch to vite * Temporary workaround to use vite 4 See quasarframework/quasar#14077 (comment) * Status service fix access bug * Only import sentry if actually used Add DEV-only ENABLE_DEV_SENTRY if you want to use sentry during dev Defaults to off * Add apparantly missing babel quasar dep * WIP * Use vitest for testing Mostly broken for now, getCurrentInstance() returns null * vitest progress, removed @vue/compat * Fix router and ctx in tests * Fix mobile keyboard detection test * require -> import * More test fixing * Detect locale earlier to remove test warnings * WIP i18n plugin * Fixup more tests * <i18n-t> use global scope * Fix landing pages images for vite importing * Fix vue import * Update test scripts * vue-i18n fiddling Making sure it only uses runtime bundle in build * Initial new cropped photo dialog * New crop component for profile photo editing * Update ci test commands * Fix debounceAndFlushOnUnload w/ quasar debounce * Add mockBackend config, fixup linting errors * More test fixing up * Fix linting errors * Test fiddling * Some quasar conf rejigging for pwa * Better manifest setup * Fixup workbox config and add https serve option * Minor change * Configure coverage options * Ensure sentry is treeshaken * Update picker icon comment * Rename vite.config to vitest.config for clarity As it's only used for vitest * Remove debug logging * Fixup comment merge error * WIP group photo editing * New ChooseImage component to replace ChangePhoto * Unifify group photo and profile photo components * Use new cropper for activity banner image * Remove legacy image editing from conversation compose * Use new image upload for offer images * Add helpful comment * Tweaks now profile picture is block * Farewell vue-croppa! * Only set accept if specified * A little more vue-croppa removal * Remove old test * Fix profile picture on agreement page * Minor sentry importing changes * Add profile photo editing to settings * More outlined form inputs * Support mentions in offer description * Refine profile settings page * 26/9 activity banners instead of 21/9 * Add back in first-splash logo * Modernize and organise eslint config * Linting fixes * Remove jest stuff, and use esbuild targets * Avoid test warning * Remove comments pass size * Small alignment fixes * Fix linting * Set hidden file input style properly * Set body to overflow: auto with attachment gallery

sschneider-ihre-pvs · 2023-09-25T12:07:45Z

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

rstoenescu · 2023-09-25T17:18:13Z

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

razorness · 2023-09-25T17:46:28Z

@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 · 2023-09-26T07:40:57Z

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 · 2023-10-12T08:55:09Z

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 (vitejs/vite#14589)

sschneider-ihre-pvs · 2023-10-16T09:50:44Z

Still broken with the same error.

HibernantBear · 2023-10-18T09:19:46Z

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 · 2023-10-24T13:19:57Z

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 · 2023-12-02T13:38:37Z

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 · 2023-12-11T09:31:34Z

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 · 2023-12-11T13:53:04Z

@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 · 2023-12-12T01:57:43Z

@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:
vitejs/vite#9703

bonis955 · 2023-12-12T07:49:52Z

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

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

jaybo · 2023-12-12T18:24:17Z

@bonis955 Zounds! That mostly works!

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

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

Dev worked fine. Production always resulted in:
Build issues with v3. TypeError: Class extends value undefined is not a constructor or null vitejs/vite#9703
and wouldn't run. Spend 3 days flailing until I happened upon this web page.
Just adding the following to package.json seems to have fixed Production issues.

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

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.
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 · 2023-12-18T15:08:52Z

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.

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

    "overrides": {
        "vite": "^5.0.10",
        "@vitejs/plugin-vue": "^4.5.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
In quasar.config.js, put inside vitePlugins:

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

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 · 2024-01-03T09:37:27Z

Any news about new q/app-vite?

DaleMckeown · 2024-01-05T11:09:16Z

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 · 2024-01-05T11:52:46Z

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 · 2024-01-05T14:19:16Z

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 · 2024-01-05T14:23:00Z

@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 · 2024-01-05T14:28:21Z

@yusufkandemir Thanks for providing additional clarity.

TobyMosque · 2024-01-07T23:14:51Z

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:

TobyMosque/q-v1-v2-diffs@f02e0bb

rstoenescu · 2024-02-08T17:10:30Z

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)

yusufkandemir added kind/feature 💡 area/cli flavour/quasar-cli-vite labels Jul 28, 2022

yusufkandemir self-assigned this Sep 12, 2022

yusufkandemir mentioned this issue Sep 16, 2022

Build [vite:resolve] Missing "./preload-helper" export in "vite" package #14412

Closed

yusufkandemir removed their assignment Nov 2, 2022

yusufkandemir changed the title ~~Vite 3 support for Quasar CLI with Vite~~ Vite 3/4 support for Quasar CLI with Vite Dec 7, 2022

IlCallo mentioned this issue Dec 16, 2022

Vite 3 issue fi3ework/vite-plugin-checker#184

Open

2 tasks

fi3ework mentioned this issue Dec 18, 2022

Stylelint throws error when finding module in CJS because of default export fi3ework/vite-plugin-checker#192

Closed

yusufkandemir mentioned this issue Jan 9, 2023

@quasar/app-vite does not support TS 4.9+ 'satisfies' operator #15242

Closed

nicksellen added a commit to karrot-dev/karrot-frontend that referenced this issue Jun 13, 2023

Temporary workaround to use vite 4

36fe061

See quasarframework/quasar#14077 (comment)

Jizazim mentioned this issue Sep 19, 2023

[Bug]: cannot install Storybook in Vue + Vite (+ Quasar) storybookjs/storybook#23645

Closed

yusufkandemir changed the title ~~Vite 3/4 support for Quasar CLI with Vite~~ Vite 3/4/5 support for Quasar CLI with Vite Sep 26, 2023

yusufkandemir mentioned this issue Sep 29, 2023

Can't use TS decorators with Vite + TS quasar project #16414

Closed

IlCallo mentioned this issue Nov 14, 2023

Type error in configuration after installation quasar ext add @quasar/testing-unit-vitest quasarframework/quasar-testing#350

Closed

renyuneyun mentioned this issue Nov 25, 2023

Build issues with v3. TypeError: Class extends value undefined is not a constructor or null vitejs/vite#9703

Open

7 tasks

IlCallo mentioned this issue Jan 12, 2024

Update Roadmap #16747

Closed

rstoenescu closed this as completed Feb 8, 2024

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

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

Comments

yusufkandemir commented Jul 28, 2022

Smrtnyk commented Aug 19, 2022

BenceSzalai commented Nov 2, 2022

yusufkandemir commented Nov 2, 2022

domvie commented Nov 23, 2022

luispittagros commented Dec 8, 2022 • edited Loading

rstoenescu commented Dec 15, 2022

IlCallo commented Dec 16, 2022

vladcosorg commented Jan 24, 2023

NunoSav commented Feb 11, 2023 • edited Loading

maiolica commented Mar 24, 2023

gustavotoyota commented Apr 8, 2023

gustavotoyota commented Apr 8, 2023

george-dragnea commented Apr 19, 2023

razorness commented Apr 19, 2023

alancnet commented May 3, 2023

george-dragnea commented May 3, 2023

ufhy commented May 4, 2023 • edited Loading

freddy38510 commented May 14, 2023 • edited Loading

sschneider-ihre-pvs commented Sep 25, 2023

rstoenescu commented Sep 25, 2023

razorness commented Sep 25, 2023 • edited Loading

package.json

quasar.config.js

sschneider-ihre-pvs commented Sep 26, 2023 • edited Loading

BenceSzalai commented Oct 12, 2023 • edited Loading

sschneider-ihre-pvs commented Oct 16, 2023

HibernantBear commented Oct 18, 2023

rdonadeu commented Oct 24, 2023

cimpok commented Dec 2, 2023

bonis955 commented Dec 11, 2023

razorness commented Dec 11, 2023 • edited Loading

jaybo commented Dec 12, 2023

bonis955 commented Dec 12, 2023 • edited Loading

jaybo commented Dec 12, 2023 • edited Loading

Bullz3y3 commented Dec 18, 2023

bonis955 commented Jan 3, 2024

DaleMckeown commented Jan 5, 2024

TobyMosque commented Jan 5, 2024 • edited Loading

DaleMckeown commented Jan 5, 2024

yusufkandemir commented Jan 5, 2024

DaleMckeown commented Jan 5, 2024

TobyMosque commented Jan 7, 2024

rstoenescu commented Feb 8, 2024

luispittagros commented Dec 8, 2022 •

edited

Loading

NunoSav commented Feb 11, 2023 •

edited

Loading

ufhy commented May 4, 2023 •

edited

Loading

freddy38510 commented May 14, 2023 •

edited

Loading

razorness commented Sep 25, 2023 •

edited

Loading

`package.json`

`quasar.config.js`

sschneider-ihre-pvs commented Sep 26, 2023 •

edited

Loading

BenceSzalai commented Oct 12, 2023 •

edited

Loading

razorness commented Dec 11, 2023 •

edited

Loading

bonis955 commented Dec 12, 2023 •

edited

Loading

jaybo commented Dec 12, 2023 •

edited

Loading

TobyMosque commented Jan 5, 2024 •

edited

Loading