[Vue 3.4] Hydration issue with q-input component with SSR

[suhail-chouhan]

What happened?

Adding a q-input gives console errors in SSR Mode as Hydration Attribute Mismatch.

What did you expect to happen?

It should work fine and not return any error

Reproduction URL

https://stackblitz.com/edit/stackblitz-starters-7zbdni

How to reproduce?

1. run the project.
2. open the console you will see an error.

Flavour

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

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

Operating System - Windows_NT(10.0.19045) - win32/x64
NodeJs - 16.18.0

Global packages 
  NPM - 8.19.2
  yarn - Not installed
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.14.2 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.7.3 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.9 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.15 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.2.5
  pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.17 -- Native-ESM powered web dev build tool
  eslint - 8.56.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

[Vue warn]: Hydration attribute mismatch on <input class=​"q-field__native q-placeholder" style tabindex=​"0" aria-label=​"Name" id=​"f_2355365f-de15-458d-919c-34ba2126e124" type=​"text" value>​ 
  - rendered on server: id="f_ce36f551-23ee-402c-a1ca-6fa0840eaac2"
  - expected on client: id="f_f5a0762d-4347-472d-bccf-1abc14d86dfc"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch. 
  at <QInput label="Name" dense="" outlined=""  ... > 
  at <QPage class="column flex-center" > 
  at <IndexPage onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <QPageContainer> 
  at <QLayout view="lHh Lpr lFf" > 
  at <MainLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App > 
  at <AppWrapper>

Additional context

the issue persist with q-drawer as well

[xppppy]

I also encountered the same problem, and there was no problem if I specified the for attribute. <q-input for="everthing"/>

[FadhiliNjagi]

I ran into the same problem.

[SechinAndrey]

I also get this warnings and errors after I updated to

"quasar": "^2.14.2", "vue": "^3.4.15", "@quasar/app-vite": "^1.7.3",

Hydration completed but contains mismatches.

for QInput, QSelect - id and for attributes

---

I also have a block in which a background is randomly selected when the page loads, so now I also get a warning for the style attribute, although there was none before the update.

- rendered on server: style="background-image:url(/src/assets/images/search-bg5.jpg);background-position-y:36%;--bg-gradient:linear-gradient(180deg, rgba(62, 68, 91, 0.60) 0%, rgba(62, 68, 91, 0.60) 100%);"
- expected on client: style="background-image:url(/src/assets/images/search-bg1.jpg);background-position-y:top;--bg-gradient:linear-gradient(180deg,rgba(61, 68, 92, 0) 20.72%,#3e445bcd 100%);"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch. 
  at <SearchBanner> 
  at <QPage class="flex flex-center column fit" > 
  at <IndexPage onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <QPageContainer class="fit q-page-container--custom" > 
  at <QLayout view="lhr LpR lfr" > 
  at <MainLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App > 
  at <AppWrapper>

[rstoenescu]

This seems like a bug in Vue 3.4... will investigate more.

[rstoenescu]

Indeed there have been substantial changes in Vue 3.4 which break Quasar UI for SSR. Found a workaround for the issues with QField/QInput/QSelect/... and QBtnDropdown, QExpansionItem, QFab).

Will be available in 2.14.3

[rstoenescu]

Investigating one more possible issue.

[rstoenescu]

Fixed the additional issue (Dark plugin) generated by the changes in Vue 3.4 #16818

All fixes will be available in 2.14.3

[Evertvdw]

@rstoenescu Is there a way we can expose a sort of useId helper from Quasar that can be used by the developers? For example: In my project I have a wrapper around QInput that can render a label above the input as well. This label should have the correct for tag so I was generating the id myself. Only workaround I see so far is just generate the ID in the onMounted hook so it does not trigger a mismatch but that feels a bit wacky. Maybe you got another idea?

[rstoenescu]

@rstoenescu Is there a way we can expose a sort of useId helper from Quasar that can be used by the developers? For example: In my project I have a wrapper around QInput that can render a label above the input as well. This label should have the correct for tag so I was generating the id myself. Only workaround I see so far is just generate the ID in the onMounted hook so it does not trigger a mismatch but that feels a bit wacky. Maybe you got another idea?

Nothing wacky about it. But regardless, a new composable useId() will be available publicly in Quasar v2.15