shadcn-ui/ui · error

Failed to fetch registry item: ${response.statusText}

Error message

Failed to fetch registry item: ${response.statusText}

What it means

getRegistryItemFile() fetches a component JSON from `${NEXT_PUBLIC_APP_URL}/r/styles/<style>/<name>.json` and throws when the response is not ok, surfacing response.statusText. It is the network boundary for pulling per-component registry files during v0 payload generation.

Source

Thrown at apps/v4/app/(app)/(create)/lib/v0.ts:583

      components: "./components",
      lib: "./lib",
      hooks: "./hooks",
      ui: "./components/ui",
    },
  } satisfies z.infer<typeof configSchema>
}

async function getRegistryItemFile(
  name: string,
  designSystemConfig: DesignSystemConfig,
  config: z.infer<typeof configSchema>
) {
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_APP_URL}/r/styles/${getStyle(designSystemConfig)}/${name}.json`
  )

  if (!response.ok) {
    throw new Error(`Failed to fetch registry item: ${response.statusText}`)
  }

  const json = await response.json()
  const item = registryItemSchema.parse(json)

  const file = item.files?.[0]
  if (!file?.content) {
    return null
  }

  const content = await transformFileContent(file.content, config)

  return {
    ...file,
    target:
      name === "example"
        ? "components/example.tsx"
        : `components/ui/${name}.tsx`,

View on GitHub (pinned to efac598707)

Solutions

  1. Ensure NEXT_PUBLIC_APP_URL is set and reachable (e.g. http://localhost:3000) and that the Next.js dev server is up.
  2. Confirm the component <name> exists under /r/styles/<base>-<style>/ in the registry.
  3. On 404, treat the component as unavailable and skip it instead of throwing.
  4. Add a retry with backoff for transient non-4xx failures.

Example fix

// before
const response = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/r/styles/${style}/${name}.json`)
if (!response.ok) throw new Error(`Failed to fetch registry item: ${response.statusText}`)

// after
if (!process.env.NEXT_PUBLIC_APP_URL) throw new Error("NEXT_PUBLIC_APP_URL is not set")
const response = await fetch(url)
if (response.status === 404) return null // component unavailable
if (!response.ok) throw new Error(`Failed to fetch registry item: ${response.statusText}`)
Defensive patterns

Strategy: retry

Validate before calling

if (!process.env.NEXT_PUBLIC_APP_URL) {
  throw new Error("NEXT_PUBLIC_APP_URL must be set to fetch registry items")
}
const probe = await fetch(
  `${process.env.NEXT_PUBLIC_APP_URL}/r/styles/${style}/${name}.json`,
  { method: "HEAD" }
)
if (!probe.ok) {
  // skip or fallback before calling getRegistryItemFile
}

Try / catch

try {
  const file = await getRegistryItemFile(name, config, cfg)
} catch (e) {
  if (/Failed to fetch registry item/.test((e as Error).message)) {
    // log, retry once for transient failures, or degrade gracefully
  } else throw e
}

Prevention

When it happens

Trigger: NEXT_PUBLIC_APP_URL unset or wrong so the fetch hits a non-existent host or path; the Next.js dev server not running; the requested component name does not exist for the given style (404); a proxy or gateway returning 5xx.

Common situations: Local dev with a misconfigured environment variable; deploying without setting NEXT_PUBLIC_APP_URL; referencing a component removed from the registry; transient network blips.

Related errors


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