Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Remix: Warning, did not expect server HTML to contain a <style> in <head>

See original GitHub issue

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

Are you willing to participate in fixing this issue and create a pull request with the fix

Possible fix

No response

Issue Analytics

State:
Created a year ago
Comments:19 (8 by maintainers)

Top GitHub Comments

3reactions

rtivitalcommented, Aug 18, 2022

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.

3reactions

rtivitalcommented, Aug 16, 2022

@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.