Repository navigation
Hydration mismatch related to Mantine script being added to head and body #1917
Description
Describe the bug
I installed Mantine in a new Router/Start app and noticed the script that's rendered by Mantine's ColorSchemeScript component is being injected into both the head and body causing the following error:
Expected server HTML to contain a matching <script> in <div>
The setup is basically the same as the Remix example, which is injecting the Mantine script only in the head as expected.
Your Example Website or App
https://stackblitz.com/edit/tanstack-router-2g89sr?file=app%2Froutes%2F__root.tsx
Steps to Reproduce the Bug or Issue
- Inspect the preview using the browser devtools.
- Run the command
document.querySelectorAll("[data-mantine-script]")in the console. - Observe the two nodes that are returned.
Expected behavior
The script tag with data-mantine-script attribute should only appear in the head on client and server.
Screenshots or Videos
No response
Platform
- OS: macOS
- Browser: Brave
- Version:
1.67.123
Additional context
No response
Activity
corydeppen commentedon Nov 22, 2024
I believe this issue has been resolved after the
Html,Head, andBodycomponents were removed. I created a new example based on the original reproduction, updated the dependencies and Start-related files, and moved theColorSchemeScriptinto theheadand I no longer see the hydration error. The Mantine script only appears in theheadnow as expected.Thanks for all your hard work on Router and Start! It's a pleasure to use and I'm looking forward to seeing much wider adoption in the near future.