Safari Specific className Mismatch Bug

[jeffscottward]

Describe the bug In safari only, there is an issue with client/server css name mismatches.

[Error] Warning: Prop `className` did not match. Server: "css-18mthy6-Layout" Client: "css-qul8w7-Promise"
div
Styled(div)
EmotionCssPropInternal
main
Styled(div)
Container
Layout
Home
MDXProvider
MDXProvider
ColorModeProvider
BaseProvider
ThemeProvider
ThemeProvider
MyApp
PureComponent
ReactDevOverlay
_classCallCheck
AppContainer
Root
	printWarning (react-dom.development.js:67)
	error (react-dom.development.js:43)
	warnForPropDifference (react-dom.development.js:8824)
	diffHydratedProperties (react-dom.development.js:9645)
	prepareToHydrateHostInstance (react-dom.development.js:14616)
	completeWork (react-dom.development.js:19458)
	completeUnitOfWork (react-dom.development.js:22810)
	performUnitOfWork (react-dom.development.js:22782)
	workLoopSync (react-dom.development.js:22702)
	renderRootSync (react-dom.development.js:22665)
	performSyncWorkOnRoot (react-dom.development.js:22288)
	scheduleUpdateOnFiber (react-dom.development.js:21876)
	updateContainer (react-dom.development.js:25477)
	(anonymous function) (react-dom.development.js:26016)
	unbatchedUpdates (react-dom.development.js:22426)
	legacyRenderSubtreeIntoContainer (react-dom.development.js:26015)
	renderReactElement (index.js:586)
	doRender (index.js:761)
	tryCatch (runtime.js:63)
	invoke (runtime.js:293)
	asyncGeneratorStep (asyncToGenerator.js:3)
	_next (asyncToGenerator.js:25)
	(anonymous function) (asyncToGenerator.js:32)
	Promise
	(anonymous function) (asyncToGenerator.js:21)
	(anonymous function) (next-dev.js:94)
	(anonymous function) (fouc.js:16)	
	

To Reproduce I have verified this in a very slim repo. Please clone and run here and look at the logs in safari. https://github.com/jeffscottward/safari-bug

Expected behavior Not to error

Screenshots

[shuyang0129]

I have the same issue

[hasparus]

I won't have access to a MacOS for a while. Does this lead to any visible bug, or is it just a warning? (I guess I'm asking if you could slap suppressHydrationWarning there for a moment?)

@lachlanjc have you encountered this problem?

[fcisio]

@hasparus I'm working on MacOS, and I've had this error consistently for a while. It does seem to be a rehydration warning, and for me only occurs in development; It doesn't carry to production.

But I do get this warning consistently across most browsers.

It also doesn't cause any actual bug that I was able to notice.

Usually, manually refreshing the page removes the warning. My guess is that HMR is somehow to blame here.