[WNMGDS-3077] Fix wrong Storybook iframes loading on doc site #3357
+30
−25
Conversation
This file contains 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
This is the same workaround that we used in [#2962](https://github.com/CMSgov/design-system/pull/2962/files). To reproduce the original issue on the main branch: 1. `yarn build:docs` 2. `yarn serve:docs` 3. Navigate to http://localhost:9000/components/alert/?theme=medicare 4. Take a look at the first storybook example. Notice that even though this is the Medicare theme, it shows the info alert of the core theme. If you inspect the iframe in the page, you'll notice its url is wrong. It's pointing to the core theme in Storybook even though the client-side JavaScript that loads knows the correct theme and url to load. It's that Gatsby doesn't correctly reconcile the statically generated HTML with the new HTML being rendered in the client.
pwolfert
added
Type: Fixed
pwolfert
requested review from
kim-cmsds,
tamara-corbalt and
jack-ryan-nava-pbc
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary
Apply the client-side-only fix to story iframes to fix rehydration issue. This is the same workaround that we used in #2962. Making it client-side only means there is no mismatched HTML for Gatsby to try to reconcile, so it'll always show the right one. There's really no reason to pre-render that component anyway.
Unfortunately this fix does not retroactively fix earlier versions of the doc site, so if we want to fix older archived versions, we have to go back and apply the fix to those versions and redeploy.
How to test
To reproduce the original issue on the main branch:
yarn build:docsyarn serve:docsChecklist
[WNMGDS-####] Titleor [NO-TICKET] if this is unticketed work.Type(only one) label for this PR, if it is a breaking change, label should only beType: BreakingImpacts, multiple can be selected.