Next.JS SSR: dispatcher.useInsertionEffect is not a function

What package has an issue

@mantine/core

Describe the bug

When using @mantine/core popover, or any of its siblings (Menu.Dropdown or Tooltip), with Next.JS SSR (Server side rendering), and exception is thrown:

error - TypeError: dispatcher.useInsertionEffect is not a function at useInsertionEffect (/Users/USER/Development/sandbox/PROJECT/node_modules/react/cjs/react.development.js:1638:21) at useEvent (/Users/USER/Development/sandbox/PROJECT/node_modules/@floating-ui/react-dom-interactions/dist/floating-ui.react-dom-interactions.umd.js:186:7) at Object.useFloating (/Users/USER/Development/sandbox/PROJECT/node_modules/@floating-ui/react-dom-interactions/dist/floating-ui.react-dom-interactions.umd.js:223:26) at Object.usePopover (/Users/USER/Development/sandbox/PROJECT/node_modules/@mantine/core/cjs/Popover/use-popover.js:45:41) at Popover (/Users/USER/Development/sandbox/PROJECT/node_modules/@mantine/core/cjs/Popover/Popover.js:127:30) at renderWithHooks (/Users/USER/Development/sandbox/PROJECT/node_modules/react-ssr-prepass/dist/react-ssr-prepass.js:454:15) at render$2 (/Users/USER/Development/sandbox/PROJECT/node_modules/react-ssr-prepass/dist/react-ssr-prepass.js:465:6) at /Users/USER/Development/sandbox/PROJECT/node_modules/react-ssr-prepass/dist/react-ssr-prepass.js:612:12 at render (/Users/USER/Development/sandbox/PROJECT/node_modules/react-ssr-prepass/dist/react-ssr-prepass.js:613:4) at visitElement (/Users/USER/Development/sandbox/PROJECT/node_modules/react-ssr-prepass/dist/react-ssr-prepass.js:725:15) { page: ‘/projects/[id]’ }

This only happens if doing SSR, and not if the component is rendered client side. It is possible to workaround this, by simply not rendering the component until client side hydration, for example:

{typeof window !== "undefined" && (
  <Tooltip label="My tooltip">
    <div>Hover me</div>
  </Tooltip>
)}

However this gives a server/client mismatch.

My initial guess would be, that the @floating-ui package is looking for a ref, thats not yet created due to SSR.

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

5.5.0

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

No response

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

Yes

Possible fix

No response

[MirSowasVonEgal]

Hello,

I have the same problem, but unfortunately haven’t found a solution yet.

I’ll report when I’ve solved the problem.

[viczam]

@jimmyruann Hm, the codesandbox example has the same issue (I also followed the template from here - https://github.com/mantinedev/mantine-next-template). But I’ve done some thinking and as much as I like the convenience of trpc with ssr: true, it’s not the best idea. I will prefetch the queries in getServerSideProps / getStaticProps whenever needed, and that works fine with mantine.