-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
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鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
Hydration errors when using @emotion/react within a design system library inside nextjs > 13.x (old page router) #3153
Comments
FWIW - I have also tested not dynamically creating the css inside of the Box component source, and instead simply applying a static css object of:
But this still creates a hydration error. So this leads me to believe that somehow there is a misconfiguration issue within emotion (either when i compile the DS library, or when i consume it inside of the demo stackblitz nextjs application) |
Have also tried to setup an emotion cache - in order to avoid hydration errors, with no luck. :( |
Could be related: #2926 |
How interesting. So I may have tracked down what is causing this issue. The FWIW - I've worked out that It's the
So it would seem that terser's mangle is doing something that does not quite agree with how |
Happy for you guys to close this issue out, if this is expected RE terser / mangle. |
Hey there! 馃憢
So I maintain a design system library (
@biom3/react
), which I have built atop of@emotion/react
(which is an amazing library, thank you kindly for maintaining it all these years!! 馃檹).Current behavior:
For the longest time, our library has been working flawlessly inside of nextjs (which is one of it's primary use-cases).
Lately I have noticed that with newer builds of nextjs (not using the new app router yet mind you), many of our simplest DS components (eg
<Box />
which essentially just renders a<div>
under the hood using{ jsx } from '@emotion/react'
) cause nextjs hydration errors - when they never used to.What's got me stumped, is inside the
<Box />
component src, i'm logging out the css object that's getting applied to the basic<div>
(as a css object) - its identical when logged out inside the nextjs server console, and inside the JS console. I don't understand why emotion is creating these styles twice, as 2 seperate style statements.Is there some sort of configuration thing that I am missing here?
I noticed that this nextjs docs page mentions that emotion compatibility is being worked on right now, but i understood that to mean with regard to the new app router - not the old page style router. Is that correct?
To reproduce:
Simply run this (very simple) stackblitz: https://stackblitz.com/edit/stackblitz-starters-xgouws?description=The%20React%20framework%20for%20production&file=pages%2Findex.tsx&title=Next.js%20Starter
note the hydration error:
Expected behavior:
There should be no hydration errors.
Environment information:
react
version: 18.2.0@emotion/react
version: 11.11.3The source for the simple
<Box />
component looks like:then the
cloneElementWithCssProp
function looks like:I wonder, could you help me understand what I might be able to do to resolve these hydration errors?
The text was updated successfully, but these errors were encountered: