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

[kddige]

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

[rtivital]

I cannot reproduce the issue with mantine-next-template, it works correctly with latest version of Mantine and Next.js – https://github.com/mantinedev/mantine-next-template/blob/tooltip-issue-2609/components/Welcome/Welcome.tsx

If you have troubles with Next.js Mantine integration:

• Use mantine-next-template as reference
• Try installing dependencies with yarn instead of other package managers

[timootten]

Hello,

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

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

[trungthecelestial]

Hello,

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

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

Any update on your issue? I have the same one. Actually, my case was tRPC is the culprit who cause the issue. The root cause leads back to the getServerSideProps api from NextJs. And ofc I have both react and react-dom at 18.2.0.

[rtivital]

React and react-dom packages version needs to be 18 https://stackoverflow.com/questions/71682733/react-select-error-on-upgrade-typeerror-dispatcher-useinsertioneffect-is-not-a

[timootten]

No, I don't found a solution yet. :/ I tried to update my react and react-dom to 18, but it didn't fix it for me. My only solution was to create a new project, but I didn't implement trpc yet.

[jimmyruann]

Hello, I have the same problem, but unfortunately haven't found a solution yet. I'll report when I've solved the problem.

Any update on your issue? I have the same one. Actually, my case was tRPC is the culprit who cause the issue. The root cause leads back to the getServerSideProps api from NextJs. And ofc I have both react and react-dom at 18.2.0.

For anyone interested in the issue behind tRPC. It's also addressed on their docs https://trpc.io/docs/v10/ssr

Github Issue: https://github.com/trpc/trpc/issues/596

[viczam]

@jimmyruann so you're saying mantine doesn't work with trpc with SSR set to true?

[jimmyruann]

@viczam As per my project requirement, we create our own getInitialProps following the Mantine guide here.

Here is the codesandbox link so you can sus it out.

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