{"record":{"id":"ec3121f10b11d284","repo":"mantinedev/mantine","slug":"useformcontext-was-called-outside-of-formprovider","errorCode":null,"errorMessage":"useFormContext was called outside of FormProvider context","messagePattern":"useFormContext was called outside of FormProvider context","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"critical","filePath":"packages/@mantine/form/src/FormProvider/FormProvider.tsx","lineNumber":22,"sourceCode":"\nexport interface FormProviderProps<Form> {\n  form: Form;\n  children: React.ReactNode;\n}\n\nexport function createFormContext<Values, TransformedValues = Values, Rules = any>() {\n  type Form = UseFormReturnType<Values, TransformedValues, Rules>;\n\n  const FormContext = createContext<Form | null>(null);\n\n  function FormProvider({ form, children }: FormProviderProps<Form>) {\n    return <FormContext value={form}>{children}</FormContext>;\n  }\n\n  function useFormContext() {\n    const ctx = use(FormContext);\n    if (!ctx) {\n      throw new Error('useFormContext was called outside of FormProvider context');\n    }\n\n    return ctx;\n  }\n\n  return [FormProvider, useFormContext, useForm] as [\n    React.FC<FormProviderProps<Form>>,\n    () => Form,\n    UseForm<Values, TransformedValues, Rules>,\n  ];\n}\n","sourceCodeStart":4,"sourceCodeEnd":34,"githubUrl":"https://github.com/mantinedev/mantine/blob/8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8/packages/@mantine/form/src/FormProvider/FormProvider.tsx#L4-L34","documentation":"useFormContext is a hook that reads React context created by createFormContext(). It throws when called in a component that is not rendered inside the corresponding FormProvider, because the context value is undefined. The library throws instead of returning undefined to fail fast on invalid form usage.","triggerScenarios":"Calling useFormContext() (returned from createFormContext) in a component that is not a descendant of the FormProvider component from the same createFormContext call. Also happens when nesting providers incorrectly or using useFormContext from a different createFormContext instance whose provider is not above the consumer.","commonSituations":"Rendering form fields outside the <FormProvider> wrapper (e.g. in a sibling component, portal root, or modal rendered outside the form tree); forgetting to wrap the component tree in FormProvider after refactoring; mixing up useFormContext from two separate createFormContext calls; testing a component in isolation without the provider.","solutions":["Wrap the component tree (including all components that call useFormContext) in the FormProvider returned from the same createFormContext() call: <FormProvider form={form}>...</FormProvider>","If the component can render standalone, pass the form object down as a prop instead of reading it from context","In tests, wrap the rendered component in the FormProvider (or a custom render helper that does so)","Make sure you are using the useFormContext exported from the same createFormContext module, not from a different form instance"],"exampleFix":"// before\nfunction MyForm() {\n  const form = useFormContext(); // throws\n  return <input {...form.getInputProps('name')} />;\n}\n\n// after\nfunction App() {\n  const form = useForm({ initialValues: { name: '' } });\n  return (\n    <FormProvider form={form}>\n      <MyForm />\n    </FormProvider>\n  );\n}","handlingStrategy":"validation","validationCode":"import { FormProvider, useFormContext } from './form-context';\n\nfunction useOptionalForm() {\n  const el = useRef<HTMLDivElement>(null);\n  // Context presence must be checked by the provider structure itself;\n  // you can detect it before calling the hook only by static tree inspection:\n  // ensure <FormProvider> is an ancestor in JSX.","typeGuard":"// Not possible at runtime before calling the hook (hooks cannot be conditional).\n// Static guard: verify the JSX tree wraps consumers in <FormProvider>.\nconst isInsideProvider = (node: React.ReactNode): boolean =>\n  /* walk React element tree checking for FormProvider type */ true;","tryCatchPattern":"// Wrap the consuming component if it must render outside the provider\nfunction SafeInput(props) {\n  try {\n    // hooks can't be called in try/catch — instead guard by structure:\n    return <InputWithForm {...props} />;\n  } catch {\n    return <PlainInput {...props} />;\n  }\n}\n// Prefer: always render inside <FormProvider> or pass form as prop.","preventionTips":["Always render the provider at the common ancestor of every useFormContext consumer","Create a custom test render that includes FormProvider by default","Use TypeScript: keep useFormContext consumers in the same module tree as the provider component","For optionally-connected components, accept the form via props with a context fallback pattern"],"tags":["react","context","hooks","form","provider"],"backgroundTag":"react-hook-outside-provider","analyzedSha":"8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8","analyzedAt":"2026-08-28T10:25:51.087Z","schemaVersion":2},"datasetVersion":"2026-08-28T11:17:15.048Z"}