{"record":{"id":"a94e5a3afee1ff1b","repo":"shadcn-ui/ui","slug":"component-must-be-used-within-a-questionnaire-r","errorCode":null,"errorMessage":"${component} must be used within a Questionnaire.Root component.","messagePattern":"(.+?) must be used within a Questionnaire\\.Root component\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/react/src/questionnaire/context.ts","lineNumber":20,"sourceCode":"\nimport type {\n  QuestionnaireChoiceContextValue,\n  QuestionnaireContextValue,\n  QuestionnaireItemContextValue,\n} from \"./types\"\n\nconst QuestionnaireChoiceContext =\n  React.createContext<QuestionnaireChoiceContextValue | null>(null)\nconst QuestionnaireContext =\n  React.createContext<QuestionnaireContextValue | null>(null)\nconst QuestionnaireItemContext =\n  React.createContext<QuestionnaireItemContextValue | null>(null)\n\nfunction useQuestionnaireContext(component: string) {\n  const context = React.useContext(QuestionnaireContext)\n\n  if (!context) {\n    throw new Error(\n      `${component} must be used within a Questionnaire.Root component.`\n    )\n  }\n\n  return context\n}\n\nfunction useQuestionnaireChoiceContext(component: string) {\n  const context = React.useContext(QuestionnaireChoiceContext)\n\n  if (!context) {\n    throw new Error(\n      `${component} must be used within a Questionnaire.Choice component.`\n    )\n  }\n\n  return context\n}","sourceCodeStart":2,"sourceCodeEnd":38,"githubUrl":"https://github.com/shadcn-ui/ui/blob/efac5987074af84ece57c367c6dd83387b967022/packages/react/src/questionnaire/context.ts#L2-L38","documentation":"useQuestionnaireContext() reads the QuestionnaireContext; if a Questionnaire subcomponent that uses this hook is rendered outside a <Questionnaire.Root> provider, the context is null and the hook throws. It is the standard 'hook used outside its provider' guard for the Root-scoped parts.","triggerScenarios":"Rendering a Root-scoped Questionnaire part (e.g. Content, Title) without a <Questionnaire.Root> ancestor; importing a part into a different React tree; conditional rendering that drops the Root but keeps the children.","commonSituations":"Refactoring layout and forgetting the Root; mounting a single part in isolation or in tests without a provider.","solutions":["Wrap the Questionnaire tree in <Questionnaire.Root>...</Questionnaire.Root>.","For tests, render the part inside a Root (or a manual provider).","Move the offending part under the Root in the JSX tree."],"exampleFix":"// before\n<Questionnaire.Item /> // throws: no Root ancestor\n\n// after\n<Questionnaire.Root>\n  <Questionnaire.Item />\n</Questionnaire.Root>","handlingStrategy":"validation","validationCode":"import * as React from \"react\"\nimport { QuestionnaireContext } from \"@/questionnaire/context\"\n// inside a component: peek without throwing\nconst ctx = React.useContext(QuestionnaireContext)\nif (!ctx) return null // render nothing instead of throwing","typeGuard":"import * as React from \"react\"\nimport { QuestionnaireContext } from \"@/questionnaire/context\"\nfunction useOptionalQuestionnaire() {\n  return React.useContext(QuestionnaireContext) // null when outside Root\n}","tryCatchPattern":null,"preventionTips":["Always wrap Questionnaire parts in <Questionnaire.Root>.","In tests, render parts inside a Root provider rather than in isolation.","Use a lint rule or wrapper component so Root-scoped parts cannot be imported bare."],"tags":["react","context","questionnaire","provider"],"backgroundTag":null,"analyzedSha":"efac5987074af84ece57c367c6dd83387b967022","analyzedAt":"2026-08-12T05:00:50.218Z","schemaVersion":2},"datasetVersion":"2026-08-12T13:17:24.610Z"}