ConsenSysMesh / ConsenSysMesh/rimble-ui

Warning: Prop `className` did not match. while utilizing rimble within nextjs project

Open
#454 1 comment 3 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
455
Forks
60
PR merge metrics
No merged PRs in 30d

Description

**Describe the bug**
Using rimble-ui within nextjs project gives this warning:

Warning: Prop `className` did not match. Server: "sc-gsDJrp sc-lgkoQy sc-hIfwMU ctiSSV hJYniQ hUBFOd" Client: "Box__StyledBox-ha1bw0-0 BaseButton__StyledButton-sc-1o9z2ni-0 SolidButton__StyledSolidButton-goy2oa-0 hEwKXO jjNsaJ gxrTYq"

**To Reproduce**
Use one of rimble comps within nextjs

**Rimble UI Version**

```
"dependencies": {
"next": "latest",
"opensea-js": "^1.1.11",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"rimble-ui": "^0.14.0",
"styled-components": "^5.2.3",
"web3": "^1.3.5"
},
"devDependencies": {
"@types/node": "^12.12.21",
"@types/react": "^17.0.2",
"@types/react-dom": "^17.0.1",
"@types/styled-components": "^5.1.9",
"babel-plugin-styled-components": "^1.12.0",
"typescript": "4.0"
}
```

**Desktop:**

- OS: MACOS
- Chrome
- Version 89

Contributor guide

No contributing guide indexed for this repository

Research direction

The issue names a Next.js project and Rimble components but no source file or test. Start by reproducing the warning with a minimal Next.js app, then compare the server- and client-rendered styled-component className values. Done means the Rimble component hydrates without the reported className mismatch warning.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nextjs, react
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.