Hydration mismatch for `useId` about nuxt HOT 13 CLOSED

We need the ability to v-bind attrs to the root element as useId needs to access them when it hydrates.

from nuxt.

Same here 👍

<script lang="ts" setup>
// ...
const uniqueIdentifier = useId();
// ...
</script>

<template>
    <input
        :id="uniqueIdentifier"
        v-model="field"
        v-bind="$attrs"
    />
</template>

<style scoped></style>

This workaround helped, ofc as temp solution

const uniqueIdentifier = useId().replace(':', '_');

from nuxt.

@gregdev00 no, see #26315

from nuxt.

I believe it's because of how the useId composable was implemented, it had different separators. It is fixed in this commit.

from nuxt.

I'm still getting this error in various components (not all):

  - rendered on server: id="nnOfIU4QIk8-0"
  - expected on client: id="nnOfIU4QIk8_0"

There still seem to be cases, where a different seperator character is used (- vs _ ).

I think it happens in dynamically loaded components.

useId().replace('_', '-') is a workaround then.

from nuxt.

Would you be able to provide a reproduction? 🙏

from nuxt.

I've had that in my project when using client-only and fallback inside of it (needed to render empty input). Fixed by removing client-only and by relying on hydration end.

from nuxt.

I have a reproduction link here, with @manchenkoff's suggestion:

https://stackblitz.com/edit/github-rq89e8?file=app.vue,components%2FTestId.vue

This way you don't get the hydration mismatch warning, but you still get the warning added here

[nuxt] `useId` is not compatible with components that have `inheritAttrs: false`.

@manniL, @danielroe are there any plans to support inheritAttrs: false in the future?

from nuxt.

We need the ability to v-bind attrs to the root element as useId needs to access them when it hydrates.

Why do you need them on the root element?

It's not uncommon to have custom form elements that have a wrapper div with input/label nested inside where you need the attrs to be bound to the input.

And even then, the attributes are still available (just not on the root element), no?

from nuxt.

Why do you need them on the root element?

It is because of the mechanics of how we ensure a stable ID that matches between server and client. Of course there are other locations they could be stored, but how can the composable 'know' where to access them?

from nuxt.

how can the composable 'know' where to access them?

maybe we can pass a ref of the element we use it on as an optional argument to the composable ?

from nuxt.

It is still producing this issue as of nuxt 3.11.0, the problem is that the return statement at the bottom of the packages/nuxt/src/app/composables/id.ts file has a different separator than the one specified at the top in a constant

const SEPARATOR = '-'
.
.
.
// this line needs to be changed to use SEPARATOR instead of the hardcoded _ character
return key + '_' + nuxtApp._id++ 

@manniL can you fix this as well please?

from nuxt.

Can this be closed then?

from nuxt.