<title> Hydration error in Next 15

[alirezagh73]

Thanks for using react-select!

If you are going to ask a question or want to propose a change or a new feature, then please don't file an issue for this.
Questions and feature requests have their own place in our discussions section.

Are you reporting a bug or runtime error?

Please include a test case that demonstrates the issue you're reporting!

This is very helpful to maintainers in order to help us see the issue you're seeing.

Please note we are currently only directing our efforts towards the current major (v5) version and beyond.

We understand this might be inconvenient but it is in the best interest of supporting the broader community and to sustain the react-select project going forward.

To report bugs against react-select v5 please fork the following code-sandbox:
https://codesandbox.io/s/react-select-v5-sandbox-y5jtm

You may also find the online Babel tool quite helpful if you wish to use ES6/ES7 syntax not yet supported by the browser you are using.

[alirezagh73]

i have an hydration error in next 15 with select box component

this is my select box:

[firminochangani]

@alirezagh73 This is how I am tackling it:

import dynamic from "next/dynamic";
const CreatableSelect = dynamic(() => import("react-select/creatable"), { ssr: false });

It forces the component to client-side only. Here is my full component:

"use client";

import dynamic from "next/dynamic";
const CreatableSelect = dynamic(() => import("react-select/creatable"), { ssr: false });

interface Props {}

export function LocationSearchField({}: Props) {
  return (
    <CreatableSelect
      id="locationSearchField"
      options={[/**/]}
    />
  );
}

[Andcool-Systems]

@firminochangani However, your method does not work as expected. React Select will not be displayed before fully mounting the page, which causes a bad experience for the user. Therefore, we need to wait for a fixed bug from the package developer.

[Andcool-Systems]

Okay, after a short Google search, I found a solution that works for me. I just added the prop instanceId with a unique value to the Select component and the hydration error was fixed.

[rodgarcialima]

@Andcool-Systems are you using macos?

[Andcool-Systems]

@rodgarcialima windows

[rodgarcialima]

@Andcool-Systems that's why it's working.

[Andcool-Systems]

@rodgarcialima does the os affect the behavior of react select?

[rodgarcialima]

Please check this #5859