nuxt / nuxt

The Intuitive Vue Framework.

Home Page:https://nuxt.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Selective client in a v-for generates many client component references

Rigo-m opened this issue · comments

Environment

  • Operating System: Darwin
  • Node Version: v20.12.2
  • Nuxt Version: 3.11.2
  • CLI Version: 3.11.1
  • Nitro Version: 2.9.6
  • Package Manager: bun@1.1.7
  • Builder: -
  • User Config: devtools, experimental
  • Runtime Modules: -
  • Build Modules: -

Reproduction

https://github.com/Rigo-m/nuxt-selective-client-bug

Describe the bug

image
Cycling through a server component which contains a client component selectively hydrated breaks the page in the way which is shown above.
The moveTeleport function fails with this error:
Uncaught (in promise) TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.

@huang-julien any idea on what's happening here?

Additional context

No response

Logs

No response

Describe the bug

I think i have a very similar issue when rendering multiple server components at once like this:

<div class="flex flex-col gap-2">
  <CatGenerator />
  <CatGenerator />
</div>

Reproduction

https://github.com/Ev357/nuxt-selective-client-bug

Environment

  • Operating System: Ubuntu
  • Bun Version: 1.1.8
  • Nuxt Version: 3.11.2
  • CLI Version: 3.11.1
  • Nitro Version: 2.9.6
  • Package Manager: bun@1.1.8
  • User Config: devtools, experimental

@huang-julien why is this a minor bug? Is there a workaround?

@Rigo-m It is not only about the severity but also how many ppl are affected by the bug and if the related feature is experimental or not ☺️

@manniL makes sense now 💘 thanks Alex

Thx you all guys very much for the work ❤️❤️

Thx you all guys very much for the work ❤️❤️

💘