v3 prop className did not match warning in Next.js

[vaunus]

Hi. I am seeing a warning since upgrading to version 3 with the latest versions of Next.js and React:

Warning: Prop className did not match. Server: "css-1g6gooi" Client: "css-w8afj7-Input"

See this sandbox for my reproduction: https://codesandbox.io/s/helloworld-g1mb7

[tomlagier]

Same issue outside of Next.js, but when SSR'd. Using "react-select": "^3.0.4", getting the same error.

[ulysset]

Any news on this one? Could it be because of emotion?

[irvelervel]

Using Next.js and "react-select": "^3.0.4", getting the same error.

[iovoz]

Warning: Prop className did not match. Server: "css-1g6gooi" Client: "css-w8afj7-Input" warningWithoutStack @ react-dom.development.js:506

[z3niths]

I've experienced the same problem

[dicrescenzoa]

same problem here as well, any idea? 🤔

[boscomateo]

Same here

[maciejmatu]

I also have this issue. It seems that on the client the components have a different label configuration, because on the backend there is no -Input suffix. Is it possible that emotion uses some kind of an env variable to determine what label format to use? I tried setting different NODE_ENV but it doesn't seem to change anything :/

[maciejmatu]

Okay, I found out what is the problem! In package.json file of react-select package, there are those two fields:

Turns out that next.js selected different module types for different environments. It loaded react-select.cjs.js file for node and react-select.browser.esm.js for browser. I'm not exactly sure why the code in different modules resulted in different classNames (maybe it is connected to different env variables or something else, but I didn't investigate further).

For now the quick fix I found in this thread is to change the resolve field for webpack config to prioritize main field over module and browser when building a bundle.

example:

// next.config.js
module.exports = {
  webpack: config => {
    config.resolve.mainFields = ["main", "browser", "module"];
    return config;
  },
};

The downside is that it can break other packages that must prioritize module, but in my case (for now at least) it fixed this issue. It would be great if someone who understand the codebase further could look into this and help out a bit 😄

[AKharytonchyk]

Looks like disabling SSR for a particular component works. https://codesandbox.io/s/hello-world-gox8w

[gwyneplaine]

Okay, I found out what is the problem! In package.json file of react-select package, there are those two fields:

Turns out that next.js selected different module types for different environments. It loaded react-select.cjs.js file for node and react-select.browser.esm.js for browser. I'm not exactly sure why the code in different modules resulted in different classNames (maybe it is connected to different env variables or something else, but I didn't investigate further).

For now the quick fix I found in this thread is to change the resolve field for webpack config to prioritize main field over module and browser when building a bundle.

example:

// next.config.js
module.exports = {
  webpack: config => {
    config.resolve.mainFields = ["main", "browser", "module"];
    return config;
  },
};

The downside is that it can break other packages that must prioritize module, but in my case (for now at least) it fixed this issue. It would be great if someone who understand the codebase further could look into this and help out a bit 😄

thanks for the insight into the problem @maciejmatu, @mitchellhamilton any ideas on how to fix this issue for our next js users?

[emmatown]

Fixed this with an update to some regex in emotion. An example of it working by reinstalling react-select so the new version of emotion is used: https://codesandbox.io/s/hello-world-jtyix

[JStein92]

Fixed this with an update to some regex in emotion. An example of it working by reinstalling react-select so the new version of emotion is used: https://codesandbox.io/s/hello-world-jtyix

Still getting this error in 3.1.0

[ciruz]

I'm also experiencing the same error now with react-select 3.1.0 and the latest next.js version 9.4.4.

[RickyMarou]

Using react-select 3.1.0 in a react app that uses SSR (not using next.js but ssr custom made using @loadable and react-router) and still getting the error 😞 . I guess we will be disabling SSR for that component, which is an okay solution for us 🤷

[marklawlor]

Setting the inputId and instanceId props fixed the issue for me (you can see it demonstrated in the codesandbox by @mitchellhamilton).

It would be nice for this library to provide a ssr: true option that would automatically generate these values. Otherwise you can set them yourself either via

• Roll your own random generator
• https://github.com/thearnica/react-uid
• Wait for a potential official uid generator

[bladey]

Thanks for the feedback all, we'll look into this.

[MitchWeiss]

Hey @bladey, just wondering if you've had a chance to look into this by any chance?

[laleksiunas]

I can reproduce this hydration mismatch only on Safari browsers (both macOS and iOS) which is rather strange. Trace:

Warning: Prop `className` did not match. Server: "css-b8ldur-Input" Client: "css-19odofu-Promise"
    in div (created by Context.Consumer)
    in EmotionCssPropInternal (created by Input)
    in Input (created by Select)
    in div (created by Context.Consumer)
    in EmotionCssPropInternal (created by ValueContainer)

[Methuselah96]

~~I've started a fork of react-select. Feel free to resubmit this issue on the fork and/or submit a PR to resolve this issue on the fork and we can get it merged and released.~~

EDIT: :tada: I've archived the fork now that we've got some momentum in this repo and Jed is involved again. Sorry for the disturbance!

[mediabeastnz]

👀

[j-fan]

I am seeing this issue in react-select v4.1 with React SSR, but it is only affecting Safari. Does anyone have any insights on this? Here is a simple reproduction: https://codesandbox.io/s/react-ssr-bug-hfp29?file=/src/components/App.jsx

Warning: Prop `className` did not match. Server: "css-b8ldur-Input" Client: "css-1g6gooi"

[marklawlor]

I am seeing this issue in react-select v4.1 with React SSR, but it is only affecting Safari. Does anyone have any insights on this? Here is a simple reproduction: https://codesandbox.io/s/react-ssr-bug-hfp29?file=/src/components/App.jsx

Warning: Prop `className` did not match. Server: "css-b8ldur-Input" Client: "css-1g6gooi"

Have you tried setting both inputId and instanceId eg https://codesandbox.io/s/hello-world-jtyix

[ebonow]

Greetings @j-fan ,

Confirmed. I was able to replicate the bug, but only when using Safari browser.

@marklawlor - an instanceId was provided and adding an inputId did not impact the outcome.

I will open a bug report with Emotion and see if they might be able to identify the cause.

[everblaze]

any movement on this im use Remix and have this same issues, I have added instanceId and InputId but still have this error with SSR

Warning: Prop className did not match. Server: "css-b8ldur-Input"

[Methuselah96]

This seems like an issue that people keep running into. I'm planning to take a look at this as my next area of focus (along with https://github.com/JedWatson/react-select/issues/4088) to see what's going on and what we can do to resolve it. Thank you all for your patience.

[Methuselah96]

See https://github.com/emotion-js/emotion/issues/2255 for the latest on this. Since it's been confirmed that this is not a production-impacting issue (it's an erroneous console error for Safari in development only) I'm taking this off the 5.1 milestone. https://github.com/JedWatson/react-select/issues/4088 is more important and is where I'll focus my efforts.

[philipaarseth]

It's not really a fix, but you can wrap with a <ClientOnly> HOC such as this https://www.joshwcomeau.com/react/the-perils-of-rehydration/#abstractions

[shehi]

This problem is happening on Chrome and FF with NextJS, when component is SSR'ed.

[laleksiunas]

@shehi I think you are experiencing a different problem. Try setting an instanceId prop.