SSR Component Id does not match

[alimozdemir]

Hello there,

I'm implementing Menu component in a nuxt project. I think I have an issue but I'm not sure it is related to usage or a real issue.

<script lang="ts" setup>
import { Menu } from '@ark-ui/vue'
const id = useId();
</script>
<template>
  <Menu.Root :id="id">
    <Menu.Trigger>
      Open menu
      <Menu.Indicator>➡️</Menu.Indicator>
    </Menu.Trigger>
    <Menu.Positioner>
      <Menu.Content>
        <Menu.Item value="react">React</Menu.Item>
        <Menu.Item value="solid">Solid</Menu.Item>
        <Menu.Item value="vue">Vue</Menu.Item>
      </Menu.Content>
    </Menu.Positioner>
  </Menu.Root>
</template>

I just copied the example from the website. useId() approach working great with Tabs/Select/Datepicker.

but for this it looks like there is an issue with the separator.

I'm getting the following warning.

• rendered on server: id="menu:ncw3HK6Eekm-0:trigger"
• expected on client: id="menu:ncw3HK6Eekm_0:trigger"

In the server it uses hype and in the client it uses underscore

I tried to set id for each component but then Positioner/Content is getting broken. For the other components, I'm just setting the id for the root component also.

Do you have any idea, to fix that issue?

btw, it is also happening for the content component

• rendered on server: id="menu:ncw3HK6Eekm-0:content"
• expected on client: id="menu:ncw3HK6Eekm_0:content"

[segunadebayo]

This is an ongoing issue in Nuxt itself

nuxt/nuxt#25755
nuxt/nuxt#27378

If you use a static id, it should be fine.

[alimozdemir]

Why does it work with the other components? isn't that should be the same?