yelping-magenta

Mantine ModalManager + Tanstack Router

Problem - when Mantine ModalManager (https://mantine.dev/others/modals/) with Tanstack Router, the modals seem to be rendered outside the base router provider (despite being instantiated inside of Wrap). Error - Uncaught TypeError: Cannot read properties of null (reading '__store') Homework - - Checked SO and Issues - Tried using withinPortal={false} Reproducible example - - StackBlitz isn't able to install tanstack router but this is the code you would need to see the error - https://stackblitz.com/edit/stackblitz-starters-z7kejt?description=React%20%20%20TypeScript%20starter%20project&file=src%2FApp.tsx&title=React%20Starter Any insight/ help here would be really appreciated. Thanks!

Modals manager | Mantine

Centralized modals manager with option to handle state of multi-step modals

Seth Brown

StackBlitz

React Starter - StackBlitz

React + TypeScript starter project

2 Replies

yelping-magentaOP•2y ago

I was able to fix this issue by moving the ModalsProvider into the rootRoute definition -

const rootRoute = new RootRoute({
  component: () => (
    <>
      <ModalsProvider
        modals={modals}
        modalProps={{
          closeOnClickOutside: true,
          closeOnEscape: true,
          centered: true,
        }}
      >
        <ScrollRestoration />
        <Outlet />
      </ModalsProvider>
    </>
  ),
});

const rootRoute = new RootRoute({
  component: () => (
    <>
      <ModalsProvider
        modals={modals}
        modalProps={{
          closeOnClickOutside: true,
          closeOnEscape: true,
          centered: true,
        }}
      >
        <ScrollRestoration />
        <Outlet />
      </ModalsProvider>
    </>
  ),
});

like-gold•2y ago

I think you were looking for the InnerWrap option. Not the Wrap option

Gaming

Programming

Mantine ModalManager + Tanstack Router

Did you find this page helpful?