New major versions of q/app-vite and q/app-webpack - in RC #16877
Replies: 29 comments 57 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.
-
|
I would also be very interested to see what happens next. At the end of April it was written that we are pretty close to a release. At that time we were at 2.0.0-beta.12 now 5 months later we are at beta.22 and I don't have the feeling that we are making rapid progress. The roadmap unfortunately ends in Q3 2024 (https://github.com/quasarframework/quasar/blob/dev/ROADMAP.md) and does not provide any further information. Also I came across the project Quasar v3 is planned to release a new Quasar version? As a big fan of Quasar I would really appreciate an answer. |
Beta Was this translation helpful? Give feedback.
-
|
Hi, we are trying hard to release it this month, but there's ecosystem changes that keep happening and we want it to be up to date with everything, rather than having to introduce breaking changes in our CLIs later. Examples: we started the road with Vite 3 and now we're using Vite 5; Sass keeps changing things (and we even backported many of the changes), etc etc. It's pretty stable, but some minor breaking changes might still occur (but nothing major). |
Beta Was this translation helpful? Give feedback.
-
|
Vite6 is already on its way |
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.
-
|
So I attempted to install and use the beta for app-vite (beta.22) and I ran into a strange issue I am still trying to debug. I import and use some web components in my project (and have for years), and they render fine when using the dev server (quasar dev) but when I build the project on my server they suddenly don't work properly (seems like shadow dom is missing completely in the built version, only some slotted svgs and text are showing). Does anyone have any suggestions why this would be the case and what to check for? I hate to revert after coming this far, there are some nice things about the upgrade (like dots in urls now working for example). Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
According to your upgrade guide, following these instructions should allow me to choose the beta (Quasar App CLI with Vite 5) when I init a new project (I already have globally installed latest cli @quasar/[email protected]). But I never get that option, is there some option to make it appear? |
Beta Was this translation helpful? Give feedback.
-
|
@ssuess that means |
Beta Was this translation helpful? Give feedback.
-
|
After setting up a brand new app and importing a single web component, the result is the exact same as trying to move my entire project yesterday: works fine in dev server, does not work in build. And I made it as simple as possible, by even using |
Beta Was this translation helpful? Give feedback.
-
|
@ssuess you can share that simple reproduction project for further help if you wish. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, I was just tinkering with the config, and I was finally able to make it work in build. Here was the problem: I was importing these in boot files like: defined in the boot section of the conf like: which works in current quasar just fine, and has worked for years. But with the new app-vite, for some reason this works in dev but not in build. If I instead import directly in particular files: And THEN build, the build will work as expected. So at least there is a workaround for now. It would have been nice to have had some warning in the build that the boot file had some problem, but even with debug there was nothing. At least now we know. :) |
Beta Was this translation helpful? Give feedback.
-
|
I finally got round to testing this for a not overly complex webpack project, and it's just a series of error after error.
Meanwhile, V3 webpack runs simply fine (or was), but I have no option to stick with that because eventually this V4 will be live. This is just an SPA, and in the https://quasar.dev/quasar-cli-webpack/upgrade-guide it says I don't need to do anything for SPA, but suddenly it's errors all over the place. Is there a troubleshooting guide to common issues with this, especially related to SPA? Apologies if I'm sounding overly negative, but the original upgrade process doc makes it out to be friction free but in practice it's not turning out like that. It's difficult tracking down what the issues are due to, so having a centralised troubleshooting doc with upgrade issues encountered and solutions found would be helpful, is my point. eg: Example 1Uncaught runtime errors such as below. I've figured this one out, but it wasn't occurring in V3. It's due to V-if checks being triggered on logout as undefined before the page is routed to the login page. In V3 the user would be logged out fine (triggered from a logout link on the side menu, and then the page routed back to the login page. Something has changed, and now as soon as the user is logged out but before the router gets a chance to redirect to the login page the q-page it's on is immediately detecting the auth object is now undefined, and throws an error. I don't understand what has happened under the hood to now make this q-page refresh itself before the logout/redirect routine gets a chance to complete, It should not be doing that. But I don't see any reference to this change in page refresh behavior anywhere. These are frustrating issues to encounter. What has changed the page behavior here, and why? Example 2Image urls from the public folder have now changed. On V3 with a page url of http://localhost:8081/app/buytokens the image urls are http://localhost:8081/images/foodmg/IMG_4943webp What has changed the url behavior here, and why? Example 3Q-markdown plugin no longer works (bug logged already) but I must find a simpler alternative that's more robust. Example 4I have several bootfiles (appwrite, pinia, and others) and they are having problems initialising. |
Beta Was this translation helpful? Give feedback.
-
|
In regards to the boot files issue, can u supply a reproduction repo pls? They should work out of the box. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks. I'll test out the public folder. I don't fully understand what you mean by "will now have to handle the public path too (add it throughout your UI). " so, some examples of that would be extremely helpful. I also tried a quasar build and then quasar serve and the app won't load, 404 errors: Is this related to the undocumented path issue too? |
Beta Was this translation helpful? Give feedback.
-
I prefer webpack, for several reasons. That said, is your intention to eventually drop Webpack and just focus on Vite, so it doesn't just become a recommendation but a requirement? This is important for a few reasons, so knowing sooner than later would be much preferred! |
Beta Was this translation helpful? Give feedback.
-
No, I don't. It's a full app, I'll try to keep debugging it. It's the same issue as the logout one in Example 1 I think though, as the error is the same. It's just happening now on login, not logout. Update: This is a bootfile issue with Quasar Dev but very strange. It appears the first time after a quasar dev, and trying to login. It doesn't appear to be finding the appwrite.js bootfile I have as no console log statements in it are showing up. Works perfectly fine doing this in V3. I will get the error again, can't login due to not finding the appwrite.js bootfile. The other strange thing is when I do this comment/uncomment or uncomment/comment hack to get the bootfile to work properly it looks like it repeats the Compiling of "SPA UI" by Webpack in progress... step twice, automatically kicking another one off when the first one finishes successfully. That isn't normal either afaik. Something is broken in Quasar Dev with bootfiles and webpack, and it's possibly the same issue with Vite (link above). I can't test the Quasar build version as that's broken also as reported above due to public path images now being 404. |
Beta Was this translation helpful? Give feedback.
-
|
Any progress on these issues? Will there be another webpack beta? |
Beta Was this translation helpful? Give feedback.
-
|
Hi, An update on the CLIs. We would have released the new q/app-s (I think that you are referring to them) last week if I didn't get a breakthrough very recently for the BEX mode (HMR for Chrome! is one of them). On the fact that "it takes too much time": this is always the case when we are taking a big leap forward (UI or CLI) and lots of research is needed. The development appears to slow down. However, in reality it's quite the opposite. Every. Time. The new CLIs are such a major improvement and the work we are putting into them was and is so insane that you, the community, would not believe it. Like with the previous major releases, we want to ship the best product ever, and it takes time. We also don't want to get "aaah, but this fix will make a breaking change" type of moments (and then release another major version). CLI development is hard. We're doing things no one else has. The ESM changes have huge implications and that's why testing & feedback from the community is really important. What worsened the situation for the new CLIs is that we started with a plan that kept on changing due to the ecosystem (the rapid release of Vite 3, 4 & 5 is one of the reasons). In any case, this week we will release the final beta (take it as an RC too) for both the CLIs and then things will get back to what you were used to before. PS: For those working at companies using Quasar, we would really appreciate if you could ask your employers to sponsor/donate to Quasar. It would mean quite a lot for us and it would speed up the development. https://donate.quasar.dev |
Beta Was this translation helpful? Give feedback.
-
|
I'm starting a company for 15 months with a friend and Quasar has been a huge help since the beginning, even using the vite-app in beta since the beginning. Thank you very much for your high quality work! |
Beta Was this translation helpful? Give feedback.
-
Important update!!!The next q/app-vite v2 (beta.25) will come with Vite 6 (today or tomorrow). There will be one more beta next week and then we are shipping the stable version (or skip the next beta altogether... we're almost there!). Again, sorry for the delay, but just remember that this is not only a Vite upgrade from 2 to 6. It comes with a lot of new significant and very important features. |
Beta Was this translation helpful? Give feedback.
-
|
Would be great if perhaps a few of the important features were mentioned :) |
Beta Was this translation helpful? Give feedback.
-
|
Great news - is there much difference between Vite 5 and 6 that we need to change? |
Beta Was this translation helpful? Give feedback.
-
|
Seems like nothing has to change for the vite config. The Vite upgrade should in theory be seamless. However, along the life of q/app-vite v2 we will have to make some internal adjustments to the SSR mode (no breaking changes on your end, the developers using q/app-vite), which will be a preparation for Vite 7 also. Things will move much faster once we ship v2 stable because they'll be a whole lot easier to handle. |
Beta Was this translation helpful? Give feedback.
-
Important update: 2024/11/16Release Candidate versions for both q/app-vite & q/app-webpack are here! No further breaking changes are planned.
|
Beta Was this translation helpful? Give feedback.
-
|
congratulations and thank you for the hard work! |
Beta Was this translation helpful? Give feedback.
-
|
there is something wrong with new import [vue-tsc] Module '"#q-app/wrappers"' has no exported member 'defineBoot'. |
Beta Was this translation helpful? Give feedback.
-
|
We know. A PR has even been submitted. Will do a new release today. |
Beta Was this translation helpful? Give feedback.
-
|
Just shipped rc.2 for both CLIs. |
Beta Was this translation helpful? Give feedback.
-
|
Yes, ty vm for updating to latest vite and so on. |
Beta Was this translation helpful? Give feedback.
-
|
@rstoenescu "scripts": {
"postinstall": "quasar prepare",
}in FROM node:20-alpine as global-install-stage
RUN npm i --location=global @quasar/cli@latest
# install stage
FROM global-install-stage as install-stage
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarnand I thought, I would need this |
Beta Was this translation helpful? Give feedback.
-
|
On a docker container, you can remove the postinstall step. In your particular case Yarn is looking for the global "quasar" CLI instead of trying the local one first (which is the standard bevahior). The postinstall is there to ensure you get IDE autocompletion from the get-go. The preparation step occurs when quasar dev/build is run anyway, but spawning a project and opening it in the IDE while already having everything prepared is what we want to achieve. And also, if someone is git cloning the repo and installing the deps, it would be nice to ensure they have the same preparation step run. |
Beta Was this translation helpful? Give feedback.
-
|
Thank You very much. Your explanations helps to understand better now, |
Beta Was this translation helpful? Give feedback.
-
|
@sonicviz I may have a solution to your markdown issue. I also use QMarkdown and have an alternative solution. Try: Vite plugin markdown In vite.config.ts: import { plugin as mdPlugin, Mode } from "vite-plugin-markdown";
plugins: [
vue(),
mdPlugin({ mode: [Mode.HTML] }),
],in vite-env.d.ts declare module '*.md' {
// "unknown" would be more detailed depends on how you structure frontmatter
const attributes: Record<string, unknown>;
// When "Mode.TOC" is requested
const toc: { level: string, content: string }[];
// When "Mode.HTML" is requested
const html: string;
// When "Mode.RAW" is requested
const raw: string
// When "Mode.React" is requested. VFC could take a generic like React.VFC<{ MyComponent: TypeOfMyComponent }>
import React from 'react'
const ReactComponent: React.VFC;
// When "Mode.Vue" is requested
import { ComponentOptions, Component } from 'vue';
const VueComponent: ComponentOptions;
const VueComponentWith: (components: Record<string, Component>) => ComponentOptions;
// Modify below per your usage
export { attributes, toc, html, ReactComponent, VueComponent, VueComponentWith };
}in your component: <script setup lang="ts">
import Markdownmd1 from "../assets/md1.md"
// or import everything
const markdownFiles = import.meta.glob<typeof import("*.md")>("../assets/**.md", {
eager: true,
});
const props = defineProps<{
markdownFile: string;
}>();
const markdown = markdownFiles[`../assets/${props.markdownFile}`];
</script>
<template>
{{ markdown.html }}
</template> |
Beta Was this translation helpful? Give feedback.
-
|
@rstoenescu I did a test migration with rc2 using the Vite guide: One thing that I needed to remove: tsconfig.json "compilerOptions": {
- "baseUrl": "."
}I think the docs imply that this should be the entire contents of the file: {
"extends": "./.quasar/tsconfig.json"
}In my case, I had some additional keys so assumed that the only thing to replace was the "extends" key. I just created a brand new Quasar project v1.4.3 using typescript and this was the default tsconfig.json: {
"extends": "@quasar/app-vite/tsconfig-preset",
"compilerOptions": {
"baseUrl": "."
}
} |
Beta Was this translation helpful? Give feedback.
-
|
Also make sure that the docs PWA has been updated for you. Force it if you have to. We're continuously improving the guide. |
Beta Was this translation helpful? Give feedback.
-
|
I meant I scaffolded a new 1.4.3 project to compare to 2.0 RC just to make sure the baseUrl wasn't something I had added at some point to my project. I added a pull request as well. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
1.4.3 does not corresponds to any of the latest versions (not UI, not app-vite, not app-webpack, etc) |
Beta Was this translation helpful? Give feedback.
-
|
Ah, my mistake I think. Here's what npm init quasar scaffolded. {
"dependencies": {
"@quasar/extras": "^1.16.4",
"quasar": "^2.8.0",
"vue": "^3.2.29",
"vue-router": "^4.0.12"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.10.0",
"@typescript-eslint/parser": "^5.10.0",
"eslint": "^8.11.0",
"eslint-plugin-vue": "^9.0.0",
"eslint-config-prettier": "^8.1.0",
"prettier": "^2.5.1",
"@types/node": "^12.20.21",
"@quasar/app-vite": "^1.4.3",
"autoprefixer": "^10.4.2",
"typescript": "^4.5.4"
},
} |
Beta Was this translation helpful? Give feedback.
-
|
@acrobid |
Beta Was this translation helpful? Give feedback.
-
|
Hi ! Thanks for the release :) Typscript isn't detecting properly the I add to add the following lines into my "include": ["**/*", ".quasar/**/*"]Do you have any idea why that is ? |
Beta Was this translation helpful? Give feedback.
-
|
It has already been fixed, but not released yet. TS doesn't include private directories by default, e.g. |
Beta Was this translation helpful? Give feedback.
-
|
Oh great ! Thanks a lot :) |
Beta Was this translation helpful? Give feedback.
-
Important update: 2024/11/27We have finalized the final q/app-vite v2.0.0 & q/app-webpack v4.0.0 (both have a few fixes on top of rc.4) and we are now writing the docs (q/app-vite is done, q/app-webpack needs a bit more work). Expect the release in a few more days. The docs for the legacy apps (q/app-vite v1 & q/app-webpack v3) will be moved to a dedicated website (legacy-app.quasar.dev) and the main docs (quasar.dev) will have only information related to the newer CLIs. |
Beta Was this translation helpful? Give feedback.
-
|
I am sorry I can`t start your project: What are the codes for the Terminal? |
Beta Was this translation helpful? Give feedback.
-
|
Hi, the code is 055-021. Also, what? |
Beta Was this translation helpful? Give feedback.
and others
-
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/11/27
We have finalized the final q/app-vite v2.0.0 & q/app-webpack v4.0.0 (both have a few fixes on top of rc.4) and we are now writing the docs (q/app-vite is done, q/app-webpack needs a bit more work). Expect the release in a few more days. The docs for the legacy apps (q/app-vite v1 & q/app-webpack v3) will be moved to a dedicated website (legacy-app.quasar.dev) and the main docs (quasar.dev) will have only information related to the newer CLIs.
Important update: 2024/11/16
Release Candidate versions for both q/app-vite & q/app-webpack are here! No further breaking changes are planned.
Important update: 2024/11/08
The next q/app-vite v2 (beta.25) will come with Vite 6 (today or tomorrow). There will be one more beta next week and then we are shipping the stable version (or skip the next beta altogether... we're almost there!). Again, sorry for the delay, but just remember that this is not only a Vite upgrade from 2 to 6. It comes with a lot of new and very important features.
Important update: 2024/11/06
We would have released the new q/app-s (I think that you are referring to them) last week if I didn't get a breakthrough very recently for the BEX mode (HMR for Chrome! is one of them).
On the fact that "it takes too much time": this is always the case when we are taking a big leap forward (UI or CLI) and lots of research is needed. The development appears to slow down. However, in reality it's quite the opposite. Every. Time. The new CLIs are such a major improvement and the work we are putting into them was and is so insane that you, the community, would not believe it. Like with the previous major releases, we want to ship the best product ever, and it takes time. We also don't want to get "aaah, but this fix will make a breaking change" type of moments (and then release another major version). CLI development is hard. We're doing things no one else has. The ESM changes have huge implications and that's why testing & feedback from the community is really important. What worsened the situation for the new CLIs is that we started with a plan that kept on changing due to the ecosystem (the rapid release of Vite 3, 4 & 5 is one of the reasons).
In any case, this week we will release the final beta (take it as an RC too) for both the CLIs and then things will get back to what you were used to before.
PS: For those working at companies using Quasar, we would really appreciate if you could ask your employers to sponsor/donate to Quasar. It would mean quite a lot for us and it would speed up the development. https://donate.quasar.dev
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