{"record":{"id":"e82d4f4f29fb5888","repo":"transloadit/uppy","slug":"component-must-be-called-within-a-uppycontextprovi","errorCode":null,"errorMessage":"Component must be called within a UppyContextProvider","messagePattern":"Component must be called within a UppyContextProvider","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/@uppy/vue/src/headless/context-provider.ts","lineNumber":81,"sourceCode":"        },\n      })\n    })\n\n    onBeforeUnmount(() => {\n      uppyEventAdapter?.cleanup()\n    })\n\n    return () => slots.default?.()\n  },\n})\n\nexport default UppyContextProvider\n\nexport function injectUppyContext(): NonNullableUppyContext {\n  const ctx = inject<UppyContext>(UppyContextSymbol)\n\n  if (!ctx?.uppy) {\n    throw new Error('Component must be called within a UppyContextProvider')\n  }\n\n  return ctx as NonNullableUppyContext // covered by the if-statement above\n}\n","sourceCodeStart":63,"sourceCodeEnd":86,"githubUrl":"https://github.com/transloadit/uppy/blob/5d4dedd02a1ac0ae022c75c54aca76558f88e256/packages/@uppy/vue/src/headless/context-provider.ts#L63-L86","documentation":"injectUppyContext fails when a headless component is used outside a <UppyContextProvider>, or when the provider rendered but its uppy prop was never set. The inject() of UppyContextSymbol returned a context with no uppy instance.","triggerScenarios":"Using useFileInput()/any headless composable or component in a part of the Vue tree not wrapped by UppyContextProvider, or wrapped by a provider that never received an :uppy prop.","commonSituations":"Placing headless components in a different component than the provider; refactoring that accidentally removes the provider; multiple roots where the component sits outside the provided subtree.","solutions":["Wrap the component tree containing headless components in <UppyContextProvider :uppy=\"uppy\">","Ensure only one provider instance and that the components are its descendants"],"exampleFix":"// before\n<FileInput /> <!-- no provider ancestor -->\n// after\n<UppyContextProvider :uppy=\"uppy\"><FileInput /></UppyContextProvider>","handlingStrategy":"validation","validationCode":"// ensure component tree is inside provider\n// <UppyContextProvider :uppy=\"uppy\"> ...headless components... </UppyContextProvider>","typeGuard":"import { inject } from 'vue'\nconst insideProvider = (): boolean => inject(UppyContextSymbol, null)?.uppy != null","tryCatchPattern":null,"preventionTips":["Keep headless components as descendants of the single provider","Use a wrapper layout component that always includes the provider"],"tags":["vue","context","inject","provider"],"backgroundTag":"missing-context-provider","analyzedSha":"5d4dedd02a1ac0ae022c75c54aca76558f88e256","analyzedAt":"2026-08-28T12:18:41.267Z","schemaVersion":2},"datasetVersion":"2026-08-28T16:17:29.566Z"}