ResizeObserver Error When Navigating Between Pages with Different Layouts

[Mason-Klein]

What happened?

When navigating from a page without q-header (GroupPage) to a page with q-header (MomentPage), the console outputs the following error:
error-handler.ts:94 === Unhandled Sync Error ===
error-handler.ts:95 Message: ResizeObserver loop completed with undelivered notifications.
error-handler.ts:96 Filename: http://localhost:9000/#/moment
error-handler.ts:97 Line: 0
error-handler.ts:98 Column: 0
error-handler.ts:99 Error object: null
error-handler.ts:46 Error details: null
error-handler.ts:31 Global error handler: null
error-handler.ts:32 Error stack: No stack trace
The error disappears when removing the q-header component from MomentPage, suggesting it's related to layout changes during navigation.

What did you expect to happen?

No ResizeObserver error should occur when navigating between pages with different layouts.

Reproduction URL

N/A (local development environment)

How to reproduce?

1. Create two pages:
   • GroupPage: Uses q-toolbar directly without q-header
   • MomentPage: Uses q-header with q-toolbar inside
2. Add a navigation between these two pages
3. Navigate from GroupPage to MomentPage
4. Observe the ResizeObserver error in the console

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Microsoft Edge

Quasar info output

Operating System - Windows(10.0.19045) - win32/x64
NodeJs - 20.11.0

Global packages
  NPM - 10.2.4
  yarn - 1.22.21
  @quasar/cli - 2.2.3
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.16.0 -- Build high-performance Vue.js apps, be it SSR, SPA, PWA, Mobile and Desktop apps
  @quasar/app-vite - 2.1.0 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.4 -- Quasar Framework fonts, icons and animations
  vue - 3.5.20 -- The progressive JavaScript framework
  vue-router - 4.0.12 -- Vue Router
  pinia - 3.0.1 -- Intuitive, type safe and flexible Store for Vue
  vite - 5.0.0 -- Native-ESM powered web dev build tool
  eslint - 9.14.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-builder - Not installed
  electron-packager - Not installed

Quasar App Extensions
  @quasar/quasar-app-extension-dotenv - 1.1.0 -- Load .env variables into your quasar project

Relevant log output

Additional context

The error seems to be related to scroll-related components in MomentList.vue, such as q-infinite-scroll and q-scroll-observer. Removing these components resolves the error, but also removes functionality. The issue appears when the layout structure changes during navigation, specifically when a q-header is added to the page.

[github-actions]

Hi @Mason-Klein! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, CodeSandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏