Form errors return wrong input IDs in production (SSR vs client mismatch) #5799
Description
Environment
| Operating system | Linux 5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36 |
| CPU | Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz (8 cores) |
| Node.js version | v20.19.1 |
| nuxt/cli version | 3.31.3 |
| Package manager | npm@10.8.2 |
| Nuxt version | 4.2.2 |
| Nitro version | 2.12.9 |
| Builder | vite@7.3.0 |
| Config | compatibilityDate, css, devtools, modules, ui |
| Modules | @nuxt/ui@4.3.0
Is this bug related to Nuxt or Vue?
Nuxt
Package
v4.x
Version
v4.3.0
Reproduction
Note: the reproduction runs in production mode.
https://stackblitz.com/edit/github-25ehkbtc?file=app%2Fcomponents%2Fform.vue
Description
Hi, I discovered a strange bug with input IDs in the form — they are different on the server and on the client.
You need to use NuxtIcon at the top level, and in a child component use useAsyncData.
This happens only in the production build.
I wanted to use errors[].id to find the input, but in production it doesn’t exist.
Maybe related:
nuxt/icon#310
nuxt/nuxt#30289
vuejs/core#12591
Additional context
As a workaround, it’s possible to manually set custom id values for UForm and UInput.
No response