mantinedev/mantine · error · Error

[@mantine/modals] useModals hook was called outside of conte

Error message

[@mantine/modals] useModals hook was called outside of context, wrap your app with ModalsProvider component

What it means

The @mantine/modals manager exposes modals.openConfirmModal etc. through React context created by ModalsProvider. Calling useModals() in a component rendered outside <ModalsProvider> throws this error because there is no context to read.

Source

Thrown at packages/@mantine/modals/src/use-modals/use-modals.ts:8

import { use } from 'react';
import { ModalsContext } from '../context';

export function useModals() {
  const ctx = use(ModalsContext);

  if (!ctx) {
    throw new Error(
      '[@mantine/modals] useModals hook was called outside of context, wrap your app with ModalsProvider component'
    );
  }

  return ctx;
}

View on GitHub (pinned to 8a284e2c2c)

Solutions

1. Wrap the app with <ModalsProvider> from @mantine/modals (inside MantineProvider)
2. Move the provider up so every useModals consumer is a descendant
3. In tests, use a custom render wrapper including ModalsProvider

Example fix

// before
<MantineProvider>
  <App /> {/* App calls useModals, but ModalsProvider missing */}
</MantineProvider>

// after
import { ModalsProvider } from '@mantine/modals';

<MantineProvider>
  <ModalsProvider>
    <App />
  </ModalsProvider>
</MantineProvider>;

// Ensure ModalsProvider wraps the app once, near the root
import { ModalsProvider } from '@mantine/modals';

<MantineProvider>
  <ModalsProvider>
    <App />
  </ModalsProvider>
</MantineProvider>;

When it happens

Trigger: Calling useModals() in a component that is not a descendant of <ModalsProvider>; rendering a second React root (widget/portal) without the provider; tests without the provider wrapper.

Common situations: Adding ModalsProvider inside a routed page instead of at the app root, so some components (e.g. in the layout) sit above it; Storybook stories missing a decorator; refactoring the app shell and accidentally dropping the provider.

Related errors

• @mantine/core: MantineProvider was not found in component tr
• useFormContext was called outside of FormProvider context
• [@mantine/core] MantineProvider was not found in tree
• [@mantine/core] MantineProvider was not found in tree
• ${errorMessage}

AI-assisted analysis of mantinedev/mantine@8a284e2c2c (2026-08-28). Data as JSON: /api/errors/24909ee1c69ea902. Report an issue: GitHub.