Next.js: React server mismatches: Prop `className` did not match.

Created on 2 Apr 2020 · 25Comments · Source: vercel/next.js

Bug report

Describe the bug

After upgrading from Next.js 9.0.5 to 9.2.2 we noticed that we are getting server mismatches for a lot of our components which never errored before. We also tried other versions (e.g. 9.1.x, 9.2.x, 9.3.x) and all of them have the same problem.

To Reproduce

Please use this repository with easy reproducible error - https://github.com/voronianski/nextjs-server-mismatch-bug

The code of the example component is open-source UI library and you can find it here - https://github.com/sumup-oss/circuit-ui/blob/canary/src/components/Hamburger/Hamburger.js

Screenshots

good first issue

Source

voronianski

👍6

Most helpful comment

I can confirm that with next 10 😢

gabsn on 29 Oct 2020

👍11 😕2

All 25 comments

This sounds like an issue with emotion in your library to me.

Obviously it's a different library, but I know styled components recommend including styled-components as a peer dependency for UI libraries like the one you're using in this project.

Styled-components, also needs babel-plugin-styled-components and a modification of _document.tsx to ensure consistent hashing of classNames between environments. Is there something similar you need to do here?

Sorry that's not a solution but maybe some helpful notes.

mulholio on 24 Apr 2020

Hi @mulholio,

Thank you for the suggestion. I've tried the recommend from styled component's document in circuit-ui but the mismatch error still shows up.

And I think emotion natures comes with SSR setting. Shouldn't need more setup to make the hash consistency.

Please correct me if I miss anything here.
Thanks!!

lucent1090 on 6 May 2020

👍2

Hi @all,
same problem on my site. Since 3 days i already stuck on this problem.

Packages

"next": "9.4.0",
"@types/styled-components": "4.4.3",
"babel-plugin-styled-components": "1.10.7",
"styled-components": "4.4.1",
..

Node 12.14.1

I see that some guys had the same problems before (https://github.com/zeit/next.js/issues/3706) and so i tried to solve my problems with the tips there. Nothing worked for me :(

Fails

Remove components where class is broken -> other component fails
Update/Upgraded styled-components packages
Update/Upgraded all packages
Change different options in Babel config ( used babel-plugin-styled-components with different settings)
try using nextjs dynamic import
changed also my _document like described here https://github.com/zeit/next.js/issues/3706#issuecomment-471891636

The errors occurs on dev env (yarn dev) in Chome dev console. If iam start my local prod env ( yarn build && yarn start )i see no error in Chrome dev console or server output log

kkis on 13 May 2020

@kkis Try to upgrade next to 9.4.0
They fixed it already 💪

barthicus on 13 May 2020

@barthicus Same prob

Bildschirmfoto 2020-05-13 um 12 43 31

kkis on 13 May 2020

👍1

@kkis Can you provide some codesandbox os smth similar so we can see the problem and try to fix it?
I'm not that familiar with next but I (or someone else here) can try to find a solution.

I'm using similar libs stack and this message is gone.
My packages:

"dependencies": {
    "@material-ui/core": "^4.9.14",
    "@material-ui/icons": "^4.9.1",
    "date-fns": "^2.13.0",
    "firebase": "^7.14.3",
    "next": "9.4.0",
    "notistack": "^0.9.13",
    "react": "^16.13.0",
    "react-animations": "^1.0.0",
    "react-dom": "^16.13.0",
    "react-firebase-hooks": "^2.1.1",
    "react-firebaseui": "^4.1.0",
    "styled-components": "^5.0.0"
  },
  "devDependencies": {
    "@types/firebase": "^3.2.1",
    "@types/node": "13.13.5",
    "@types/react": "16.9.35",
    "@types/react-dom": "16.9.8",
    "@types/styled-components": "5.1.0",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "babel-plugin-styled-components": "^1.10.0",
    "dotenv": "^8.2.0",
    "eslint": "^7.0.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-react": "^7.19.0",
    "eslint-plugin-react-hooks": "^4.0.1",
    "prettier": "^2.0.5",
    "typescript": "3.9.2"
  },

Ohh. Did you add this in _app.js/ts?

useEffect(() => {
    const jssStyles = document.querySelector('#jss-server-side')
    if (jssStyles && jssStyles.parentElement) {
      jssStyles.parentElement.removeChild(jssStyles)
    }
  }, [])

barthicus on 13 May 2020

@barthicus I also saw the solution with the useEffect(). The problem ist, that i have no server rendered code with "#jss-server-side" inside that can be removed...

I will see that i can provide some code on codesandbox.

kkis on 13 May 2020

@kkis Glad you made it!
Although I think we shouldn't use these kind of things to get rid of error messages.

I'm pretty sure this can be fixed implementing some other changes in _app/_doc files but I'm not that experienced to be 100% sure.

Happy coding 👍

barthicus on 14 May 2020

Hello, i still stuck on the problem, that in dev mode i see the error on initial page loading.
On prod mode i don't see

 next": "9.4.0",
"react": "16.13.0",
"babel-plugin-styled-components": "1.10.7",
"styled-components": "4.4.1",

import ...

const AppWrapper: FC = (props) => {
  const { children } = props

  return (
    <ThemeProvider theme={getTheme()}>
      <MessageProvider>
        <Layout cmsContent={appData}>
          <LocationTracker>{children}</LocationTracker>
        </Layout>
      </MessageProvider>
    </ThemeProvider>
  )
}

class App extends NextApp<{
  apolloClients: ApolloClients
  statusCode?: number
}> {
  render() {
    const {
      apolloClients,
      Component,
      pageProps,
      statusCode,
    } = this.props

    return (
      <ApolloClientProvider clients={apolloClients}>
        <Component statusCode={statusCode} {...pageProps} />
      </ApolloClientProvider>
    )
  }
}

dynamic import of themprovider doesn't work
babel changes ['styled-components', { ssr: true, displayName:true/false, preprocess:true/false }], doesnt work
nothing worked :(

kkis on 15 May 2020

@barthicus

@kkis Can you provide some codesandbox os smth similar so we can see the problem and try to fix it?

this repo with reproducible setup is available since bug is reported - https://github.com/voronianski/nextjs-server-mismatch-bug

I tried to upgrade to 9.4.0 but it didn't help.

What helped though is using completely ES5 transpiled version of the component - https://github.com/voronianski/nextjs-server-mismatch-bug/pull/1

Also using plain ESNext component fixes mismatches - https://github.com/voronianski/nextjs-server-mismatch-bug/pull/2

So something seems to be wrong with exported module versions of components - https://unpkg.com/@sumup/circuit [email protected]/lib/es/components/Hamburger/Hamburger.js

voronianski on 15 May 2020

@voronianski

Here is the Codesandbox example. (https://codesandbox.io/s/next-typescript-app-f2k0y)
(PS: The error does not appear every time in console)

index.tsx

import * as React from "react";
import styled from "../lib/styledComponents";

const Wrapper = styled.div`
  min-height: 100vh;
`;

export default function IndexPage() {
  return <Wrapper>WrapperContent2</Wrapper>;
}

lib/styledComponents.tsx

import * as styledComponents from "styled-components";
import { ThemedStyledComponentsModule } from "styled-components";

import { Theme } from "./defaultTheme";

const {
  default: styled,
  css,
  createGlobalStyle,
  ThemeProvider,
  ThemeConsumer,
  keyframes
} = (styledComponents as any) as ThemedStyledComponentsModule<Theme>;

export {
  css,
  createGlobalStyle,
  keyframes,
  ThemeProvider,
  ThemeConsumer,
  Theme
};

export default styled;

lib/defaultTheme.tsx

export const defaultTheme = {
  backgroundColor: "#ffffff",
  borderRadius: "5px",
  breakpoints: ["576px", "768px", "992px"],
  color: "#666666"
};

export type Theme = Readonly<typeof defaultTheme>;
export const Theme = defaultTheme;
export default defaultTheme as Theme;

You can see that the error appear when i use custom theming. I would be really appreciate if someone knows how to solve the problem.

UPDATE
What fixed the problem ? Don't import styled from custom theme!

Create a file styled.d.ts

import {} from 'styled-components'
import { theme } from './utils/theme'

declare module 'styled-components' {
  type Theme = typeof theme
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  export interface DefaultTheme extends Theme {}
}

and import styled from styled-components in your components

kkis on 26 May 2020

This appears for me as well. I've used the _document.js from next examples as well as updated babel rc. Next version is 9.4.0

rakeshshubhu on 30 May 2020

Same problem here, trying to use styled(ExternalComponent) mismatches classes.
Next version 9.4.4
Styled-components version 5.1.1
babel-plugin-styled-components version 1.10.7

KyorCode on 16 Jun 2020

I am using 9.50 and ThemeUI and am also getting this.

No matter how many elements I remove -(as long as there is even just one element in the tree) - I get the error.

What is strange is that this error doesn't show up in Blink based browsers but does show up everywhere else like Safari, Firefox, etc

ThemeUI sits ontop of Emotion - could be an Emotion problem too. Just adding my experience here

Screen Shot 2020-07-30 at 2 17 29 PM

jeffscottward on 30 Jul 2020

Same problem here, trying to use styled(ExternalComponent) mismatches classes.

Similar issue and @KyorCode's comment was my problem. I just had to convert all const StyledComponent = styled(Component) to be const StyledComponent = styled.[html-element-goes-here]... for each "offending" component.

Total speculation, but maybe it's that the server and client can't rectify some type of ambiguity with styled(Component), which is made to inherit classes of another styled component.

jflayhart on 2 Aug 2020

9.5.2, bug is still present

kolnogorov on 6 Oct 2020

😕1

Also 9.5.3 has the same bug

serkanz on 13 Oct 2020

9.5.5, bug still persist, it doesn't affect the application much but the client side always fire this warning.

dopt on 25 Oct 2020

Version 10 and the problem still persists

LuizHAP on 28 Oct 2020

I can confirm that with next 10 😢

gabsn on 29 Oct 2020

👍11 😕2

This has been reported in April and still no fix in November?!

siulca on 5 Nov 2020

This has been reported in April and still no fix in November?!

This is not a bug in Next.js. You're likely using a css-in-js library that is not pre-rendering styles correctly (or not pre-rendering at all) which causes a hydration mismatch given the pre-rendered markup would not match the markup generated client-side.