Warning: [JSS] Rule is not linked. Missing sheet option "link: true".

[pineshmenat]

I am using mantine library on my next js project and often UI will be broken with following warning, how do I resolve this?

[rtivital]

Hi Pinesh, this warning should not impact your UI, can you share the list of components which cause issues?

[Pernick]

I can confirm, that this issue is breaking the UI for me as well when running the docs locally. If I clone the repo and do yarn docs the resulting UI is broken until app navigation triggers. After hard refresh the UI is broken again.

Haven't yet found what causes this.

[rtivital]

This is an issue with Gatsby server side rendering implementation in dev mode – classNames generated on server do not match those on client, I guess it somehow related to suspense but I did not put much effort in investigation as this feature is currently in alpha (you can explore a related issue #67).

For Gatsby (Mantine docs) the solution was to disable ssr in development – you can try it out by switching to next-minor branch

[Pernick]

I see, thanks for the link. I should also add that disabling ssr in development leads to the error message mentioned by OP being gone.

[rtivital]

@pineshmenat I see that you've marked the question as answered, can you share what your issue was? I also use Mantine with Next in most of my projects and want to debug these kind of issues – if you can provide some additional information it will help me improve next support and update docs to prevent future issues.

[pineshmenat]

hey @rtivital I had the exact same issue as what @Pernick described above.

[rtivital]

Yep, just checked this one more time, it's definitely suspense, from the docs:

React.lazy and Suspense are not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we recommend Loadable Components. It has a nice guide for bundle splitting with server-side rendering.

Will add this to the docs, thanks for reporting!