shadcn-ui/ui · error · Error

useHistory must be used within TypesetHistoryProvider

Error message

useHistory must be used within TypesetHistoryProvider

What it means

Typeset variant of [142]. `useHistory` reads `HistoryContext`; `TypesetHistoryProvider` mounts it together with a `<ParamsSync onChange={...}>` Suspense boundary. A consumer outside that provider gets undefined and throws, ensuring the params-history API is always present.

Source

Thrown at apps/v4/app/(app)/(typeset)/hooks/use-history.tsx:179

  const value = React.useMemo(
    () => ({ canGoBack, canGoForward, goBack, goForward }),
    [canGoBack, canGoForward, goBack, goForward]
  )

  return (
    <HistoryContext value={value}>
      <Suspense>
        <ParamsSync onChange={onChange} />
      </Suspense>
      {children}
    </HistoryContext>
  )
}

export function useHistory() {
  const context = React.useContext(HistoryContext)
  if (!context) {
    throw new Error("useHistory must be used within TypesetHistoryProvider")
  }
  return context
}

View on GitHub (pinned to efac598707)

Solutions

Mount `<TypesetHistoryProvider onChange={...}>` above every typeset subtree that calls `useHistory()`.
Import the provider/hook from the (typeset) module so the context identity matches.
Wrap tests in the provider plus a Suspense boundary.

Example fix

// before
<TypesetPanel />

// after
import { TypesetHistoryProvider } from "@/(app)/(typeset)/hooks/use-history"
<TypesetHistoryProvider onChange={syncParams}>
  <TypesetPanel />
</TypesetHistoryProvider>

Defensive patterns

Strategy: type-guard

Validate before calling

render(<TypesetHistoryProvider onChange={() => {}}>{<TypesetPanel/>}</TypesetHistoryProvider>)

Type guard

import React from "react"
import { HistoryContext } from "@/(app)/(typeset)/hooks/use-history"
const hasTypesetHistory = () => React.useContext(HistoryContext) != null

Try / catch

try { useHistory() } catch (e) { if (e.message.includes("TypesetHistoryProvider")) {/*remount (typeset) provider*/} throw e }

Prevention

Mount TypesetHistoryProvider (with Suspense + ParamsSync) at the (typeset) layout root.
Import from the (typeset) module to match context identity.
Add the provider to test decorators.

When it happens

Trigger: A typeset component calling `useHistory()` rendered outside `<TypesetHistoryProvider>`, e.g. reusing a (create) history-aware component under the (typeset) route without the typeset provider, or after refactoring the typeset layout.

Common situations: Cross-route component reuse; layout refactor dropping the provider; isolated test renders.

Related errors

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