Mantine >v5.3.3 is not working with Next.js SSR (TypeError: useInsertionEffect) #2880

devj3ns · 2022-11-04T21:16:48Z

What package has an issue

@mantine/core

Describe the bug

I am using mantine version ^5.3.3 with next.js 13.0.1.

When I upgrade to a newer mantine version, e.g. ^5.4.0 or ^5.7.0 I get the following error when opening my website:

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

Thanks for this awesome library and taking time for this issue :)

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

^5.4.0

The text was updated successfully, but these errors were encountered:

quick0831 · 2022-11-05T06:48:38Z

I found a same error
Just running next dev cause me this

@mantine/core version: ^5.6.3

error - TypeError: dispatcher.useInsertionEffect is not a function
    at useInsertionEffect (C:\pathToMyProject\node_modules\react\cjs\react.development.js:1638:21)
    at useEvent (C:\pathToMyProject\node_modules\@floating-ui\react-dom-interactions\dist\floating-ui.react-dom-interactions.umd.js:186:7)
    at Object.useFloating (C:\pathToMyProject\node_modules\@floating-ui\react-dom-interactions\dist\floating-ui.react-dom-interactions.umd.js:223:26)
    at Object.useTooltip (C:\pathToMyProject\node_modules\@mantine\core\cjs\Tooltip\use-tooltip.js:34:28)
    at C:\pathToMyProject\node_modules\@mantine\core\cjs\Tooltip\Tooltip.js:143:30
    at renderWithHooks (C:\pathToMyProject\node_modules\react-ssr-prepass\dist\react-ssr-prepass.js:454:15)
    at render$2 (C:\pathToMyProject\node_modules\react-ssr-prepass\dist\react-ssr-prepass.js:465:6)
    at C:\pathToMyProject\node_modules\react-ssr-prepass\dist\react-ssr-prepass.js:612:12
    at render (C:\pathToMyProject\node_modules\react-ssr-prepass\dist\react-ssr-prepass.js:613:4)
    at visitElement (C:\pathToMyProject\node_modules\react-ssr-prepass\dist\react-ssr-prepass.js:725:15) {
  page: '/'
}

quick0831 · 2022-11-05T06:55:53Z

downgrading to 5.3.3 solved my problem

rtivital · 2022-11-05T07:20:58Z

Update react and react dom versions to 18, reinstall dependencies – https://stackoverflow.com/questions/71682733/react-select-error-on-upgrade-typeerror-dispatcher-useinsertioneffect-is-not-a

Duplicate of #2609

devj3ns · 2022-11-05T14:15:48Z

My react and react-dom dependencies are >18:

"react": "^18.2.0",
"react-dom": "^18.2.0",

I guess that's not the problem.

rtivital · 2022-11-05T14:27:05Z

Try reinstalling dependencies and cleaning cache, you can also use mantine-next-template, it does not have such issue

devj3ns · 2022-11-29T11:34:55Z

Unfortunately, I still get this error which blocks me from upgrading to the latest mantine versions.

But I found out that I don't get this error when I disable SSR in my tRPC settings.

devj3ns · 2022-11-29T11:36:35Z

@quick0831 Since you are getting the exact error as me: Are you also using tRPC with SSR enabled?

quick0831 · 2022-11-29T11:44:34Z

Actually I forgot it. I remember turning off ssr in trpc and it stop complaining.

angelvega93 · 2023-03-15T05:15:00Z

Did you fix it?, im having the same problem with react-ssr-prepass

devj3ns · 2023-03-15T20:29:37Z

@angelvega93, @rtivital

After upgrading to the newest mantine version (6.02) and next version (13.2.5), I am getting the following error:

Uncaught TypeError: useInsertionEffect only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component
    at useInsertionEffect (file://C:\pathToMyProject\node_modules\react\cjs\react.development.js:1638:21)
    at useEvent (file://C:\pathToMyProject\node_modules\@floating-ui\react\dist\floating-ui.react.umd.js:1335:5)
    at Object.useFloating (file://C:\pathToMyProject\node_modules\@floating-ui\react\dist\floating-ui.react.umd.js:3806:26)
    at Object.useTooltip (file://C:\pathToMyProject\node_modules\@mantine\core\cjs\Tooltip\use-tooltip.js:34:13)
    at <unknown> (file://C:\pathToMyProject\node_modules\@mantine\core\cjs\Tooltip\Tooltip.js:148:30)
    at renderWithHooks (file://C:\pathToMyProject\node_modules\react-ssr-prepass\dist\react-ssr-prepass.js:454:15)
    at render$2 (file://C:\pathToMyProject\node_modules\react-ssr-prepass\dist\react-ssr-prepass.js:465:6)
    at <unknown> (file://C:\pathToMyProject\node_modules\react-ssr-prepass\dist\react-ssr-prepass.js:612:12)
    at render (file://C:\pathToMyProject\node_modules\react-ssr-prepass\dist\react-ssr-prepass.js:613:4)
    at visitElement (file://C:\pathToMyProject\node_modules\react-ssr-prepass\dist\react-ssr-prepass.js:725:15)
    at visitLoop (file://C:\pathToMyProject\node_modules\react-ssr-prepass\dist\react-ssr-prepass.js:742:17)
    at update (file://C:\pathToMyProject\node_modules\react-ssr-prepass\dist\react-ssr-prepass.js:801:9)
    at <unknown> (file://C:\pathToMyProject\node_modules\react-ssr-prepass\dist\react-ssr-prepass.js:878:5)
    at async Function.WithTRPC.getInitialProps (webpack-internal:///./node_modules/@trpc/next/dist/index.mjs:122:21)

Note: I am not using the next.js app directory.

When I disable SSR in tRPC, the error disappears.

So, there is still an issue with newer mantine versions and SSR.

rtivital · 2023-03-16T05:00:51Z

You can use one of the templates as reference. Templates do not have ssr issues.

esistgut · 2023-03-22T19:05:01Z

I'm having the same problem, just upgraded everything with npx npm-check-updates -u and the problem persists. Did anyone here find a way to fix this?

isoaxe · 2023-03-31T07:42:52Z

I'm having the same TypeError: useInsertionEffect only works in Client Components issue. Unfortunately I can't use one of the suggested templates as @rtivital has suggested as I'm already using a Next / tRPC template. Tried clearing the cache and reinstalling deps to no avail.

Had to go with turning off SSR in the tRPC config for now. Hopefully there will be a fix that doesn't require this down the line.

Note: After some messing around, I found that I don't get the error with some of the components even with SSR enabled. It appears the Mantine's <Select/> component was the offending one for me. Maybe others can corroborate?

It appears Mantine does not play nice with NextJS SSR. Tried the suggestions (see below) from the library author. Did not work. mantinedev/mantine#2880

Sameer3079 · 2023-04-29T13:44:28Z

I'm having the same TypeError: useInsertionEffect only works in Client Components issue. Unfortunately I can't use one of the suggested templates as @rtivital has suggested as I'm already using a Next / tRPC template. Tried clearing the cache and reinstalling deps to no avail.

Had to go with turning off SSR in the tRPC config for now. Hopefully there will be a fix that doesn't require this down the line.

Note: After some messing around, I found that I don't get the error with some of the components even with SSR enabled. It appears the Mantine's <Select/> component was the offending one for me. Maybe others can corroborate?

It was the same for me. Commenting out the <Select /> component worked for me. I wonder why that is.

henningsieh · 2023-05-07T07:03:35Z

I use Mantine, but without any <Select/> until now and the error is still there with "@mantine/core": "^6.0.10".

There still must be another mantine component, which breaks tRPC SSR. :(

peter-wd-1 · 2023-06-22T12:33:57Z

Is there any workaround to use tRPC SSR:true with Mantine?

FernandoNarvaez1904 · 2023-07-03T02:43:56Z

@peter-wd-1
I also found that the Select component was giving me the TypeError: useInsertionEffect only works in Client Components. The workaround I found in next is to dynamically import the component with ssr: false in the import, like so:

// Load completely on the client to avoid ssr error
const Select = dynamic(() => import("@mantine/core").then((el) => el.Select), {
  loading: () => <p>Loading...</p>,
  ssr: false,
});

It works well for what I am doing, I hope this helps someone else.

Telofy · 2023-10-16T08:17:30Z

Tooltips are also broken. Here's a workaround specific to tooltips that avoids that pieces of the text (the ones with the tooltips) are missing or replaced with “Loading…” during the dynamic load.

// Load completely on the client to avoid SSR error
// https://github.com/mantinedev/mantine/issues/2880#issuecomment-1617136855
import dynamic from 'next/dynamic'

import { TooltipProps } from '@mantine/core'

export const Tooltip = ({ children, ...rest }: TooltipProps) => {
  const MantineTooltip = dynamic(
    () => import('@mantine/core').then((el) => el.Tooltip),
    {
      loading: () => <>{children}</>,
      ssr: false,
    },
  )

  return <MantineTooltip {...rest}>{children}</MantineTooltip>
}

luixo · 2023-12-07T04:14:56Z

Probably this is during the react-ssr-prepass issue, the package is not actively maintained but used in SSR render of tRPC.

I stumbled upon the same error in another library though.

Upd: I created an issue in tRPC for that, it's the best shot to get this fixed.

apeck14 · 2024-03-06T01:01:30Z

@Telofy Do you know if your workaround is still required on latest (7.6.1)? Having issues with timeouts with NextJS, and trying to diagnose the root cause with virtually no logs.

devj3ns added the review required label Nov 4, 2022

rtivital closed this as completed Nov 5, 2022

devj3ns changed the title ~~"TypeError: dispatcher.useInsertionEffect is not a function" after upgrading from ^5.3.3 to ^5.4.0~~ Mantine >v5.3.3 is not working with Next.js SSR (TypeError: useInsertionEffect) Mar 15, 2023

isoaxe added a commit to isoaxe/aerial-ops-chat-app that referenced this issue Mar 31, 2023

Disable SSR

77b6286

It appears Mantine does not play nice with NextJS SSR. Tried the suggestions (see below) from the library author. Did not work. mantinedev/mantine#2880

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mantine >v5.3.3 is not working with Next.js SSR (TypeError: useInsertionEffect) #2880

Mantine >v5.3.3 is not working with Next.js SSR (TypeError: useInsertionEffect) #2880

devj3ns commented Nov 4, 2022 •

edited

Loading

quick0831 commented Nov 5, 2022

quick0831 commented Nov 5, 2022

rtivital commented Nov 5, 2022

devj3ns commented Nov 5, 2022

rtivital commented Nov 5, 2022

devj3ns commented Nov 29, 2022

devj3ns commented Nov 29, 2022

quick0831 commented Nov 29, 2022

angelvega93 commented Mar 15, 2023

devj3ns commented Mar 15, 2023 •

edited

Loading

rtivital commented Mar 16, 2023

esistgut commented Mar 22, 2023

isoaxe commented Mar 31, 2023 •

edited

Loading

Sameer3079 commented Apr 29, 2023

henningsieh commented May 7, 2023 •

edited

Loading

peter-wd-1 commented Jun 22, 2023

FernandoNarvaez1904 commented Jul 3, 2023 •

edited

Loading

Telofy commented Oct 16, 2023 •

edited

Loading

luixo commented Dec 7, 2023 •

edited

Loading

apeck14 commented Mar 6, 2024 •

edited

Loading

Mantine >v5.3.3 is not working with Next.js SSR (TypeError: useInsertionEffect) #2880

Mantine >v5.3.3 is not working with Next.js SSR (TypeError: useInsertionEffect) #2880

Comments

devj3ns commented Nov 4, 2022 • edited Loading

What package has an issue

Describe the bug

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

quick0831 commented Nov 5, 2022

quick0831 commented Nov 5, 2022

rtivital commented Nov 5, 2022

devj3ns commented Nov 5, 2022

rtivital commented Nov 5, 2022

devj3ns commented Nov 29, 2022

devj3ns commented Nov 29, 2022

quick0831 commented Nov 29, 2022

angelvega93 commented Mar 15, 2023

devj3ns commented Mar 15, 2023 • edited Loading

rtivital commented Mar 16, 2023

esistgut commented Mar 22, 2023

isoaxe commented Mar 31, 2023 • edited Loading

Sameer3079 commented Apr 29, 2023

henningsieh commented May 7, 2023 • edited Loading

peter-wd-1 commented Jun 22, 2023

FernandoNarvaez1904 commented Jul 3, 2023 • edited Loading

Telofy commented Oct 16, 2023 • edited Loading

luixo commented Dec 7, 2023 • edited Loading

apeck14 commented Mar 6, 2024 • edited Loading

devj3ns commented Nov 4, 2022 •

edited

Loading

devj3ns commented Mar 15, 2023 •

edited

Loading

isoaxe commented Mar 31, 2023 •

edited

Loading

henningsieh commented May 7, 2023 •

edited

Loading

FernandoNarvaez1904 commented Jul 3, 2023 •

edited

Loading

Telofy commented Oct 16, 2023 •

edited

Loading

luixo commented Dec 7, 2023 •

edited

Loading

apeck14 commented Mar 6, 2024 •

edited

Loading