{"record":{"id":"24909ee1c69ea902","repo":"mantinedev/mantine","slug":"mantine-modals-usemodals-hook-was-called-outsid","errorCode":null,"errorMessage":"[@mantine/modals] useModals hook was called outside of context, wrap your app with ModalsProvider component","messagePattern":"\\[@mantine/modals\\] useModals hook was called outside of context, wrap your app with ModalsProvider component","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/@mantine/modals/src/use-modals/use-modals.ts","lineNumber":8,"sourceCode":"import { use } from 'react';\nimport { ModalsContext } from '../context';\n\nexport function useModals() {\n  const ctx = use(ModalsContext);\n\n  if (!ctx) {\n    throw new Error(\n      '[@mantine/modals] useModals hook was called outside of context, wrap your app with ModalsProvider component'\n    );\n  }\n\n  return ctx;\n}\n","sourceCodeStart":1,"sourceCodeEnd":15,"githubUrl":"https://github.com/mantinedev/mantine/blob/8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8/packages/@mantine/modals/src/use-modals/use-modals.ts#L1-L15","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Wrap the app with <ModalsProvider> from @mantine/modals (inside MantineProvider)","Move the provider up so every useModals consumer is a descendant","In tests, use a custom render wrapper including ModalsProvider"],"exampleFix":"// before\n<MantineProvider>\n  <App /> {/* App calls useModals, but ModalsProvider missing */}\n</MantineProvider>\n\n// after\nimport { ModalsProvider } from '@mantine/modals';\n\n<MantineProvider>\n  <ModalsProvider>\n    <App />\n  </ModalsProvider>\n</MantineProvider>;","handlingStrategy":"validation","validationCode":"// Ensure ModalsProvider wraps the app once, near the root\nimport { ModalsProvider } from '@mantine/modals';\n\n<MantineProvider>\n  <ModalsProvider>\n    <App />\n  </ModalsProvider>\n</MantineProvider>;","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Register ModalsProvider at the app root alongside MantineProvider","Include it in the shared test/storybook wrapper so consumers never miss context","Keep a single provider instance covering the whole tree"],"tags":["modals","context","provider","react"],"backgroundTag":"missing-context-provider","analyzedSha":"8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8","analyzedAt":"2026-08-28T10:25:51.087Z","schemaVersion":2},"datasetVersion":"2026-08-28T11:17:15.048Z"}