SSR `FormControl` htmlFor attribute mismatch

[GlebIrovich]

Description

We are trying to enable the SSR for our react app, however in dev mode I see a lot of errors related to the htmlFor mismatch between server and client.

Following the suggestions in this thread, I manually added ids to every form control component.

This resulted in a new issue: color mode mismatch:

react-dom.development.js:86 Warning: Prop `data-color-mode` did not match. Server: "dark" Client: "auto"
    at div
    at O (http://127.0.0.1/webpack/vendors-node_modules_primer_octicons-react_dist_index_esm_js-node_modules_primer_react_lib-es-fb382e-f86ce5f82dfb.js:16846:19291)
    at BaseStyles (http://127.0.0.1/webpack/vendors-node_modules_primer_octicons-react_dist_index_esm_js-node_modules_primer_react_lib-es-fb382e-f86ce5f82dfb.js:11952:5)
    at OptionalBaseStyles (http://127.0.0.1/webpack/ui_packages_react-core_deferred-registry_ts-ui_packages_react-core_AppContextProvider_tsx-ui_-36d03f-a38db5a39ee6.js:381:31)
    at Fe (http://127.0.0.1/webpack/vendors-node_modules_primer_octicons-react_dist_index_esm_js-node_modules_primer_react_lib-es-fb382e-f86ce5f82dfb.js:16846:16840)
    at ThemeProvider (http://127.0.0.1/webpack/vendors-node_modules_primer_octicons-react_dist_index_esm_js-node_modules_primer_react_lib-es-fb382e-f86ce5f82dfb.js:12149:3)
    at IntlProvider (http://127.0.0.1/webpack/ui_packages_react-core_deferred-registry_ts-ui_packages_react-core_AppContextProvider_tsx-ui_-36d03f-a38db5a39ee6.js:205:25)
    at RenderPhaseProvider (http://127.0.0.1/webpack/ui_packages_react-core_deferred-registry_ts-ui_packages_react-core_AppContextProvider_tsx-ui_-36d03f-a38db5a39ee6.js:855:32)
    at $704cf1d3b684cc5c$export$9f8ac96af4b1b2ae (http://127.0.0.1/webpack/vendors-node_modules_primer_octicons-react_dist_index_esm_js-node_modules_primer_react_lib-es-fb382e-f86ce5f82dfb.js:12686:64)
    at BaseProviders (http://127.0.0.1/webpack/ui_packages_react-core_deferred-registry_ts-ui_packages_react-core_AppContextProvider_tsx-ui_-36d03f-a38db5a39ee6.js:399:30)
    at Entry (http://127.0.0.1/webpack/ui_packages_react-core_Entry_tsx-ed5a5cf46f72.js:1204:18)

I am not sure if those two are related.

Steps to reproduce

1. checkout to https://github.com/github/github/pull/281165
2. enable repos_forms_ssr FF
3. start codespaces and go to /new
4. make sure that you see SSR icon in the toolbar, reload if needed
5. check console

Version

v35.26.0

Browser

Chrome

[github-actions]

Uh oh! @GlebIrovich, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[lesliecdubs]

Thanks for reporting! @joshblack is going to take a stab at reproducing and then we'll go from there.

[github-actions]

Uh oh! @GlebIrovich, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[joshblack]

Hey there! 👋 I opened up: #3561 which should help for the FormControl id mismatch issue. It seemed to be due to an issue in an upstream dependency when in StrictMode 👀

For the theme mismatch issue, could you share more info about how to re-create it? On my end, I opened up a codespace for the linked branch and did the following:

• Visited /new
• Added the following features as query params: /new?_features=react_repo_create_page,repos_forms_ssr

When the page renders, I see the error mentioned for ids:

Prop `htmlFor` did not match. Server: "react-aria-1" Client: "react-aria-2"

But am unsure how to re-create the data-color-mode mismatch. Any more information you can share here would be super helpful!

[GlebIrovich]

thanks @joshblack!

I am not sure if there is a simple way to reproduce the theme mismatch issue. In my case I added ids to all form controls manually (which resolved the problem with htmlFor) and the theme problem popped up.

I committed my changes, so you can try going to the same page on this commit

[GlebIrovich]

@joshblack did it work for you?

[joshblack]

Yup! That did it. Thanks so much @GlebIrovich for the help, really appreciate it. Will look into the theme side of things now 👍