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

Attempt to debug hydration error #1295

Closed
wants to merge 11 commits into from
Closed

Conversation

jplhomer
Copy link
Contributor

@jplhomer jplhomer commented May 17, 2022

To reproduce errors:

yarn
yarn dev

# In a separate tab:
cd templates/template-hydrogen-hello-world && yarn dev

See #920

Notes:

  • From what I've deduced, we seem to be able to reproduce a hydration error when a new client component reference is streamed in as the result of a suspended component, meaning the client has to re-suspend in order to dynamically fetch the JS module.
  • I can "fix" the issue by wrapping the host of the new client component in an additional Suspense boundary, but this does not seem like the expected behavior.
  • Updated to the React build from this PR: Do not replay erroring beginWork with invokeGuardedCallback when suspended or previously errored facebook/react#24480
  • Also updated to a more recent version of Flight for our Vite plugin, but that doesn't seem to have an impact

@github-actions github-actions bot had a problem deploying to preview May 17, 2022 21:30 Failure
<Cart />
</Suspense>
{/* <Header collections={collections} storeName={storeName} /> */}
<Button label="Hello"></Button>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that the inclusion of any client component which renders HTML, and which needs to load via dynamic import causing suspension, will result in a hydration mismatch error. If you comment out this Button component, other client components are still dynamically imported but do not result in a hydration mismatch.

@github-actions github-actions bot had a problem deploying to preview May 17, 2022 21:38 Failure
@github-actions github-actions bot had a problem deploying to preview May 18, 2022 15:32 Failure
@jplhomer jplhomer changed the title Jl debug hydration Attempt to debug hydration error May 18, 2022
@jplhomer jplhomer closed this May 25, 2022
@jplhomer jplhomer deleted the jl-debug-hydration branch May 25, 2022 21:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant