Console error: Prop `className` did not match

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: https://github.com/JedWatson/react-select/issues/3590#issuecomment-777972174

[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

[Methuselah96]

I was able to narrow down the problem a little bit. This is related to https://github.com/emotion-js/emotion/issues/1462 (and likely the issue described here).

The code in question is https://github.com/emotion-js/emotion/blob/676a92631ef9c35cfd9f8660cce58aa0f7781528/packages/react/src/emotion-element.js#L40-L55

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 (https://github.com/JedWatson/react-select/issues/3590, https://github.com/JedWatson/react-select/issues/4706, https://github.com/JedWatson/react-select/issues/3124, etc.). Let me know if there’s any other information I can provide. Thanks!