Hydration Error | Next.js | Page 1

oblique summit Mar 27, 2023, 11:14 PM

#

I'm trying to fix a hydration error related to styled-components for several WEEKS now and i'm going crazy trying to fix it. Any help would be very appreciated.

#

Error:

client.js?2c51:1 Warning: Prop `className` did not match. Server: "sc-doURgb hcoEOi" Client: "sc-bXZKia ldgBsQ"
    at div
    at O (webpack-internal:///../../../node_modules/styled-components/dist/styled-components.browser.esm.js:29:22518)
    at HomePage
    at NestedLayoutChecker (webpack-internal:///./src/components/NestedLayoutChecker.tsx:12:27)
    at SduiProvider (webpack-internal:///../../utils/sdui-react/dist/providers/SduiProvider.js:29:25)
    at ErrorBoundary (webpack-internal:///../../components/atoms/dist/components/ErrorBoundary.js:15:9)
    at SessionProvider (webpack-internal:///../../../node_modules/next-auth/react/index.js:454:24)
    at Ke (webpack-internal:///../../../node_modules/styled-components/dist/styled-components.browser.esm.js:29:19923)
    at ThemeProvider (webpack-internal:///../../../node_modules/@accolade/design-system-react/dist/mjs/styles/ThemeProvider.js:24:26)
    at App (webpack-internal:///./src/pages/_app.tsx:73:28)
    at PathnameContextProviderAdapter (webpack-internal:///../../../node_modules/next/dist/shared/lib/router/adapters.js:100:27)
    at ErrorBoundary (webpack-internal:///../../../node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:303:63)
    at ReactDevOverlay (webpack-internal:///../../../node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:852:919)
    at Container (webpack-internal:///../../../node_modules/next/dist/client/index.js:75:9)
    at AppContainer (webpack-internal:///../../../node_modules/next/dist/client/index.js:218:26)
    at Root (webpack-internal:///../../../node_modules/next/dist/client/index.js:417:27) 

See more info here: https://nextjs.org/docs/messages/react-hydration-error

#

My setup:

monorepo via npm workspace with component packages (like atoms/molecules/organisms), as well as a nextjs app package.
My app is on the latest next/react/react-dom/styled-components (even 6.0.0-beta styled-components), no babel or webpack, so it should use swc compiler.
My component packages have a peer and dev dep on 6.0.0-beta of styled-components, they are built with typescript and distribute es modules
My app follows the example repo pretty closely: https://github.com/vercel/next.js/tree/canary/examples/with-styled-components by adding the compiler and modifying the _document.tsx file accordingly

#

Things i've tried:

Stripping out all my components to just a few basic elements to avoid improperly nested html
Using npm overrides to force react/react-dom/styled-components to be all the same version in my app pkg. This way there shouldn't be dupe versions of any pkg.
Removing type: "module", from my components package.json files
Cloning the example repo and adding my components as a dep (no hydration error in this pkg!)
Copying the example app into my mono repo (hydration error happens now for my components)
Removing my server.js app file
Copying the ts config from the example app

I'm probably forgetting a bunch of things i've tried... but at this point i've lost all my marbles. Please please please help lol

sharp valve Mar 28, 2023, 5:10 AM

#

what this tells me is that some combination of the following are likely:

you are calculating CSS styles conditionally with JS
you are getting a different result for this calculation on the server vs. on the browser.
- likely cause: your calculation depends on something only available on the client's browser, and you're using some fallback on the server but on the client you're not starting with the fallback, you're going straight to the real result

#

I have definitely been burned by this one, if this is what I think it is.

oblique summit Mar 28, 2023, 4:31 PM

#

Thanks for the response @sharp valve

I'm not sure i'm doing anything so complicated... I've tried to strip out as much as possible to get the bare minimum reproduction.

root

packages
- atoms
  - container.tsx -> export const Container = styled.div
- app
  next.config.js => follows the example repo and sets the compiler: { styledComponents: true }
  src/pages/_app.tsx => just renders the page
  src/pages/_document.tsx => follows the example repo exactly
  src/pages/index.tsx => just renders a few simple elements for testing:
  <Container>test</Container> - triggers hydration error
  <Button>styled component from external pkg</Button> - does not trigger hydration error

const TestInline = styled.div``;
...
return (<TestInline>test inline div</TestInline>); - does not trigger hydration error

So i dont think i'm calculating any css styled conditionally. nothing is dependent on the clients browser afaik.

sharp valve Mar 28, 2023, 4:38 PM

#

oh hm. I wonder if it has anything to do with how styled.div works under the hood

#

ah yep.

#

@oblique summit is the component that uses the styled.div marked as
'use client';
at the top?
(I assume you're using the new App Router)

oblique summit Mar 28, 2023, 4:42 PM

#

i haven't marked anything as use client 😦

sharp valve Mar 28, 2023, 4:42 PM

#

oblique summit Mar 28, 2023, 4:42 PM

#

as for new App Router i'm not sure how to know if i'm using it or not

#

oh interesting

sharp valve Mar 28, 2023, 4:43 PM

#

if your code is at

/app/page.tsx
and next.config has experimental app directory setting enabled

instead of
/pages/index.tsx

then you're using the new experimental app router

oblique summit Mar 28, 2023, 4:44 PM

#

i'm not using the app directory yet

sharp valve Mar 28, 2023, 4:44 PM

#

then I'm slightly confused thinkies

oblique summit Mar 28, 2023, 4:44 PM

#

welcome to my world

sharp valve Mar 28, 2023, 4:45 PM

#

the app router server components is where I've seen nearly all my hydration errors happen

#

I guess it's probably also possible if you got SSR or SSG going on in the pages. but I thought that styled.div was already figured out for the pages directory. hmm. I'll look into this more cuz I think it'll be good to know even tho I don't use styled components much myself

#

would you happen to have this minimal error reproduction here in a git repo?

oblique summit Mar 28, 2023, 4:48 PM

#

i dont 😦
My company has a private github :/

sharp valve Mar 28, 2023, 4:48 PM

#

oh nvm I didn't mean to ask for the actual code but yeah I can try to follow what you outlined earlier

oblique summit Mar 28, 2023, 4:48 PM

#

it might be quick to start with the styled-component nextjs example repo

#

throw that in a mono repo

#

add a components pkg

#

and try to import and render a component that is a styled.div

#

i can try to send you whatever you need

sharp valve Mar 28, 2023, 5:01 PM

#

it's kinda just working for me o.o

oblique summit Mar 28, 2023, 5:54 PM

#

yeah i was afraid of that

#

so i'm not sure what to do or what to try

sharp valve Mar 29, 2023, 2:08 AM

#

yeah idk, maybe I misunderstood something, but this is what I got
https://github.com/corscheid/with-styled-components-app

oblique summit Mar 29, 2023, 4:03 AM

#

ah, yeah so your set up isn't really a mono repo yet. you need a package.json in your /packages/atoms

#

and that would have to be compiled to a /dist folder

#

then you add a dep to that pkg in your app

#

and you import from that atom pkg

#

right now you have it just importing via a relative path directly to the file

#Hydration Error