shadcn-ui/ui · error · Error

usePreviewOverride must be used within a TypesetPreviewOverr

Error message

usePreviewOverride must be used within a TypesetPreviewOverrideProvider.

What it means

Typeset variant of [141]. `usePreviewOverride` reads `PreviewOverrideActionsContext`; if `React.useContext` returns falsy (no `<PreviewOverrideProvider>` ancestor in the (typeset) subtree) it throws the Typeset-specific message. Same fail-fast contract: pickers need the memoized setters.

Source

Thrown at apps/v4/app/(app)/(typeset)/components/preview-override.tsx:104

    () => ({ setOverride, clearOverride }),
    [setOverride, clearOverride]
  )

  return (
    <PreviewOverrideActionsContext.Provider value={actions}>
      <PreviewOverrideValueContext.Provider value={override}>
        {children}
      </PreviewOverrideValueContext.Provider>
    </PreviewOverrideActionsContext.Provider>
  )
}

// For pickers: stable setters only, never re-renders on override changes.
export function usePreviewOverride() {
  const context = React.useContext(PreviewOverrideActionsContext)

  if (!context) {
    throw new Error(
      "usePreviewOverride must be used within a TypesetPreviewOverrideProvider."
    )
  }

  return context
}

// For the preview iframe host: the current override value.
export function usePreviewOverrideValue() {
  return React.useContext(PreviewOverrideValueContext)
}

View on GitHub (pinned to efac598707)

Solutions

Wrap the typeset subtree in `<PreviewOverrideProvider>` from this file (apps/v4/app/(app)/(typeset)/components/preview-override.tsx), not the (create) one.
Verify the import path: import the provider/hook from the (typeset) module to match the context instance.
Decorate tests/stories with the typeset provider.

Example fix

// before
<TypesetPicker />

// after
import { PreviewOverrideProvider } from "@/(app)/(typeset)/components/preview-override"
<PreviewOverrideProvider>
  <TypesetPicker />
</PreviewOverrideProvider>

Defensive patterns

Strategy: type-guard

Validate before calling

render(<PreviewOverrideProvider>{<TypesetPicker/>}</PreviewOverrideProvider>) // import from (typeset) module

Type guard

import React from "react"
import { PreviewOverrideActionsContext } from "@/(app)/(typeset)/components/preview-override"
const hasTypesetPreviewOverride = () => React.useContext(PreviewOverrideActionsContext) != null

Try / catch

try { usePreviewOverride() } catch (e) { if (e.message.includes("TypesetPreviewOverrideProvider")) {/*wrap with (typeset) provider*/} throw e }

Prevention

Import the provider and hook from the (typeset) module, not (create), so the context identity matches.
Wrap the (typeset) route subtree once with PreviewOverrideProvider.
Add the typeset provider to story/test decorators for typeset pickers.

When it happens

Trigger: A typeset picker/preview consumer rendered outside `<PreviewOverrideProvider>` within the (typeset) route group; copy-pasting a (create) component into the (typeset) tree without ensuring the typeset provider wraps it.

Common situations: Sharing picker components between create/typeset surfaces but mounting them in typeset without the typeset provider; route layout changes; isolated tests/stories.

Related errors

AI-assisted analysis of shadcn-ui/ui@efac598707 (2026-08-12). Data as JSON: /api/errors/05791bda6c9978ee. Report an issue: GitHub.