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.

@emotion/cache prepend options not working in production build with Next.js

See original GitHub issue

What package has an issue

@mantine/core

Describe the bug

When using a custom emotion cache with option {prepend: false} in a Next.js project, styles are still prepended. This only happens in a production build and on the client side. The SSR code is correct.

reproduction repo: https://github.com/igorovic/mantine-prepend-issue

client side

ssr result

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

“@mantine/hooks”: “^5.1.5”,

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

https://codesandbox.io/s/blissful-sinoussi-ry973k?file=/package.json

Do you know how to fix the issue

No response

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
Comments:7 (4 by maintainers)

Top GitHub Comments

1reaction

rtivitalcommented, Aug 28, 2022

Great, thanks for investigation! I’ll see whether we can add this to emotion cache documentation.

0reactions

igoroviccommented, Aug 28, 2022

Hi,

I managed to make it work after many trials. Here is an example repo if it could help anyone facing the same issue.

https://github.com/igorovic/mantine-prepend-issue

Top Results From Across the Web

Going to Production - Next.js

Before taking your Next.js application to production, here are some recommendations to ensure the best user experience.

Material styling not loading in production build - Stack Overflow

I've managed to solve the issue myself by first bumping these packages to their latest versions: @emotion/cache; @emtion/react ...

Getting started with MUI and Next.js - LogRocket Blog

Configuring MUI and Next.js to work together takes a bit more effort ... Inside that directory, create a file called theme.js and add...

Next.Js + MUI v5 tutorial - DEV Community ‍ ‍

It just load the JavaScript and CSS which page really need. This will make the page loading a lot faster. All images can...

Server Side Rendering - Emotion

This approach does not work with the streaming APIs. ... import createCache from '@emotion/cache' const key = 'custom' const cache = createCache({ key...