Prop className did not match in development.

[mattcarlotta]

Bug report

I've built a package that composes styled components. If I inline the package and reference it locally within a project (~lib), no warnings are shown in development. If I utilize the same code from the npm package, then className mismatch warnings are thrown. This appears to only impact development as production builds don't display any FOUC.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Clone repo: cd ~/Desktop && git clone git@github.com:mattcarlotta/sc-prop-mistmatch.git (or download repo)
2. Change to project dir: cd sc-prop-mistmatch/
3. Install deps: yarn
4. Run project in dev: yarn dev
5. Visit http://localhost:3000
6. Open browser dev console
7. Click Go to Example button
8. Click Go home button
9. Refresh page
10. Warnings are thrown
11. Comment out <PackageComposedButton>Package (warning)</PackageComposedButton> within pages/index and repeat steps 7-9
12. No warnings are thrown
13. Build for production: yarn build && yarn start
14. Visit http://localhost:3000 (styles appear to be applied properly upon initial load, client-side navigation, and page refresh)

Expected behavior

No warnings are thrown in development.

System information

• OS: LMDE 4
• Version of Next.js: 9.5.2
• Version of Node.js: v10.22.0

Additional context

Not 100% sure if this is a Next issue or a styled-components issue.

Works fine in CSR apps:
https://vyzqr.csb.app/

Throws warnings in SSR apps (may require a few hard refreshes):
https://c3yb5.sse.codesandbox.io/

Cross referenced bug on styled-components: styled-components/styled-components#3238

[hannahla97]

Hi can I grab this issue? It seems it is some kind of issue that reactjs used to have

[machineghost]

This is still a major pain point (to anyone who doesn't want the "signal to noise ratio" of their console ruined by false warnings, at least).

To add a few details, the issue only seems to occur when the styled component uses props inside the styling, eg.

const Foo = styled.div`${props => props.addStyle ? 'font-weight:bold' : ''}`;

Patching _document.js doesn't help and adding the babel plugin doesn't help (even though both those are listed as "solutions" in other threads/articles).

Finally, it's not all of the Styled Components-generated class names that are off: the dev-environment-generated ones remain the same on both server and client. For instance, if I have a styled component called Bar, inside a Foo component, the server will generate (say) Foo__Bar-bwb5d8-3 blELKo. The client will instead generate Foo__Bar-bwb5d8-3 dcfbUr.

Thus, it very much seems that everything is working together perfectly ... except that Styled Components on the server and on the client are using a different "seed" for generating their (real) class names.

[amponsah]

Hi,

I'm having the same issue but I'm using Ant Design not styled component.

react-dom.development.js?61bb:67 Warning: Prop className did not match. Server: "ant-select-selection-placeholder" Client:

I've also been looking for days for a solution. All the threads on this issue seem to be focused on styled-components!! Can any point me to an explanation of why this happens?

I have a 6 page multi-step form and everything is working fine as long as I navigate to pages/steps using next/router but I've built in a persistent state using localstorage. I only get this error only when I manually refresh the page and it also causes the page to misrender... for example, with form dropdowns, it renders the select defaultValue text as placeholder text!

Setup...

next.config.js

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer();

.babelrc

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "libraryDirectory": "lib",
        "style": "index.css",
        "ssr": true,
        "preprocess": false
      }
    ],
    [
      "import",
      {
        "libraryName": "@ant-design/icons",
        "libraryDirectory": "lib/icons",
        "camel2DashComponentName": false
      },
      "@ant-design/icons"
    ]
  ]
}

package.json

"antd": "^4.14.0",
"next": "10.0.9",

_app.js

import { ApolloProvider } from '@apollo/client';
import withData from '../lib/withData';
import { useReducer } from 'react';
import { Context, reducer, initialProgramState } from './../store';

import 'antd/dist/antd.css';
import '../styles/vars.css';
import '../styles/global.css';
import '../styles/theme.scss';

const MyApp = ({ Component, pageProps, apollo }) => {
  const [pState, dispatch] = useReducer(reducer, initialProgramState);
  return (
    <ApolloProvider client={apollo}>
      <Context.Provider value={{ pState, dispatch }}>
        <Component {...pageProps} />
      </Context.Provider>
    </ApolloProvider>
  );
};
export default withData(MyApp);

Any help will be appreciated, Thanks

[Jerome1337]

Seems to have the same issue using Material-ui.

Error come from 10.2.1-canary.3 release (not fixed in new releases)

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.