Flicker with NextJS

[konsalex]

mantine-react-table version

v1.3.4

react & react-dom versions

v18.2.0

Describe the bug and the steps to reproduce it

Visit: https://www.designsystemcookbooks.com/ and try to refresh the page

CleanShot.2023-12-12.at.21.46.15.mp4

I suspect that this has to do with emotion but not sure how to resolve

Minimal, Reproducible Example - (Optional, but Recommended)

I used a template from NextJS and created a reproduction repo here:
https://github.com/konsalex/reproduction-flicker-mantine

The issue is also here

Screenshots or Videos (Optional)

CleanShot.2023-12-12.at.21.46.15.mp4

Do you intend to try to help solve this bug with your own PR?

No, because I do not know how

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[alessandrojcm]

Hey @konsalex, yes this is indeed due to Emotion. You have two options here:

• Use MRT v2, you'd need to migrate to Mantine v7 (it uses CSS Modules, you can also use Vanilla Extract or SASS). This is a big breaking change and MRT v2 is in alpha so use it at your own risk.
• You can keep using MRT v1 and take a look at this for a workaround.

Let me know how it goes.

[KevinVandy]

Follow the Mantine next Js guide