Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: v7_partialHydration with lazy routes result in empty route #11120

Closed
lasseklovstad opened this issue Dec 15, 2023 · 4 comments · Fixed by #11121
Closed

[Bug]: v7_partialHydration with lazy routes result in empty route #11120

lasseklovstad opened this issue Dec 15, 2023 · 4 comments · Fixed by #11121
Labels

Comments

@lasseklovstad
Copy link

What version of React Router are you using?

6.21.0

Steps to Reproduce

  1. Create a new router with RouterProvider
  2. Add a lazy route
  3. Add feature flag v7_partialHydration=true
let router = createBrowserRouter(
  [
    {
      path: '/',
      lazy: () => import('./test'),
    },
  ],
  { future: { v7_partialHydration: true } }
);

export default function App() {
  return <RouterProvider router={router} />;
}

// test.tsx
export const Component = () => {
  return <div>Hello, I am lazy</div>;
};

Reproduction:
https://stackblitz.com/edit/github-bzxwek?file=src%2Fapp.tsx

Expected Behavior

As of my understanding feature flags is the default behavior in the next version so I want to set this flag to true even though this feature (partial hydration) should only apply to server rendered apps?

Anyways, when setting this flag to true it is expected not to break lazy routes.

Actual Behavior

lazy route is not rendered and warning in console: Matched leaf route at location "/" does not have an element or Component. This means it will render an with a null value by default resulting in an "empty" page.

@brophdawg11
Copy link
Contributor

brophdawg11 commented Dec 15, 2023

I want to set this flag to true even though this feature (partial hydration) should only apply to server rendered apps

Yep! That's right - this is definitely a bug as lazy routes should work fine in SPA's with partialHydration specified. Also worth noting, if you previously had a fallbackElement, you'd want to move that to a HydrateFallback/hydrateFallbackElement on a root route (or deeper if you wish). HydrateFallback is basically a more powerful fallbackElement since it can be specified at any level of the tree.

@brophdawg11
Copy link
Contributor

This is fixed in #11121 and will be available in the next release 👍

@brophdawg11 brophdawg11 added the awaiting release This issue have been fixed and will be released soon label Dec 18, 2023
@brophdawg11 brophdawg11 removed their assignment Dec 18, 2023
Copy link
Contributor

🤖 Hello there,

We just published version 6.21.1-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

Copy link
Contributor

🤖 Hello there,

We just published version 6.21.1 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

@brophdawg11 brophdawg11 removed the awaiting release This issue have been fixed and will be released soon label Dec 22, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants