After upgrading from react_on_rails 16.1.2 to 16.2.0.beta.19, we're experiencing hydration mismatch errors even though we're using client-side only rendering (no prerender: true, server_bundle_js_file is empty). We are not on pro version.

We are using ReactOnRails.reactOnRailsPageLoaded(); when loading components asynchronously.

The error shows that React is attempting to hydrate existing DOM content with kebab-case CSS properties, when it should be doing a fresh client-side render with camelCase properties.

Environment

1. Ruby version: 3.4.7
2. Rails version: 8.1
3. Shakapacker/Webpacker version: 9.4.0
4. React on Rails version: 16.2.0.beta.19

Expected behavior

No hydration, and no mismatch errors.

Actual behavior

React is attempting to hydrate existing DOM content. The hydration comparison shows:

• Server/existing DOM: kebab-case CSS (align-items, flex-direction, margin-right)
• Client React: camelCase CSS (alignItems, flexDirection, marginRight)

Notes

Possibly these changes are related:

• reactOnRailsPageLoaded used to call hydrateAllStores(), now it does not anymore? (https://github.com/shakacode/react_on_rails/blame/c3ad7a9b37ff4e98f968fbf572b6cd79424ed666/packages/react-on-rails/src/clientStartup.ts#L11-L14)

  • The current version just calls ´renderAllComponents` (https://github.com/shakacode/react_on_rails/blame/master/packages/react-on-rails/src/clientStartup.ts#L10)

• https://github.com/shakacode/react_on_rails/blob/16.1.2/node_package/src/pro/ClientSideRenderer.ts#L138-L139 the supportsHydrate is no longer part of the check?

  • As it has been changed to const shouldHydrate = !!domNode.innerHTML;
    (https://github.com/shakacode/react_on_rails/blob/master/packages/react-on-rails/src/ClientRenderer.ts#L86-L87)

Workaround

If you use reactOnRailsComponentLoaded(domId) per component, instead of reactOnRailsPageLoaded(), it works without any issues.