future.useScriptElementForInitialPage=true causes Mantine SSR hydration mismatch (class hashes differ)

[mokevnin]

Enabling future.useScriptElementForInitialPage: true in inertia-rails causes hydration mismatches with Mantine (v8) on SSR pages. Mantine generates different class hashes between SSR and client, leading to “A tree hydrated but some attributes … didn’t match” errors. Disabling the flag (fallback to data-page on #app) makes the mismatch disappear.

Environment

• inertia-rails: <version?>
• @inertiajs/react: 2.3.4
• React: 19.2.3
• Mantine: 8.3.10
• Rails SSR with Vite
• Inertia SSR enabled

Steps to Reproduce

1. Enable SSR.
2. Set future.useScriptElementForInitialPage: true.
3. Render a page that includes Mantine components that emit inline styles (e.g. <Box w={{ base: '100%', xs: '70%' }} /> inside a layout).
4. Load the page.

Actual behavior

React warns:

A tree hydrated but some attributes of the server rendered HTML didn't match…

When inspecting the DOM, Mantine inline styles and classnames differ between SSR and hydration, e.g.:

SSR:

.m-R_6u { … }

```

Hydrated:

.m-R_1n { … }

Expected behavior

SSR and hydration should produce matching output. Mantine’s inline styles/classnames should be identical between server and client.

Additional notes

• The mismatch only appears when future.useScriptElementForInitialPage is enabled.
• Disabling the flag (using data-page on #app) fixes the issue immediately.
• It appears the “script data-page” source can diverge from the SSR markup / app-level data-page attributes, which breaks deterministic hydration for
  Mantine.