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

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

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.

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?

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: '/'
}

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.

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