search

button-inc / service-development-toolkit

Toolkit for button applications
Apache License 2.0
5 stars 3 forks source link

Randomly-generated ids triggers mismatch warning with SSR #347

Open matthieu-foucault opened 2 years ago

matthieu-foucault commented 2 years ago

Specifications

@button-inc/bcgov-theme = 1.0.1

Describe the bug

When rendering the Navigation component and using nextjs's Server-side rendering, the following warming appears in the console (maybe only in development mode)

Warning: Prop id did not match. Server: "ntwkhfbh73g9tvz0yxnlk-toggle" Client: "k34mccn6xehpxmxv7x6rd-toggle"

The id is the one from the menu toggle input, which is randomly generated on both the server and the client, causing a mismatch

Additional context

Not quite sure what the effect of this warning is. At the minimum this is detrimental to the developers' experience, as the warning is displayed on every render (and may be displayed for multiple components, I haven't tested rendering complex pages with SSR yet)

matthieu-foucault commented 1 year ago

FYI this is causing errors (https://nextjs.org/docs/messages/react-hydration-error) and requiring workarounds with performance impacts and increasing test flakyness.