From beb7410777b170a318d3dd901c6e57453764a9aa Mon Sep 17 00:00:00 2001
From: Saman <bounoable@gmail.com>
Date: Tue, 5 Sep 2023 12:27:00 +0200
Subject: [PATCH] fix(nuxt): always use increment for id with client side
 islands (#22975)

---
 packages/nuxt/src/app/components/nuxt-island.ts | 2 +-
 test/basic.test.ts                              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nuxt/src/app/components/nuxt-island.ts b/packages/nuxt/src/app/components/nuxt-island.ts
index 0c4fb8c67b..63f1303b0b 100644
--- a/packages/nuxt/src/app/components/nuxt-island.ts
+++ b/packages/nuxt/src/app/components/nuxt-island.ts
@@ -86,7 +86,7 @@ export default defineComponent({
       ssrHTML.value = renderedHTML
     }
     const slotProps = computed(() => getSlotProps(ssrHTML.value))
-    const uid = ref<string>(ssrHTML.value.match(SSR_UID_RE)?.[1] ?? randomUUID())
+    const uid = ref<string>(ssrHTML.value.match(SSR_UID_RE)?.[1] ?? getId())
     const availableSlots = computed(() => [...ssrHTML.value.matchAll(SLOTNAME_RE)].map(m => m[1]))
 
     const html = computed(() => {
diff --git a/test/basic.test.ts b/test/basic.test.ts
index 3e4db35cdc..1f1df4b479 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -1386,7 +1386,7 @@ describe('server components/islands', () => {
     await page.getByText('Go to page without lazy server component').click()
 
     const text = await page.innerText('pre')
-    expect(text).toMatchInlineSnapshot('" End page <pre></pre><section id=\\"fallback\\"><div nuxt-ssr-component-uid=\\"0\\"> This is a .server (20ms) async component that was very long ... <div id=\\"async-server-component-count\\">42</div><div style=\\"display:contents;\\" nuxt-ssr-slot-name=\\"default\\"></div></div></section><section id=\\"no-fallback\\"><div nuxt-ssr-component-uid=\\"1\\"> This is a .server (20ms) async component that was very long ... <div id=\\"async-server-component-count\\">42</div><div style=\\"display:contents;\\" nuxt-ssr-slot-name=\\"default\\"></div></div></section>"')
+    expect(text).toMatchInlineSnapshot('" End page <pre></pre><section id=\\"fallback\\"><div nuxt-ssr-component-uid=\\"2\\"> This is a .server (20ms) async component that was very long ... <div id=\\"async-server-component-count\\">42</div><div style=\\"display:contents;\\" nuxt-ssr-slot-name=\\"default\\"></div></div></section><section id=\\"no-fallback\\"><div nuxt-ssr-component-uid=\\"3\\"> This is a .server (20ms) async component that was very long ... <div id=\\"async-server-component-count\\">42</div><div style=\\"display:contents;\\" nuxt-ssr-slot-name=\\"default\\"></div></div></section>"')
     expect(text).toContain('async component that was very long')
 
     // Wait for all pending micro ticks to be cleared