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

[igorovic]

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

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

[rtivital]

Hi @igorovic, with 5.0 release you get full control over emotion cache, you can change options as described in emotion documentation – https://emotion.sh/docs/@emotion/cache. There is not much we can do on our side to fix this issue.

[igorovic]

Hi @rtivital I guess you are talking about the option insertionPoint. I tried it but it was not effective.

below is an example that I tried.

insertionPoint: globalThis?.document?.querySelector('link[rel="stylesheet"]'),

I am wondering if in combination with Next.js there could be some consistency issue between ssr and client-side.

Any suggestions on this ?

[rtivital]

You cannot insert <style /> tag into <link /> tag. Use document.head or create a placeholder element for it.

[igorovic]

Sorry I should have linked the @emotion/cache documentation here

As state in the documentation, the emotion sheets should be inserted right after the insertionPoint

I updated the codesandbox to illustrate.

Thanks for your help.

[rtivital]

Alright, thanks, I still do not think that we can do anything about this on Mantine side, if you find a solution feel free to share it here, I'll update the documentation.

[igorovic]

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

[rtivital]

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

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