fix(proxy): allow manual injection of bootstrap script to prevent hydration mismatches #33295
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ration mismatches Injects Cypress bootstrap code into a developer-provided <script data-cy-bootstrap> tag if present. This allows developers to add attributes like suppressHydrationWarning to the script tag to prevent React hydration mismatches.
|
|
Collaborator
|
Author
|
I consider this a fix, but I understand it could be treated as a feature and can reword it if needed. |
Member
|
Thanks for the contribution Marc! The tests appear to be passing. We do intend to review this and the docs PR. It's a clever idea, we're thinking through if there are scenarios this may cause other issues or not. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes: #27204
Closes: #31447
Additional details
This PR introduces a mechanism to allow developers to manually inject the Cypress bootstrap script by placing a
<script data-cy-bootstrap>tag in their HTML (e.g., inlayout.tsxfor Next.js).Why was this change necessary?
React frameworks (like Next.js app dir) throw hydration mismatches if the server-rendered HTML structure differs from the client-side structure. Cypress's automatic injection of the bootstrap script into
<head>causes this mismatch because the React client bundle doesn't expect that script tag. Allowing developers to manually add the script enable them to leverage the React special suppressHydrationWarning attribute that instruct React to ignore hydration mismatch caused by the bootstrap script.What is affected by this change?
packages/proxy: Therewriterlogic now looks for thedata-cy-bootstrapmarker.<script>tag in<head>).nonceif a CSP is active, as before.idordata-*), as before.Implementation details:
htmlfunction inrewriter.tsto regex match<script ... data-cy-bootstrap ...>.nonceattribute is appended if missing.Steps to test
<script data-cy-bootstrap suppressHydrationWarning>/* placeholder */</script>to root layout.How has the user experience changed?
Before: Users on Next.js 13+/React-Router 7 see "Hydration failed" errors in the console during tests.
After: Users can add a specifically marked script tag to their app to eliminate these errors.
PR Tasks
cypress-documentation? docs: add SSR & Hydration guide for data-cy-bootstrap feature cypress-documentation#6359type definitions?N/A