mantine
mantine copied to clipboard
mantinedev
Remix: Warning, did not expect server HTML to contain a <style> in <head>
What package has an issue
@mantine/core
Describe the bug
When following the setup instructions for using Mantine 5.0.0 with Remix (1.6.5) (https://mantine.dev/pages/getting-started/ ), there seem to be some problems with hydration. Browser console warning as follows:
Warning, did not expect server HTML to contain a <style> in <head>
This issue seems to be new to 5.0.0.
Warning is not logged when StylesPlaceholder is removed from root.tsx
Discord discussion here: https://discord.com/channels/854810300876062770/972850721244471436/1001794858798829618
minimal package.json
{ "private": true, "sideEffects": false, "scripts": { "build": "remix build", "dev": "remix dev", "debug": "remix dev --debug", "start": "remix-serve build" }, "dependencies": { "@emotion/react": "^11.9.3", "@emotion/server": "^11.4.0", "@mantine/core": "^5.0.0", "@mantine/hooks": "^5.0.0", "@mantine/remix": "^5.0.0", "@remix-run/node": "^1.6.5", "@remix-run/react": "^1.6.5", "@remix-run/serve": "^1.6.5", "react": "^17.0.2", "react-dom": "^17.0.2" }, "devDependencies": { "@remix-run/dev": "^1.6.5", "@remix-run/eslint-config": "^1.6.5", "@types/react": "^17.0.47", "@types/react-dom": "^17.0.17", "eslint": "^8.20.0", "typescript": "^4.7.4" }, "engines": { "node": ">=14" } }
In which browser did the problem occur
Chrome / Firefox latest
If possible, please include a link to a codesandbox with the reproduced problem
No response
Do you know how to fix the issue
No
Are you willing to participate in fixing this issue and create a pull request with the fix
No
Possible fix
No response
I have the same issue.
Mantine v 5.0.0 Remix v 1.6.5 React v 17.0.2 (Remix ships with this, Its compatible with 18.2 I guess but its not really fully tested)
My guts telling me its related to the change to the entry.server.tsx file in the v5 docs for integrating remix.
@mantine/remix package is based on Remix documentation – https://remix.run/docs/en/v1/guides/styling#css-in-js-libraries
I believe there is not much we can do on our side.
If you want to avoid this issue, you can setup your own ssr logic with @mantine/ssr or even @emotion/server
This does seem to be new since Mantine v5 though, the previous v4 releases do not have this issue with the same version of Remix, so I guess something has changed here - though I'm not yet sure what this impact of this issue is beyond the warning logs.
If it looks like it's an issue or inconsistency on the Remix side, I can report it there and see if they have any ideas
I do not really understand the source of the issue. The error message that is shown in the console is correct – there is a <style /> rendered on the server which is not present on the client (exactly like it is described in Remix documentation):
<head>
<Meta />
<Links />
{typeof document === "undefined" ? "__STYLES__" : null}
</head>
Based on this logic it seems that the error is expected.
Just for reference – Kent from Remix created an issue related to this on the Styled Components repo in january - https://github.com/styled-components/styled-components/issues/3660. I guess its the same problem as we have with Emotion.
Whats weird is how we didn't get this warning with the previous versions 🤔
Having the same issue. Tried different remix templates. Tried integrating the two entry files (mantine + remix, vs replace your entire file). I couldn't get it. I thought it was me.
The v4 docs are here. No hydration issues but there are many changes from v4 to v5.
The inflection I had with the bug is when <StylesPlaceholder /> was included. Taking it out got past the error, but I think was just not including the styling. So, not a workaround but maybe a place to start? 🤷
Any solutions or workarounds for this? Having the same issue. Styles in general act weird with this combination.
I'm not asserting that this is an optimal solution. Just trying to show a way forward.
- Get your dependency bundle reset a little bit. This means going back on React and Mantine.
package.json
"dependencies": {
// all the remix packages can stay at "^1.6.5"
"react": "^17.0.2",
"react-dom": "^17.0.2",
"devDependencies": {
"@mantine/core": "^4.2.12",
"@mantine/form": "^4.2.12",
"@mantine/hooks": "^4.2.12",
"@mantine/ssr": "^4.2.12",
// I generated my remix project using the blues template
// which did not have this package which is needed for npm run dev
"@remix-run/serve": "^1.6.5",
-
entry.client.tsxneeds to flip around because thehydrateAPI changed in React 18:
import * as React from "react";
import { RemixBrowser } from "@remix-run/react";
import { hydrate } from "react-dom";
hydrate(
<React.StrictMode>
<RemixBrowser />
</React.StrictMode>,
document
);
-
entry.server.tsxyou can take straight from the mantine docs. At that point, you can try something with mantine like putting a button inapp/routes/index.tsx:
import { Button } from "@mantine/core";
export default function Index() {
return (
<main>
<Button>Mantine</Button>
</main>
);
}
- Finally, you need a root.tsx with the theme provider. I also combined what they are doing with the theme.ts file in this repo too.
It should render without hydration errors.
Yeah by going back to 4.x you can get it working. But I wanted all the changes in 5.0. Plenty of changes to components. I’m building out a lot of features at the moment and want to have the latest components. The warning isn’t blocking me at this point. I can wait for a fix.
Sent from mobile
On Aug 1, 2022, at 7:34 PM, Chris Dillon @.***> wrote:
I'm not asserting that this is an optimal solution. Just trying to show a way forward.
Get your dependency bundle reset a little bit. This means going back on React and Mantine. package.json
"dependencies": { // all the remix packages can stay at "^1.6.5"
"react": "^17.0.2",
"react-dom": "^17.0.2",
"devDependencies": { @./core": "^4.2.12", @./form": "^4.2.12", @./hooks": "^4.2.12", @./ssr": "^4.2.12",
// I generated my remix project using the blues template // which did not have this package which is needed for npm run dev @./serve": "^1.6.5", entry.client.tsx needs to flip around because the hydrate API changed in React 18: import * as React from "react"; import { RemixBrowser } from @./react"; import { hydrate } from "react-dom";
hydrate( <React.StrictMode> <RemixBrowser /> </React.StrictMode>, document ); entry.server.tsx you can take straight from the mantine docs. At that point, you can try something with mantine like putting a button in app/routes/index.tsx: import { Button } from @.***/core";
export default function Index() {
return (
— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.
This isn't just a console warning but also causing a noticeable flicker when page loads due to server side miss-match.
@rtivital I'm using the latest Remix template which uses renderToPipeableStream instead of renderToString and React 18 (link).
I can confirm using Mantine is a big issue, the styles are not server-side rendered which results in a flash of unstyled content and a lot of layout shifts when the page loads:
I tried following the docs of @mantine/remix to resolve this issue but the method described there is not compatible with the latest server entry in Remix (linked above).
@gigobyte renderToPipeableStream is not supported by emotion, see https://github.com/emotion-js/emotion/issues/2800
If you want to use Remix with Mantine, then use template (react 17, regular ssr). As far as I understand none of current css-in -js libraries support it (see styled-components as most popular library – https://github.com/styled-components/styled-components/issues/3658). So, if you really need this feature – use plain CSS.
According to the documentation, when I install the latest versions of remix and mantine, it creates many styles like in the picture and I get an error message in the console.
"@emotion/react": "^11.10.0",
"@emotion/server": "^11.10.0",
"@mantine/core": "^5.1.6",
"@mantine/hooks": "^5.1.6",
"@mantine/remix": "^5.1.6",
"@remix-run/node": "^1.6.8",
"@remix-run/react": "^1.6.8",
"@remix-run/serve": "^1.6.8",
"react": "^17.0.2",
"react-dom": "^17.0.2"
I hope a solution for the remix can be found as soon as possible.
You can use mantine-remix-template, it works as expected, I doubt that there will be any solution for this any time soon as remix is very unstable – I'm not planning to waste any more time on supporting it until it become mature.
You can use mantine-remix-template, it works as expected, I doubt that there will be any solution for this any time soon as remix is very unstable – I'm not planning to waste any more time on supporting it until it become mature.
I also tried with mantine-remix-template but I was getting the console error again, so I tried this as an alternative.
It is not an error, it is a warning, you can ignore it – everything works correctly
The issue is fixed in 5.2.5, template works as expected – https://github.com/mantinedev/mantine-remix-template