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: 🎉 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

[Methuselah96]

See emotion-js/emotion#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. #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.

[jakexconniff]

Having this same issue with Remix, React-Select v5.2.2 on Google Chrome, so it is definitely not Safari. I have set inputId and instanceId.

react-dom.development.js:67 Warning: Prop `className` did not match. Server: " css-6j8wv5-Input" Client: " css-ujecln-Input2"

is what the error message switches to once I add instanceId.

[jdnichollsc]

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

But what happen if I want to have different classes using SSR? I mean, I'm adding classes using Media Queries with react-responsive package but I don't see a good alternative to know that info from server side (I'm using RemixJS) 🤔

[richpixel]

I was hoping that setting prop classNamePrefix would dismiss the warning, but it looks like it still generates a uid for Input:

Warning: Prop className did not match. Server: "tags-select__input-container css-6j8wv5-Input" Client: "tags-select__input-container css-ujecln-Input2"

[NiklasAbrahamsson]

Sadly I am having this issue as well and since there doesn't seem to be a viable fix for it yet, i will go with the soultions for now. Will have to come back to this later.

[NedelinaN]

I get this warning on the latest version of Chrome on MacOS at react 18.2

[tyteen4a03]

Same issue here with Remix.

[pogran]

I think its the best resolution for now

if (!isMounted) { return <></>; }

[EvgeniyBudaev]

Fix in Remix.js

import { useHydrated } from 'remix-utils'; 
const isHydrated = useHydrated();  
isHydrated ? <Select /> : null;  

Fix in Next.js and React.js

import { useEffect, useState } from "react";

export const useMounted = (): { hasMounted: boolean } => {
  const [hasMounted, setHasMounted] = useState(false);
  useEffect(() => {
    setHasMounted(true);
  }, []);
  return { hasMounted };
};

const { hasMounted } = useMounted();

hasMounted ? <Select /> : null;

[phifa]

@EvgeniyBudaev the thing is, this causes a layout shift. Is it not possible to server side render react-select?

[EvgeniyBudaev]

@phifa Layout shift due to nulls. This is just an example. Instead of nulls, there can be an element with the same dimensions as select. I didn't make the example complicated. The main idea in solving the problem of server and client hydration.

[phifa]

@EvgeniyBudaev Yeah i know, my question is, can the component simply not render on the server?

[nick-bigger]

hey all, is there any movement on this issue ? I don't see any truly viable solution here - we have tons of ReactSelects across our application - is the only solution to wrap all of them in a conditional ? Not only is this tedious and poor DX, it means the initial server code will be missing all of the inputs and then they'll all suddenly pop in.

[cluk3]

It happens the same to me using Remix. It only happens in development though, I'm pretty sure the main reason is because in development emotion suffixes the generated className with the displayName of the component, and for some reason the on the client the display name of react-select components change from ${Component.displayName} to ${Component.displayName}2 as you can see yourself in the following example error:

Warning: Prop className did not match. Server: "tags-select__input-container css-6j8wv5-Input" Client: "tags-select__input-container css-ujecln-Input2"

[jeffminsungkim]

Any updates on this thread?
I'm having the same issue on Safari.

react-select v5.7.3 react v18.2.0

[brenoprata10]

I am also having the same issue.

[mikkpokk]

<ClientOnly> "fix" is not really fix. It causes layout shifts. Unless you use that component below the fold, layout shifts are not acceptable nowadays, it's UX nightmare.

[ZeldOcarina]

It keeps saying it's closed on this thread but the issue continues.. it has been three years now..

[ZeldOcarina]

Same issue on Astro.

[Jonydu05]

Same issue on Astro.

Have you resolved this issue?

[oskarhertzman]

Getting similar error when using isSearchable={false}

hydration-error-info.js:63 Warning: Prop `className` did not match. Server: "css-1czm0f-dummyInput-DummyInput" Client: "css-mohuvp-dummyInput-DummyInput"

 <ReactSelect
          ...
            isSearchable={false}