ScrollArea isn't visible on a Remix app in production mode

[Thanaen]

What package has an issue

@mantine/core

Describe the bug

When using the ScrollArea component exported by @mantine/core with Remix in dev mode, everything works as it should.
But when we build Remix, and start it in production mode, the scrollbar of the ScrollArea is not visible anymore.

I put in the repro project an example using @radix-ui/react-scroll-area directly, and it seems to work. I conclude that this is not a problem with @radix-ui/react-scroll-area, but rather a problem with the way @mantine/core operates the component.

I didn't put a link to a codeandbox, but directly to a project on Github that reproduces the bug. (I had a hard time setting up Remix with Codesandbox, so I gave up 😅)

What version of @mantine/hooks page do you have in package.json?

5.10.3

If possible, please include a link to a codesandbox with the reproduced problem

https://github.com/Thanaen/mantine-remix-scrollbar

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

I don't have much experience using @radix-ui, so I'd probably have a hard time helping you fix the problem!
But I don't refuse on principle.

Possible fix

No response

[cayter]

Mantine is using Emotion underneath which is a CSS-in-JS library. Most of the React meta frameworks like Remix/NextJS including React 18's Server Component are moving towards SSR with response body streaming to achieve this effect.

As streaming response body would mean whatever gets to the browser first will render first (even without JS kicked in), solutions like CSS in JS heavily relies on runtime rendering (i.e. the browser would only know how to render the CSS styling AFTER JS kicks in) are gonna be facing lots of challenges.

This kind of problem is only solvable if Emotion comes up with solution to:

1. pre-fetch all the possible CSS styling during SSR and put them into the HTML head
2. hydrate it to the Emotion state tree after initialised on the browser

Step 1 can be pretty expensive as we'd need to get all CSS styling combinations and would likely cause higher latency to the page load. In short, this isn't an easy problem to resolve and from what I can tell, any UI libraries that use CSS-in-JS aren't really good fit to use with the modern meta frameworks. This is also why now ppl are leaning towards either using pure CSS or utility first (e.g. tailwindcss) when it comes to working well with these meta frameworks that utilise body response streaming approach.

Note: Radix UI with Stitches isn't immune to the above. There were bugs from time to time similar to the issue reported here. For example, this one.

All in all, I still love and appreciate all the works done in Mantine, but just ensure that you have enough time and resources to come up with workarounds(which some include ugly CSS style hardcoding) if you're to use Mantine with the modern meta frameworks that use SSR streaming.

[cayter]

For the current issue, this could be the workaround. As for the possible root cause, this is my hypothesis. Let us know if it works.

[Thanaen]

I confirm that your workaround works for me. That will do for now! As for the CSS-in-JS and React streaming issue, I'm following it with interest, although I think everyone more or less agrees that we won't find a way to make both work for a while 😅

Thank you for your help!

[rtivital]

This issue is closed for one of these reasons:

• It was fixed in 7.0
• It is no longer reproducible in 7.0
• It is no longer applicable in 7.0
• It does not have a reproduction

If you think that this issue was closed by mistake, and it is still an issue in version 7.0, please reopen it.

[Thanaen]

It's magnificent. Congratulations on converting the project to CSS!