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.

Sign up for GitHub

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

Jump to bottom

Ignore hydration warning on script #12

Merged
merged 1 commit into from
Dec 27, 2022
Merged

Ignore hydration warning on script #12

merged 1 commit into from
Dec 27, 2022
+1 −0

Conversation

thebuilder
Copy link
Contributor

@thebuilder thebuilder commented Dec 26, 2022 •
edited
Loading

This is a temporary fix for #7
It adds the suppressHydrationWarning to the <script> block, so it doesn't report the minified code mismatch between client and server as an error.

Ideally it would be built in another way to avoid the mismatch - Maybe by hardcoding the string for the script HTML?

@vercel
Copy link

vercel bot commented Dec 26, 2022 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
react-wrap-balancer ✅ Ready (Inspect) Visit Preview Dec 26, 2022 at 10:54PM (UTC)

@shuding
Copy link
Owner

shuding commented Dec 26, 2022

Thanks! Although I'm wondering why there's the mismatch in the first place.

@thebuilder
Copy link
Contributor Author

thebuilder commented Dec 26, 2022 •
edited
Loading

It's caused by the bundler bundling the client and server script differently, so you end up with different names for the variables.

I suppose another solution would be to have the user inject the script once in the <head>, and reference it like

<script>if (typeof window.relayout !== 'undefined') window.relayout()</script>

@shuding
Copy link
Owner

shuding commented Dec 27, 2022

That's a good point, I think we can merge this fix first. Regarding reusing the definition, I think we can add a context or provider like API, to wrap your entire page, which injects the script tag. And all its children that receive the context don't have to inject the relayout definition again.

@shuding shuding merged commit d9545e8 into shuding:main Dec 27, 2022
@thebuilder thebuilder deleted the fix-script-ssr branch December 27, 2022 14:55
@thebuilder
Copy link
Contributor Author

That's a good point, I think we can merge this fix first. Regarding reusing the definition, I think we can add a context or provider like API, to wrap your entire page, which injects the script tag. And all its children that receive the context don't have to inject the relayout definition again.

But the reason for using the <script> in the first place, is the code should run before React is loaded, right? So adding it in a React context won't really help solve that.

@shuding shuding mentioned this pull request Dec 27, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@thebuilder @shuding