Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

v5 client/server class names don't match using next.js

See original GitHub issue

System:

OS: macOS Sierra 10.12.6
CPU: (4) x64 Intel® Core™ i5-7267U CPU @ 3.10GHz
Memory: 127.02 MB / 8.00 GB
Shell: 5.2 - /bin/zsh

Binaries:

Node: 12.1.0 - /usr/local/bin/node
Yarn: 1.10.1 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman

npmPackages:

babel-plugin-styled-components: ^1.10.1 => 1.10.1
styled-components: ^5.0.0-beta.3 => 5.0.0-beta.3

Steps to reproduce

Here’s a simple sandbox to illustrate

https://codesandbox.io/s/styled-components-v5-issue-xggd1

Using v 4.3.1 there are no problems with classnames, in v5 there’s the error:

Warning: Prop className did not match. Server: “pages__TestDiv-sc-6et416-0” Client: “pages__TestDiv-sc-6et416-0 jFHMWg”

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:7 (5 by maintainers)

Top GitHub Comments

1reaction

kittencommented, Jun 19, 2019

I think this could be our isStatic optimisation that we disable when hot-module replacement/reloading is active. So I suppose this check could be causing it, since it wouldn’t trigger on the server-side necessarily:

https://github.com/styled-components/styled-components/blob/canary/packages/styled-components/src/models/ComponentStyle.js#L11-L12

@mxstbr @probablyup Maybe we should just always disable the isStatic optimisation in development, regardless of HMR.

0reactions

probablyupcommented, Jun 23, 2019

Awesome! I have one more patch I’m making to the babel plugin https://github.com/styled-components/babel-plugin-styled-components/pull/227 that handles a particular combo of syntaxes but will close this since as far as this lib is concerned it appears to be fixed 😃

Top Results From Across the Web

Prop className did not match. · Issue #7322 · vercel/next.js

It appears to be an issue that backend generates styled component but client doesn't get it/doesn't use it and instead of using server...

React + Material-UI - Warning: Prop className did not match

I had a problem with different classNames for client and server. I was using React, Material-UI, makeStyles and SSR (server-side rendering).

Frequently Asked Questions - Material UI

Prop className did not match. There is a class name mismatch between the client and the server. It might work for the first...

Setup Material UI With Next.js Typescript - YouTube

jsIn this video we will setup Material UI to work with Next. js Typescript project with client and server side rendering.Starter P...

Getting Started | Next.js

The interactive course with quizzes will guide you through everything you need ... (You don't need to create an empty directory. create-next-app will...