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.

[V5] Getting FOUC with default Remix template

See original GitHub issue

What package has an issue

@mantine/core

Describe the bug

I’m getting FOUC using default Remix template with updated Remix, React and Mantine (5.0.0-alpha.19) packages. I’ve tried using npm and yarn as well. The issueis visible on intiial page load as well as on error/catch boundries.

A solution I’m currently using along with npm (https://github.com/remix-run/remix/issues/1136#issuecomment-1146647655) doesn’t work anymore due to changes in Mantine’s Emotion cache. Therefore I have tried to implement caching based on this approach from Chakra UI: https://chakra-ui.com/getting-started/remix-guide#2-provider-setup. Sadly with no luck. The only difference is that I don’t get errors in browser console due to mismatches in <head> but FOUC is still present.

The error I get using injectStylesIntoStaticMarkup:

react-dom.development.js:86 Warning: Expected server HTML to contain a matching <meta> in <head>.

In which browser did the problem occur

Chrome

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

No response

Possible fix

No response

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:27 (6 by maintainers)

Top GitHub Comments

3reactions

zemdcommented, Sep 1, 2022

@viczam sorry, but no. also the latest update broke styles again, and I had to switch back to react17 hydrate function, remove emotion cache and return <ClientProvider/>. there is definitely an issue with mantine-remix style integration, because next.js doesn’t have the same issues.

2reactions

kevinwolfcrcommented, Aug 1, 2022

Update: I added a custom emotionCache as the docs says and it works, no warnings, hydration, or global styles issues.

Works with React 18 and Mantine 5.

@rtivital what would be the consequences of making createEmotionCache({ key: "mantine" }) the default value for the emotionCache prop in the MantineProvider?

Top Results From Across the Web

Migrating to v5 - Bootstrap v5 中文文档

Track and review changes to the Bootstrap source files, documentation, and components to help you migrate from v4 to v5.

Migrating to v5 - Boosted · Orange

We've ditched the default Sass map merges to make it easier to remove ... plain-hover-focus , and hover-focus-active; float(); form-control-mixin() ...

Mantine

React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience.

Migrating to v5 - Bootstrap

We've also expanded our theme color Sass variables, CSS variables, ... The same applies to Sass maps—you must override the defaults before they...

Quick Start on using AI to render images using Disco Diffusion

DISCORDhttp://cw1.me/discordPATREONhttps://patreon.com/chippwaltersA very beginner focused tutorial on how to use Disco Diffusion with ...