shadcn-ui/ui · error · Error

Failed to load ${config.tsx ? "tsconfig" : "jsconfig"}.json.

Error message

Failed to load ${config.tsx ? "tsconfig" : "jsconfig"}.json. ${tsConfig.message ?? ""}

What it means

Thrown by resolveConfigPaths when the tsconfig/jsconfig loader (loadConfig from tsconfig-paths) reports resultType === "failed". shadcn needs the TS/JS config to resolve path aliases, so a failed load aborts config resolution. The message includes the loader's own message when present.

Source

Thrown at packages/shadcn/src/utils/get-config.ts:61

  return await resolveConfigPaths(cwd, config)
}

export async function resolveConfigPaths(
  cwd: string,
  config: z.infer<typeof rawConfigSchema>
) {
  // Merge built-in registries with user registries
  config.registries = {
    ...BUILTIN_REGISTRIES,
    ...(config.registries || {}),
  }

  // Read tsconfig.json.
  const tsConfig = await loadConfig(cwd)

  if (tsConfig.resultType === "failed") {
    throw new Error(
      `Failed to load ${config.tsx ? "tsconfig" : "jsconfig"}.json. ${
        tsConfig.message ?? ""
      }`.trim()
    )
  }

  // Resolve the primary aliases first so fallbacks can reuse their results.
  const resolvedUtils = await resolveAliasPath(
    "utils",
    config.aliases["utils"],
    cwd,
    tsConfig
  )
  const resolvedComponents = await resolveAliasPath(
    "components",
    config.aliases["components"],
    cwd,
    tsConfig

View on GitHub (pinned to efac598707)

Solutions

  1. Ensure a valid tsconfig.json (or jsconfig.json for JS projects) exists at the cwd shown in the message.
  2. Open the config and fix any JSON syntax errors; validate with `npx tsc --noEmit` or a JSON linter.
  3. Check every "extends" target resolves (install missing packages or correct the path).
  4. Re-run `npx shadcn@latest init` if the project config is unrecoverable.

Example fix

// tsconfig.json (before) — trailing comma / broken JSON
{
  "compilerOptions": { "paths": { "@/*": ["./src/*"] } },
}
// after
{
  "compilerOptions": { "paths": { "@/*": ["./src/*"] } }
}
Defensive patterns

Strategy: validation

Validate before calling

import { loadConfig } from "tsconfig-paths"
const tsConfig = await loadConfig(cwd)
if (tsConfig.resultType === "failed") {
  throw new Error(`tsconfig load failed: ${tsConfig.message ?? "unknown"}`)
}

Type guard

const isTsConfigOk = (c: any) => c.resultType === "success"

Try / catch

try {
  await getConfig(cwd)
} catch (e) {
  if (e instanceof Error && /Failed to load (ts|js)config/.test(e.message)) {
    // guide user to fix tsconfig.json
  }
  throw e
}

Prevention

When it happens

Trigger: During getConfig/resolveConfigPaths, loadConfig(cwd) returns { resultType: 'failed', message }. This happens when tsconfig.json (or jsconfig.json when config.tsx is false) is missing, unreadable, malformed JSON, or references extends paths that cannot be resolved.

Common situations: Running shadcn in a directory without a tsconfig.json; tsconfig.json with a syntax/JSON error; an "extends" pointing at a non-existent package; corrupt jsconfig.json in a non-TSX project; running from the wrong directory.

Related errors


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