New major versions of q/app-vite and q/app-webpack - in BETA #16877
Replies: 18 comments 19 replies
-
|
I have been waiting for this. I just created new project and trying it out. |
Beta Was this translation helpful? Give feedback.
-
|
@rstoenescu Just to feed back - just upgraded our app to Vite 5 & q/app-vite 2 following the upgrade instructions - no issues so far, it seems to work like a charm! Great work by all involved. |
Beta Was this translation helpful? Give feedback.
-
|
Upgraded a SPA and it worked well. I have 2 questions:
|
Beta Was this translation helpful? Give feedback.
-
|
with the latest release of |
Beta Was this translation helpful? Give feedback.
-
|
Will check it out, but the ticket on vite-plugin-checker is still opened with no commit pushed to fix it! 
|
Beta Was this translation helpful? Give feedback.
-
|
I tried v2 and it's not fixed |
Beta Was this translation helpful? Give feedback.
-
|
ok. I was only testing in a local dev env |
Beta Was this translation helpful? Give feedback.
-
|
fi3ework/vite-plugin-checker#306 is now resolved. They support vue-tsc 2.x now (as mentioned in the release notes) @rstoenescu |
Beta Was this translation helpful? Give feedback.
-
|
@rstoenescu Yet any plans when |
Beta Was this translation helpful? Give feedback.
-
|
They are pretty close to the final versions. We want more people to switch to the betas first to report any potential problems. If something is found after we've released the stable versions and the potential fix requires a breaking change that would really ruin everything. So please help us test them! |
Beta Was this translation helpful? Give feedback.
-
|
Please consider a feature that allows the orientation of Quasar's built-in components to be switched from left-to-right (LTR) to right-to-left (RTL) to better serve developers working in RTL languages as their default direction |
Beta Was this translation helpful? Give feedback.
-
|
@mohamad68 we already have RTL support: Screenshots
If you meant something else, please explain it with clearer wording. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for your response. What I meant was that By adding rtlcss to the PostCSS configuration and specifying lang:"fa-ir" in the Quasar configuration, and setting dir=rtl in the HTML tag, PostCSS will convert everything from left to right automatically. This means that if you write margin-right, it will be changed to margin-left. However, this is not the desired outcome I am looking for. |
Beta Was this translation helpful? Give feedback.
-
|
I updated two smaller projects to the beta and except for an incompatible app-extension everything worked fine. Still needs some testing but looks really promising so far. |
Beta Was this translation helpful? Give feedback.
-
|
On testing the beta "@quasar/app-vite": "2.0.0-beta.6", it seems that "unplugin-auto-import": "^0.17.5" vite plugin is causing an issue that looks as if it is interfering with quasar adding environment variables. This worked in latest production @quasar/app-vite & I'm not sure if it is a quasar or unplugin-auto-import issue, though leaning toward it being a quasar issue since it works in version 1.8.1... quasar.config.ts/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-env node */
// Configuration for your app
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js
import { configure } from 'quasar/wrappers';
import { fileURLToPath } from 'node:url';
import { apps } from 'open';
import {
QuasarResolver,
VueUseComponentsResolver,
VueUseDirectiveResolver,
} from 'unplugin-vue-components/resolvers';
import TurboConsole from 'unplugin-turbo-console/vite';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
// import 'dotenv/config';
import { config } from 'dotenv';
config({ override: true });
export default configure((ctx) => {
return {
// https://v2.quasar.dev/quasar-cli-vite/prefetch-feature
// preFetch: true,
// app boot file (/src/boot)
// --> boot files are part of "main.js"
// https://v2.quasar.dev/quasar-cli-vite/boot-files
boot: [
'i18n',
'axios',
'vueLogger',
// 'globalComponents',
'formkit',
'lodash',
'vueDOMPurifyHTML',
// 'piniaRoutes',
// 'firebase',
'appReg',
],
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
css: ['app.scss', 'tw-app.css'],
// https://github.com/quasarframework/quasar/tree/dev/extras
extras: [
// 'ionicons-v4',
// 'mdi-v7',
// 'fontawesome-v6',
// 'eva-icons',
// 'themify',
// 'line-awesome',
// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
'roboto-font', // optional, you are not bound to it
'material-icons', // optional, you are not bound to it
],
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
build: {
target: {
browser: ['es2022', 'firefox115', 'chrome115', 'safari14'],
node: 'node20',
},
vueRouterMode: 'history', // available values: 'hash', 'history'
// vueRouterBase,
// vueDevtools,
// vueOptionsAPI: false,
// rebuildCache: true, // rebuilds Vite/linter/etc cache on startup
// publicPath: '/',
// analyze: true,
// env: {},
env: {
DIRECTUS_URL: process.env.DIRECTUS_URL,
DIRECTUS_SERVER_TOKEN: process.env.DIRECTUS_SERVER_TOKEN,
STRIPE_SECRET_KEY: process.env.STRIPE_SECRET_KEY,
STRIPE_PUBLISHABLE_KEY: process.env.STRIPE_PUBLISHABLE_KEY,
STRIPE_WEBHOOK_SECRET: process.env.STRIPE_WEBHOOK_SECRET,
},
// rawDefine: {}
// ignorePublicFolder: true,
// minify: false,
// polyfillModulePreload: true,
// distDir
// extendViteConf (viteConf) {},
// viteVuePluginOptions: {},
vitePlugins: [
TurboConsole({}) as any,
AutoImport({
// targets to transform
include: [
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
/\.vue$/,
/\.vue\?vue/, // .vue
/\.md$/, // .md
],
// global imports to register
imports: [
// presets
'vue',
'vue-router',
'pinia',
'quasar',
'vue-i18n',
'@vueuse/core',
// custom
{
/* quasar: [
// https://quasar.dev/vue-composables
'useQuasar',
'useDialogPluginComponent',
'useFormChild',
'useMeta',
'QBtn',
], */
/* '@vueuse/core': [
// named imports
'useFetch',
// 'vOnClickOutside', // import { useMouse } from '@vueuse/core',
// alias
// ['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
], */
'vue-i18n': [
// named imports
'createI18n', // import { useMouse } from '@vueuse/core',
// 'preFetch',
// alias
//['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
],
'quasar/wrappers': [
// named imports
'boot', // import { useMouse } from '@vueuse/core',
'preFetch',
// alias
//['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
],
lodash: [
// named imports
['default', '_'], // import { useMouse } from '@vueuse/core',
// alias
//['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
],
'lorem-ipsum': [
// named imports
'LoremIpsum',
],
'vue-logger-plugin': [
// named imports
'createLogger', // import { useMouse } from '@vueuse/core',
'StringifyAndParseObjectsHook',
// alias
//['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
],
'@formkit/inputs': [
// named imports
'outer',
'inner',
'wrapper',
'label',
'help',
'messages',
'message',
'icon',
'prefix',
'suffix',
'textInput',
'textareaInput',
'initialValue',
'$attrs',
// alias
//['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
],
'@formkit/vue': [
// named imports
'plugin',
'defaultConfig',
// alias
//['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
],
'@formkit/addons': [
// named imports
'createAutoAnimatePlugin',
// alias
//['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
],
axios: [['default', 'axios']],
'vue-dompurify-html': [
// default imports
['default', 'VueDOMPurifyHTML'], // import { default as axios } from 'axios',
],
quasar: [
// default imports
'Loading',
// ['default', 'VueDOMPurifyHTML'], // import { default as axios } from 'axios',
],
'@directus/sdk': [
'createDirectus',
'rest',
'realtime',
'graphql',
// Comment
'createComment',
'updateComment',
'deleteComment',
'createField',
'deleteField',
'readActivities',
'readActivity',
'readCollection',
'readCollections',
'createCollection',
'updateCollection',
'deleteCollection',
'readField',
'readFieldsByCollection',
'readFields',
'updateField',
'aggregate',
// Users
'createUser',
'createUsers',
'readUser',
'readUsers',
'updateUser',
'updateUsers',
'deleteUser',
'deleteUsers',
// Auth
'withToken',
'authentication',
// We're not autoimporting these because we're using the authentication composable
// 'login',
// 'logout',
'passwordReset',
'resetPassword',
'readProviders',
// Current User
'readMe',
'updateMe',
// Items
'createItem',
'createItems',
'readItem',
'readItems',
'updateItem',
'updateItems',
'deleteItem',
'deleteItems',
'readSingleton',
'updateSingleton',
// Files
'importFile',
'uploadFiles',
'readFile',
'readFiles',
'updateFile',
'updateFiles',
'deleteFile',
'deleteFiles',
// Folders
'readFolder',
'readFolders',
'updateFolder',
'updateFolders',
// Utils
],
/* 'firebase/app': [['initializeApp', 'fireBaseInitializeApp']],
'firebase/auth': [['getAuth', 'firebaseGetAuth']],
'firebase/analytics': [['getAnalytics', 'fireBaseGetAnalytics']],
'firebase/database': [
['getDatabase', 'fireBaseGetDatabase'],
['ref', 'fireBaseRef'],
['onValue', 'fireBaseOnValue'],
['push', 'fireBasePush'],
['remove', 'fireBaseRemove'],
['set', 'fireBaseSet'],
['get', 'fireBaseGet'],
['child', 'fireBaseChild'],
], */
// 'memfs/lib/fsa-to-node': ['FsaNodeFs', 'FsaNodeSyncAdapterWorker'],
/* 'memfs/lib/fsa-to-node/worker/FsaNodeSyncWorker': [
'FsaNodeSyncWorker',
], */
buffer: ['Buffer'],
process: [['*', 'process']],
'mount-vue-component': [['mount', 'createComponentInstance']],
// '[package-name]': [
// '[import-names]',
// // alias
// ['[from]', '[alias]'],
// ],
},
{
quasar: [
// https://quasar.dev
'QBtn',
],
},
// example type import
{
from: 'mount-vue-component',
imports: [
['vNode', 'componentVNode'],
['el', 'componentEL'],
['destroy', 'componentDestroy'],
],
type: true,
},
/* {
from: 'memfs/fsa/types',
imports: [['*', 'fsa']],
type: true,
}, */
{
from: 'axios',
imports: ['AxiosInstance'],
type: true,
},
{
from: '@formkit/core',
imports: ['FormKitTypeDefinition'],
type: true,
},
{
from: 'vue-router',
imports: ['RouteRecordRaw'],
type: true,
},
{
from: 'vue',
imports: ['App'],
type: true,
},
{
from: 'pinia',
imports: ['StoreDefinition'],
type: true,
},
{
from: '@directus/sdk',
imports: [
'DirectusClient',
'AuthenticationClient',
'RestClient',
'AuthenticationStorage',
'AuthenticationData',
],
type: true,
},
],
// Enable auto import by filename for default module exports under directories
defaultExportByFilename: false,
// Auto import for module exports under directories
// by default it only scan one level of modules under the directory
dirs: [
'./src/stores/**',
'./src/boot/**',
// './src/components/formkitInputs/**',
// './hooks',
// './composables' // only root modules
// './composables/**', // all nested modules
// ...
],
// Filepath to generate corresponding .d.ts file.
// Defaults to './auto-imports.d.ts' when `typescript` is installed locally.
// Set `false` to disable.
// dts: './auto-imports.d.ts',
dts: './auto-imports.d.ts',
// Auto import inside Vue template
// see https://github.com/unjs/unimport/pull/15 and https://github.com/unjs/unimport/pull/72
vueTemplate: false,
// Custom resolvers, compatible with `unplugin-vue-components`
// see https://github.com/antfu/unplugin-auto-import/pull/23/
resolvers: [
/* ... */
],
// Inject the imports at the end of other imports
injectAtEnd: true,
// Generate corresponding .eslintrc-auto-import.json file.
// eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
eslintrc: {
enabled: false, // Default `false`
filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
},
}),
Components({
// relative paths to the directory to search for components.
// dirs: ['src/components'],
// valid file extensions for components.
// extensions: ['vue'],
// Glob patterns to match file names to be detected as components.
// When specified, the `dirs` and `extensions` options will be ignored.
globs: ['src/components/**/*.vue', 'src/~Global/**/*.vue'],
// search for subdirectories
deep: true,
// resolvers for custom components
resolvers: [
QuasarResolver(),
VueUseComponentsResolver(),
VueUseDirectiveResolver(),
],
// generate `components.d.ts` global declarations,
// also accepts a path for custom filename
// default: `true` if package typescript is installed
dts: './components.d.ts',
// dts: true,
// Allow subdirectories as namespace prefix for components.
directoryAsNamespace: false,
// Collapse same prefixes (camel-sensitive) of folders and components
// to prevent duplication inside namespaced component name.
// works when `directoryAsNamespace: true`
collapseSamePrefixes: false,
// Subdirectory paths for ignoring namespace prefixes.
// works when `directoryAsNamespace: true`
globalNamespaces: [],
// auto import for directives
// default: `true` for Vue 3, `false` for Vue 2
// Babel is needed to do the transformation for Vue 2, it's disabled by default for performance concerns.
// To install Babel, run: `npm install -D @babel/parser`
directives: true,
// Transform path before resolving
importPathTransform: (v) => v,
// Allow for components to override other components with the same name
allowOverrides: false,
// filters for transforming targets
include: [/\.vue$/, /\.vue\?vue/],
exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/],
// Vue version of project. It will detect automatically if not specified.
// Acceptable value: 2 | 2.7 | 3
version: 3,
// Only provide types of components in library (registered globally)
types: [
// {
// from: '@formkit/core',
// names: ['FormKitTypeDefinition'],
// },
],
}),
[
'@intlify/unplugin-vue-i18n/vite',
{
// if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
// compositionOnly: false,
// if you want to use named tokens in your Vue I18n messages, such as 'Hello {name}',
// you need to set `runtimeOnly: false`
// runtimeOnly: false,
ssr: ctx.modeName === 'ssr',
// you need to set i18n resource including paths !
include: [fileURLToPath(new URL('./src/i18n', import.meta.url))],
},
],
[
'vite-plugin-checker',
{
vueTsc: {
tsconfigPath: 'tsconfig.vue-tsc.json',
},
eslint: {
lintCommand: 'eslint "./**/*.{js,ts,mjs,cjs,vue}"',
},
},
{ server: false },
],
],
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
devServer: {
// https: true
// open: true, // opens browser window automatically
open: {
app: {
name: apps.chrome,
arguments: ['--auto-open-devtools-for-tabs', '--incognito'],
},
}, // opens browser window automatically
},
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
framework: {
config: {
dark: 'auto',
},
// iconSet: 'material-icons', // Quasar icon set
// lang: 'en-US', // Quasar language pack
// For special cases outside of where the auto-import strategy can have an impact
// (like functional components as one of the examples),
// you can manually specify Quasar components/directives to be available everywhere:
//
// components: [],
// directives: [],
// Quasar plugins
plugins: [
'Notify',
'AppFullscreen',
'Cookies',
'LocalStorage',
'SessionStorage',
'Loading',
'LoadingBar',
'Dialog',
'Meta',
],
},
// animations: 'all', // --- includes all animations
// https://v2.quasar.dev/options/animations
animations: 'all',
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#sourcefiles
// sourceFiles: {
// rootComponent: 'src/App.vue',
// router: 'src/router/index',
// store: 'src/store/index',
// pwaRegisterServiceWorker: 'src-pwa/register-service-worker',
// pwaServiceWorker: 'src-pwa/custom-service-worker',
// pwaManifestFile: 'src-pwa/manifest.json',
// electronMain: 'src-electron/electron-main',
// electronPreload: 'src-electron/electron-preload'
// bexManifestFile: 'src-bex/manifest.json
// },
// https://v2.quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr
ssr: {
prodPort: 3000, // The default port that the production server should use
// (gets superseded if process.env.PORT is specified at runtime)
middlewares: [
'render', // keep this as last one
],
// extendPackageJson (json) {},
// extendSSRWebserverConf (esbuildConf) {},
// manualStoreSerialization: true,
// manualStoreSsrContextInjection: true,
// manualStoreHydration: true,
// manualPostHydrationTrigger: true,
pwa: false,
// pwaOfflineHtmlFilename: 'offline.html', // do NOT use index.html as name!
// will mess up SSR
// pwaExtendGenerateSWOptions (cfg) {},
// pwaExtendInjectManifestOptions (cfg) {}
},
// https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa
pwa: {
workboxMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
// swFilename: 'sw.js',
// manifestFilename: 'manifest.json'
// extendManifestJson (json) {},
// useCredentialsForManifestTag: true,
// injectPwaMetaTags: false,
// extendPWACustomSWConf (esbuildConf) {},
// extendGenerateSWOptions (cfg) {},
// extendInjectManifestOptions (cfg) {}
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova
cordova: {
// noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor
capacitor: {
hideSplashscreen: true,
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron
electron: {
// extendElectronMainConf (esbuildConf) {},
// extendElectronPreloadConf (esbuildConf) {},
// extendPackageJson (json) {},
// Electron preload scripts (if any) from /src-electron, WITHOUT file extension
preloadScripts: ['electron-preload'],
// specify the debugging port to use for the Electron app when running in development mode
inspectPort: 5858,
bundler: 'packager', // 'packager' or 'builder'
packager: {
// https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
// OS X / Mac App Store
// appBundleId: '',
// appCategoryType: '',
// osxSign: '',
// protocol: 'myapp://path',
// Windows only
// win32metadata: { ... }
},
builder: {
// https://www.electron.build/configuration/configuration
appId: 'agencyosquasar',
},
},
// Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex
bex: {
// extendBexScriptsConf (esbuildConf) {},
// extendBexManifestJson (json) {},
contentScripts: ['my-content-script'],
},
};
}); |
Beta Was this translation helpful? Give feedback.
-
|
I was able to get the environment variables working with unplugin-auto-import by adding { client: false } after the plugin: [
'unplugin-auto-import/vite',
{ ... }
{ client: false },
], |
Beta Was this translation helpful? Give feedback.
-
|
nope. I thought it was working, but putting { client: false } stops unplugin-auto-import from generating the d.ts file in an SPA.. |
Beta Was this translation helpful? Give feedback.
-
|
#17132 - erroneous config |
Beta Was this translation helpful? Give feedback.
-
|
Is there support for BEX using manifest v3 in any of them? |
Beta Was this translation helpful? Give feedback.
-
|
Trying to follow the instructions on the https://quasar.dev/quasar-cli-webpack/upgrade-guide/ page.
When I run |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
I have tried to upgrade app-vite v2 and devServer.proxy with configure suddently not work. This code below is works on previous version of app-vite, i dont know why is not work in app-vite v2 beta. |
Beta Was this translation helpful? Give feedback.
-
tl;dr:
|
Beta Was this translation helpful? Give feedback.
-
|
I just did the upgrade and it seems to work great. Smaller issues I am getting:
in the quasar.config.ts when switching to typescript I get this error from eslint: App compilation still works. The reason I am getting this, is that it doesn't like that I am disabling the vendor chunk option. Because my app is quiet large and I do my own chunking with webpack. The option still works, but eslint complains about it that it isn't defined. |
Beta Was this translation helpful? Give feedback.
-
|
Hi people, the last beta version (2.0.0-beta.14) was released 2 months ago, is this still being actively developed? If so, is there a rough ETA when 2.0.0 will have its first stable release? |
Beta Was this translation helpful? Give feedback.
-
|
Don't know if this has been reported or not, but using the beta with boot files seems to fail. Maybe some documentation missing, but the app can't locate boot files. Assuming from the server.ts change for local development. |
Beta Was this translation helpful? Give feedback.
-
|
Can you elaborate pls? A codesandbox/repo to reproduce would be great. |
Beta Was this translation helpful? Give feedback.
-
|
The progress of beta is too slow |
Beta Was this translation helpful? Give feedback.
-
|
It'll get there. Not much time left to become stable. |
Beta Was this translation helpful? Give feedback.
-
|
It would be nice if this version would allow the use of Quasar in a One guy found a solution here wich were never proposed as a PR: #7581 (comment) It seems to be a little patch but so much critical that I guess only @rstoenescu should handle it Anyway, thank you for filling the gap in terms of Vite version! PS: There is a discussion about it here #11059 |
Beta Was this translation helpful? Give feedback.
-
|
@rstoenescu Are you planning to update to eslint v9? There are a lot of breaking changes associated with the new flat config format (eslint.config.js) |
Beta Was this translation helpful? Give feedback.
-
|
ESLint is part of create-quasar and is not related to app-vite/app-webpack beta updates. You can see a partial example in #17168. We are planning to do this, but no set timeline. |
Beta Was this translation helpful? Give feedback.
-
Important update: 2024/08/15After upgrading to quasar/app-vite v2 beta.19+ & quasar/app-webpack v4 beta.20+, please take the action below: Action to takeThe feature flag files must be deleted from your project folder. They need to be generated again (will happen automatically). Using $ npx rimraf -g ./**/*-flag.d.ts
$ quasar build # or devUnix-like (Linux, macOS): $ rm ./**/*-flag.d.ts
$ quasar build # or devWindows (CMD): > del /s *-flag.d.ts
> quasar build &:: or devWindows (PowerShell): > Remove-Item -Recurse -Filter *-flag.d.ts
> quasar build # or devExplanation#17301 changes
It's because even though TS normally doesn't enforce the file extension inside the app code and imports from node_modules when using This change will only apply to feature flags generated after the release of this. So, existing projects will only benefit from it when they add Pinia or build modes, OR delete the feature flag files and run |
Beta Was this translation helpful? Give feedback.
-
|
I have tried the following and running into the below two issues error with webpack bex: Issue 1:
Issue 2: |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for reporting. The issue 1 got fixed in eae158c and b27711e. The fixes will be included in the next releases of app-vite and app-webpack. Please open a separate issue about the second problem. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you: I have open a issue here: 17447 |
Beta Was this translation helpful? Give feedback.
-
Hello beautiful people,
We have made two big releases today:
There are a TON of improvements and new features and we'd like your help to test them thoroughly. The more people get engaged, the faster we can get them out the "beta". We've been working on these new CLIs for a very LONG time!
Release notes: q/app-vite and q/app-webpack
The documentation website has been updated and it now has two new pages (both called "Upgrade guide") under the "Quasar with Vite/Webpack" menu sections. If you don't see them right away, allow time for the docs PWA to update.
Any constructive feedback is appreciated.
Enjoy!
Important update: 2024/08/15
After upgrading to quasar/app-vite v2 beta.19+ & quasar/app-webpack v4 beta.20+, please take the action below:
Action to take
The feature flag files must be deleted from your project folder. They need to be generated again (will happen automatically).
Using
rimrafthroughnpx(orpnpx,yarn dlx,bunx)Unix-like (Linux, macOS):
Windows (CMD):
Windows (PowerShell):
Explanation
#17301 changes
moduleResolutionfromnodetobundler. That broke the feature flags system. Here is an example common error:It's because even though TS normally doesn't enforce the file extension inside the app code and imports from node_modules when using
bundler, it does enforce it for wildcardpackage.json > exportsentries. So,quasar/dist/types/feature-flagno longer works and must be changed toquasar/dist/types/feature-flag.d.tsinstead.This change will only apply to feature flags generated after the release of this. So, existing projects will only benefit from it when they add Pinia or build modes, OR delete the feature flag files and run
quasar dev/quasar buildto re-generate them. New projects will work fine.Beta Was this translation helpful? Give feedback.
All reactions