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.

Safari and ios bug with Next.js: Warning: Prop `className` did not match. Server: ...

See original GitHub issue

Safari and ios bug: Warning: Prop `className` did not match. Server: …

This is very strange, the page performs well on chrome, but on Safari and all browsers (even chrome) under ios have lost some css. The error message is：Warning: Prop className did not match. Server: …

Expected Behavior 🤔

ios platfrom and safari work success.

Current Behavior 😯

on Chrome: 2019-01-12 5 27 02

on Safafi: 2019-01-12 5 27 46

Env

macOS: mojava nextjs: latest material-ui: latest

Issue Analytics

State:
Created 5 years ago
Comments:18 (8 by maintainers)

Top GitHub Comments

1reaction

killianhuyghecommented, Jun 20, 2020

Just had this issue and I can confirm it was due to duplicate property names in my style object (passed to makeStyles) as mentioned by @kof .

I didn’t notice it easily because I had many different properties:

{
  a: ...
  b: ...
  c: ...
  ...
  a: ...
}

Not sure why this happens, but on Safari, it looks like the duplicate property increments the jss numbering, making every style number off by one (.jss1 becomes .jss2 and so on). This completely breaks the style of the component.

1reaction

oliviertassinaricommented, Feb 7, 2019

@jimmiebtlr Have a look at our next.js examples. They should be free from this issue.