Prop `id` did not match.

[welkinwong]

I'm having something Dropdown

When rendering the page in the server, I get this

Warning: Prop `id` did not match. Server: "menubutton-11" Client: "menubutton-3"
button
Button@http://localhost:3000/packages/modules.js?hash=d3bc85f5d0c31f910b588cfada6e48734864f8e2:40390:17
IconButton@http://localhost:3000/packages/modules.js?hash=d3bc85f5d0c31f910b588cfada6e48734864f8e2:41775:19
DropdownToggle@http://localhost:3000/packages/modules.js?hash=d3bc85f5d0c31f910b588cfada6e48734864f8e2:42639:24
div
Menu@http://localhost:3000/packages/modules.js?hash=d3bc85f5d0c31f910b588cfada6e48734864f8e2:42715:23
Dropdown@http://localhost:3000/packages/modules.js?hash=d3bc85f5d0c31f910b588cfada6e48734864f8e2:41859:24
div
styled.div@http://localhost:3000/packages/modules.js?hash=d3bc85f5d0c31f910b588cfada6e48734864f8e2:106206:19674
header
styled.header@http://localhost:3000/packages/modules.js?hash=d3bc85f5d0c31f910b588cfada6e48734864f8e2:106206:19674
Header@http://localhost:3000/app/app.js?hash=7809789ca0509f6ddf0add4cc64affde03ac5cbd:2299:13
Home
RequireAuth@http://localhost:3000/app/app.js?hash=7809789ca0509f6ddf0add4cc64affde03ac5cbd:3676:15
Routes@http://localhost:3000/packages/modules.js?hash=d3bc85f5d0c31f910b588cfada6e48734864f8e2:32773:12
App
HelmetProvider@http://localhost:3000/packages/modules.js?hash=d3bc85f5d0c31f910b588cfada6e48734864f8e2:105861:6594
CustomProvider@http://localhost:3000/packages/modules.js?hash=d3bc85f5d0c31f910b588cfada6e48734864f8e2:33533:23
AppProvider@http://localhost:3000/app/app.js?hash=7809789ca0509f6ddf0add4cc64affde03ac5cbd:3786:28
Router@http://localhost:3000/packages/modules.js?hash=d3bc85f5d0c31f910b588cfada6e48734864f8e2:32711:12
BrowserRouter@http://localhost:3000/packages/modules.js?hash=d3bc85f5d0c31f910b588cfada6e48734864f8e2:31466:11

[simonguo]

hi @welkinwong
The issue will be transferred to https://github.com/rsuite/rsuite/issues

[george-of-314]

in dev mode, I think? ;)

[welkinwong]

Yep, I want disable the alert :(

2021年11月30日 18:54，george-of-314 @.***> 写道：

in dev mode, I think? ;)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/rsuite/rsuite/issues/2153#issuecomment-982520879, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABSXUSC75ISVC3AVACGB3X3UOSUPJANCNFSM5ISNXYYQ. Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[SevenOutman]

Hi @welkinwong, could you provide a demo repo that re-produces the issue you describe?

[crossworth]

Hello, this error happens when using Next.js.

Next will check if the server side generated code is equals on the client side (it need to be equals to be able to hydratate the code), but since this part of the code: https://github.com/rsuite/rsuite/blob/3d3be529fa24affadc7ab326673cf843a940e5f3/src/Menu/Menu.tsx#L226 generates a new uniqueID for each ID, the code will not match and the warning will be logged.

I was able to solve this problem by creating a component that wrap another component and only show it on the browser (using an effect).

That means that the server will never render the component wrapped.

Hope this helps.

[george-of-314]

In product there will be no error

ср, 1 груд. 2021, 06:00 користувач Pedro Henrique @.***> пише:

Hello, this error happens when using Next.js.

Next will check if the server side generated code is equals on the client side (it need to be equals to be able to hydratate the code), but since this part of the code:

https://github.com/rsuite/rsuite/blob/3d3be529fa24affadc7ab326673cf843a940e5f3/src/Menu/Menu.tsx#L226 generates a new uniqueID for each ID, the code will not match and the warning will be logged.

I was able to solve this problem by creating a component that wrap another component and only show it on the browser (using an effect).

That means that the server will never render the component wrapped.

Hope this helps.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/rsuite/rsuite/issues/2153#issuecomment-983263339, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACFO6U5XQTLZF54ZJLQCTBLUOWMXLANCNFSM5ISNXYYQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[simonguo]

https://github.com/rsuite/rsuite/blob/27c7d08c93beca14e63a80feb0212ebb36f6cce8/src/FormGroup/FormGroup.tsx#L6-L12 @SevenOutman The purpose of generating a unique id is to improve accessibility. I suggest exposing the id prop to the developer, and it’s up to the developer to decide. Then make a guide to accessibility in the documentation. https://rsuitejs.com/components/form/#accessibility

[SevenOutman]

Next will check if the server side generated code is equals on the client side (it need to be equals to be able to hydratate the code), but since this part of the code: generates a new uniqueID for each ID, the code will not match and the warning will be logged.

I tend to use libraries like @reach/auto-id which claims generating SSR-safe unique IDs. But I don't know how to verify it via unit tests.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[welkinwong]

use react useId? @SevenOutman @simonguo see https://reactjs.org/docs/hooks-reference.html#useid

[simonguo]

@welkinwong useId is a React 18 feature. rsuite also needs to consider compatibility with React 17 and below. This work is already in progress. https://github.com/rsuite/rsuite/pull/2595

[SevenOutman]

React 18 useId is adopted now.

[roggc]

I am experiencing the same issue (a warning on property id mismatch between server and client on ul generated when using component Dropdown). I am doing SSR with React and express. I've updated rsuite to the latest version (5.58.1). Any suggestions? Thanks!

[welkinwong]

I am experiencing the same issue (a warning on property id mismatch between server and client on ul generated when using component Dropdown). I am doing SSR with React and express. I've updated rsuite to the latest version (5.58.1). Any suggestions? Thanks!

you should be upgrade the react to 18.3+

[roggc]

hello, I am using react 18.2.0