Next.js Discord

Discord Forum

nextjs v13.4.9 styled-components hydration from SSR happens on the 2nd render causing a false error

Answered
American Sable posted this in #help-forum
Open in Discord
American SableOP
I have the standard setup with _document from https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/pages/_document.tsx and the SSR option enabled with some additional properties using SWC

compiler: {
    styledComponents: {
      ssr: true,
      displayName: true,
      topLevelImportPaths: [
        "@some/nice",
        "@libraries/for/ui"
      ]
    }
  }


What happens:
1. Server renders and injects the styles
2. Hydration check happens on the client
3. Client hydrates styles from server

Expected Result:
Everyone is happy

Actual result:
I get following error, despite DOM matching identically to server styles, and the styles from client error don't actually exist styles__Logo-sc-88e000a4-0 gdLZhk in DOM 🤔 
Warning: Prop `className` did not match. Server: "styles__Logo-sc-f32ddbe4-0 czqkys" Client: "styles__Logo-sc-88e000a4-0 gdLZhk"
Answered by American Sable
To solve this I had to:
* apply styled-component parser on all other packages used in the project via swc-loader
* make all styled re-exports absolute
* add all topLevelImportPaths used in the project and packages
View full answer

1 Reply

American SableOP
To solve this I had to:
* apply styled-component parser on all other packages used in the project via swc-loader
* make all styled re-exports absolute
* add all topLevelImportPaths used in the project and packages
Answer