Troubleshooting import errors when using third-party libraries

Why import errors happen in V0 projects

V0 generates code with @/ import paths (like @/components/ui/button) that rely on TypeScript path aliases configured in tsconfig.json. These work in V0's sandbox but fail when code is exported to projects without the alias configured, or when the project structure does not match V0's expected layout. The second major source of import errors is esm.sh — V0's preview sandbox resolves npm packages through this CDN, and some packages (Phaser, @supabase/ssr, certain AI SDK packages) fail to load because they lack ESM-compatible builds. The third issue is V0 referencing packages in import statements without actually adding them to package.json, which only surfaces when you run npm install locally.

• V0 uses @/ import paths that require tsconfig.json path alias configuration not present in exported projects
• esm.sh in V0's preview cannot resolve packages with CommonJS-only builds or complex dependencies
• V0 generates imports for packages not listed in package.json, relying on sandbox pre-installation
• shadcn component references point to registry entries that do not exist (date-picker, toaster, color-picker)
• Relative import paths break when V0 moves or renames files during regeneration

Error messages you might see

Before you start

• A V0 project with import errors in the preview or after export
• Access to the V0 code editor for inspecting import paths and package.json
• Basic understanding of TypeScript path aliases and npm package resolution

How to fix it

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "esnext"],
    "strict": true
  }
}

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "esnext"],
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

// Build errors:
// Module not found: Can't resolve 'canvas-confetti'
// Module not found: Can't resolve 'date-fns'
// Module not found: Can't resolve 'lucide-react'

// Install missing packages:
// npm install canvas-confetti date-fns lucide-react
// npm install -D @types/canvas-confetti

// Fails in V0 preview:
import { createBrowserClient } from "@supabase/ssr"
// Error: Import Error | Failed to load "@supabase/ssr"

// Workaround for V0 preview:
import { createClient } from "@supabase/supabase-js"
const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)
// After export, switch to @supabase/ssr for proper SSR support

// This fails:
// npx shadcn add "https://v0.dev/chat/b/xxx/json"
// Error: component not found in registry

// Download as ZIP from V0 instead
// OR install the component parts:
// npx shadcn add popover calendar
// npx shadcn add sonner  (replaces toast/toaster)

Complete code example

1{
2  "compilerOptions": {
3    "target": "ES2017",
4    "lib": ["dom", "dom.iterable", "esnext"],
5    "allowJs": true,
6    "skipLibCheck": true,
7    "strict": true,
8    "noEmit": true,
9    "esModuleInterop": true,
10    "module": "esnext",
11    "moduleResolution": "bundler",
12    "resolveJsonModule": true,
13    "isolatedModules": true,
14    "jsx": "preserve",
15    "incremental": true,
16    "plugins": [
17      {
18        "name": "next"
19      }
20    ],
21    "baseUrl": ".",
22    "paths": {
23      "@/*": ["./*"]
24    }
25  },
26  "include": [
27    "next-env.d.ts",
28    "**/*.ts",
29    "**/*.tsx",
30    ".next/types/**/*.ts"
31  ],
32  "exclude": ["node_modules"]
33}

Best practices to prevent this

• Always verify tsconfig.json has @/ path alias configured when setting up a V0 export locally
• Run npm run build locally after export to catch all missing packages before deploying
• Download V0 projects as ZIP when npx shadcn add fails for specific components
• Check esm.sh compatibility before relying on a package in V0 preview — visit https://esm.sh/package-name
• Keep a consistent import style (@/ for project files, package names for node_modules) across all V0 components
• Install @types packages for every untyped npm dependency to prevent TypeScript build failures
• Use npx shadcn add for individual components instead of the deprecated npx v0 add command

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns

Explore related guides

Guides from other topics that help with this issue