JedWatson / JedWatson/react-select
v3 prop className did not match warning in Next.js
Open
Nobody has claimed this yet.
issue/bug-confirmed
- Dominant language
- TypeScript
- Stars
- 28k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Open the linked CodeSandbox and reproduce the server/client className warning with the reported React, Next.js, and react-select versions. Read the 51-comment thread for any confirmed cause or current direction; the work is done when the reproduction no longer emits the hydration warning without regressing the select rendering.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, react, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100