NuxtClientFallback renders fallback for all components if one failed, after hydration

timhn-bm commented 1 month ago

Environment

Operating System: Linux
Node Version: v20.11.1
Nuxt Version: 3.10.3
CLI Version: 3.12.0
Nitro Version: 2.9.7
Package Manager: yarn@4.2.1
Builder: -
User Config: devtools, experimental
Runtime Modules: -
Build Modules: -

Reproduction

https://github.com/timhn-bm/nuxt-client-fallback-errors

I've added 2 pages

/works - not using the ErrorBoundary wrapper: it behaves correctly :heavy_check_mark:
/bugs - using the ErrorBoundary wrapper: it reproduces the bug :red_circle:

Describe the bug

When building a wrapper around NuxtClientFallback and using it is used in multiple places on one page, given that one wrapped component throws an error, then all instances of NuxtClientFallback will display the fallback slot only after hydration

Additional context

I want to build a wrapper component around NuxtClientFallback.

The wrapper - let's call it ErrorBoundary - can look like this in its simplest form

<template>
  <NuxtClientFallback :keep-fallback="true">
    <slot> </slot>

    <template #fallback>
      <div style="background: red; color: white; padding: 10px">
        <slot name="error"> </slot>
      </div>
    </template>
  </NuxtClientFallback>
</template>

If I create a page with the following template: A B and C are wrapped by my custom ErrorBoundary.

If A throws an error -> after hydration, then the error slot will also by displayed for B and C

<template>
  <div >
    <ErrorBoundary>
      <A /> --> only A will throw an error 
      <template #error> an error occurred in A </template>
    </ErrorBoundary>

    <ErrorBoundary>
      <B />
      <template #error> an error occurred in B </template>
    </ErrorBoundary>

    <ErrorBoundary>
      <C />
      <template #error>
        <div>an error occurred in C</div>
      </template>
    </ErrorBoundary>
  </div>
</template>

The very weird this, is that if I use directly NuxtClientFallback instead of my wrapper ErrorBoundary, then everything behaves as expected.

Thanks for your help in advance !

Logs

No response

huang-julien commented 1 month ago

Hey :wave: thanks for opening the issue !

You repo seems to be private, you can also use stackblitz to avoid having to create a repo in your gh

github-actions[bot] commented 1 month ago

Would you be able to provide a reproduction? 🙏

More info

### Why do I need to provide a reproduction? Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making. ### What will happen? If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritize it based on its severity and how many people we think it might affect. If `needs reproduction` labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it. ### How can I create a reproduction? We have a couple of templates for starting with a minimal reproduction: 👉 https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz 👉 https://codesandbox.io/s/github/nuxt/starter/v3-codesandbox A public GitHub repository is also perfect. 👌 Please ensure that the reproduction is as **minimal** as possible. See more details [in our guide](https://nuxt.com/docs/community/reporting-bugs/#create-a-minimal-reproduction). You might also find these other articles interesting and/or helpful: - [The Importance of Reproductions](https://antfu.me/posts/why-reproductions-are-required) - [How to Generate a Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/minimal-reproducible-example)

timhn-bm commented 1 month ago

Sorry, I had missed your message @huang-julien !

I just changed it to public. Weirdly, I had issues creating a reproducible stackblitz :/ Let me know if you prefer me to create a StackBlitz instead of a git repo before looking into this, thanks :)

linpengteng commented 3 weeks ago

I also encountered the same problem

nuxt / nuxt