Console error: Prop className did not match

[ebonow]

Greetings,

The following error shows up but only when using Safari browser (not able to reproduce on Chrome)

Warning: Prop `className` did not match. Server: "css-b8ldur-Input" Client: "css-19odofu-Promise"

React: 16.8.6
React-select: v4.1
@emotion/cache: "^11.0.0"
@emotion/react: "^11.1.1"

Mac OSX Safari v: 13.1.3

Code sandbox with reproducible error:
https://codesandbox.io/s/react-ssr-bug-hfp29?file=/src/components/App.jsx

First reported here: JedWatson/react-select#3590 (comment)

[ebonow]

Greetings, just a friendly ping to see if there might be any leads as to why Safari might be causing different behavior for something like this?

[Methuselah96]

I was able to narrow down the problem a little bit. This is related to #1462 (and likely the issue described here).

The code in question is

emotion/packages/react/src/emotion-element.js

Lines 40 to 55 in 676a926

	if (process.env.NODE_ENV !== 'production') {
	const error = new Error()
	if (error.stack) {
	// chrome
	let match = error.stack.match(
	/at (?:Object\.|Module\.|)(?:jsx|createEmotionProps).*\n\s+at (?:Object\.|)([A-Z][A-Za-z0-9$]+) /
	)
	if (!match) {
	// safari and firefox
	match = error.stack.match(/.*\n([A-Z][A-Za-z0-9$]+)@/)
	}
	if (match) {
	newProps[labelPropName] = sanitizeIdentifier(match[1])
	}
	}
	}

The issue seems to be that on Safari the name of the component is not present in the stack trace. Here are the relevant snippets from example stack traces:

Chrome:

Error
    at createEmotionProps (emotion-element-99289b21.browser.esm.js:125)
    at jsx (emotion-react.browser.esm.js:100)
    at SelectContainer (index-4bd03571.esm.js:834)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at beginWork$1 (react-dom.development.js:23940)
    ...

Firefox:

createEmotionProps@http://localhost:3000/_next/static/chunks/pages/index.js?ts=1631414103915:1170:17
jsx@http://localhost:3000/_next/static/chunks/pages/index.js?ts=1631414103915:1382:105
SelectContainer@http://localhost:3000/_next/static/chunks/pages/index.js?ts=1631414103915:61128:62
renderWithHooks@http://localhost:3000/_next/static/chunks/main.js?ts=1631414103915:32827:27
mountIndeterminateComponent@http://localhost:3000/_next/static/chunks/main.js?ts=1631414103915:35653:13
beginWork@http://localhost:3000/_next/static/chunks/main.js?ts=1631414103915:36891:16
beginWork$1@http://localhost:3000/_next/static/chunks/main.js?ts=1631414103915:41777:14
...

Safari:

createEmotionProps@http://localhost:3000/_next/static/chunks/pages/index.js?ts=1631414130820:1170:26
jsx@http://localhost:3000/_next/static/chunks/pages/index.js?ts=1631414130820:1382:105
renderWithHooks@http://localhost:3000/_next/static/chunks/main.js?ts=1631414130820:32827:27
mountIndeterminateComponent@http://localhost:3000/_next/static/chunks/main.js?ts=1631414130820:35653:28
beginWork$1@http://localhost:3000/_next/static/chunks/main.js?ts=1631414130820:41777:23
...

The CodeSandbox provided in the original description still reproduces this issue. Additionally, here's a Next.js repo that also exhibits the problem: https://github.com/Methuselah96/nextjs-blog

@Andarist Can your provide input on whether there are any potential solutions or workarounds we can pursue or if there is a plan to get this resolved? This is impacting quite a few people using react-select (JedWatson/react-select#3590, JedWatson/react-select#4706, JedWatson/react-select#3124, etc.). Let me know if there’s any other information I can provide. Thanks!

[Methuselah96]

Looks like #2134, #2136, and #2226 are related to the same area of code.

[Andarist]

@Methuselah96 I would accept a PR removing this code temporarily, It would be also great if we could gather example stack traces from different browsers so we could write tests for this label extraction.

There is some code in React which does a similar thing - we might want to take a look at this to see if we could leverage a similar logic: https://github.com/facebook/react/pull/18561/files#diff-116ca25b733347b0a69576d788fdad10eb9e5d118a7f26f0cbd0afb2eedb2bfdR31

[shobhitsharma]

@Andarist @Methuselah96 Is there a working solution, it throws these warning in firefox and safari for me. Chrome works fine.

[baxri]

Any solution for this problem? @Andarist @Methuselah96 @srmagura

[srmagura]

@baxri I fixed some edge cases in that PR but sadly there may still be class name mismatches in Safari. I will add a comment to #2534 regarding this.

[quinn]

I get this error in Firefox on Ubuntu, while using react-select: JedWatson/react-select#3590