{"record":{"id":"2c4ea6d228d4950f","repo":"shadcn-ui/ui","slug":"usepreviewoverride-must-be-used-within-a-previewov","errorCode":null,"errorMessage":"usePreviewOverride must be used within a PreviewOverrideProvider.","messagePattern":"usePreviewOverride must be used within a PreviewOverrideProvider\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"apps/v4/app/(app)/(create)/components/preview-override.tsx","lineNumber":104,"sourceCode":"    () => ({ setOverride, clearOverride }),\n    [setOverride, clearOverride]\n  )\n\n  return (\n    <PreviewOverrideActionsContext.Provider value={actions}>\n      <PreviewOverrideValueContext.Provider value={override}>\n        {children}\n      </PreviewOverrideValueContext.Provider>\n    </PreviewOverrideActionsContext.Provider>\n  )\n}\n\n// For pickers: stable setters only, never re-renders on override changes.\nexport function usePreviewOverride() {\n  const context = React.useContext(PreviewOverrideActionsContext)\n\n  if (!context) {\n    throw new Error(\n      \"usePreviewOverride must be used within a PreviewOverrideProvider.\"\n    )\n  }\n\n  return context\n}\n\n// For the preview iframe host: the current override value.\nexport function usePreviewOverrideValue() {\n  return React.useContext(PreviewOverrideValueContext)\n}\n","sourceCodeStart":86,"sourceCodeEnd":116,"githubUrl":"https://github.com/shadcn-ui/ui/blob/efac5987074af84ece57c367c6dd83387b967022/apps/v4/app/(app)/(create)/components/preview-override.tsx#L86-L116","documentation":"Standard React context guard. `usePreviewOverride` reads `PreviewOverrideActionsContext` via `React.useContext`; the context defaults to undefined/null, so calling the hook outside a mounted `<PreviewOverrideProvider>` throws immediately at render. The throw is intentional fail-fast: pickers rely on the stable setters the provider memoizes.","triggerScenarios":"Rendering a component that calls `usePreviewOverride()` (or `usePreviewOverrideValue()`) anywhere not nested under `<PreviewOverrideProvider>` — e.g. a picker rendered in a route segment, a storybook story, or a test render without the provider tree. Also triggered by rendering the consumer in a portal whose tree is outside the provider.","commonSituations":"Reorganizing the (create) route layout and forgetting to wrap a subtree; adding a new picker component that calls the hook before threading the provider; unit tests that shallow-render the picker in isolation; HMR after moving the provider.","solutions":["Wrap the consuming subtree with `<PreviewOverrideProvider>{...}</PreviewOverrideProvider>` so the hook resolves a context value.","If the consumer is in a portal/dialog, ensure the portal's React tree (not just the DOM tree) is inside the provider, or pass the value via props instead.","In tests/stories, add a decorator that mounts the provider around the component."],"exampleFix":"// before\n<MyPicker />\n\n// after\n<PreviewOverrideProvider>\n  <MyPicker />\n</PreviewOverrideProvider>","handlingStrategy":"type-guard","validationCode":"// In tests/dev tools, assert the provider is in the tree before rendering a picker.\nimport { render } from \"@testing-library/react\"\nfunction assertProvider(ui) {\n  // Wrap unconditionally; the hook will throw only if a consumer is truly outside.\n  return render(<PreviewOverrideProvider>{ui}</PreviewOverrideProvider>)\n}","typeGuard":"import React from \"react\"\nimport { PreviewOverrideActionsContext } from \"@/(app)/(create)/components/preview-override\"\nfunction isInPreviewOverrideProvider(): boolean {\n  return React.useContext(PreviewOverrideActionsContext) != null\n}\n// usage: if (!isInPreviewOverrideProvider()) return <Fallback/>","tryCatchPattern":"try {\n  return usePreviewOverride() // throws if outside provider\n} catch (e) {\n  if (e instanceof Error && e.message.includes(\"PreviewOverrideProvider\")) {\n    // Render a fallback or re-mount the provider.\n  }\n  throw e\n}","preventionTips":["Mount PreviewOverrideProvider once at the (create) route layout root.","Lint: forbid importing usePreviewOverride outside files under the provider's subtree.","Add a storybook decorator + test wrapper that always mounts the provider.","When using portals/dialogs, verify the React (not DOM) tree stays under the provider."],"tags":["react","context","hooks","shadcn-v4","preview"],"backgroundTag":null,"analyzedSha":"efac5987074af84ece57c367c6dd83387b967022","analyzedAt":"2026-08-12T05:00:50.218Z","schemaVersion":2},"datasetVersion":"2026-08-12T13:17:24.610Z"}