How to fix Cannot import a Server Component from a Client Component in React

What this error means

In Next.js 13+ with the App Router, all components are Server Components by default unless marked with the "use client" directive. Server Components run only on the server and have access to server-only APIs like databases, file systems, and environment variables. Client Components run on both the server (for pre-rendering) and in the browser, supporting interactivity with hooks like useState and useEffect. When you import a component into a Client Component, that imported component is included in the client-side JavaScript bundle. This means it will run in the browser and must adhere to client-side constraints. If the imported component uses server-only features (like direct database queries or server-only packages), those will fail in the browser environment. Next.js prevents this by design: you cannot directly import Server Components into Client Components. Any component imported into a Client Component is automatically treated as a Client Component, and if it contains server-only code, you will get build-time or runtime errors.

Typical symptoms

• Build fails with "You're importing a component that needs [server-only API]" error
• Error message states "Cannot import a Server Component from a Client Component"
• Component with database queries or server-only code fails when imported into a file with "use client"
• Getting "server-only" module import errors during compilation
• Hydration errors or mismatches between server and client rendering
• Components that work in Server Components break when moved to Client Component imports
• Build warnings about importing components that use async/await for data fetching into Client Components

Common causes

1. Directly importing a component that uses server-only features (database access, file system) into a Client Component
2. Importing a component that calls async Server Components or Server Actions directly
3. Trying to use a Server Component as a direct child in a Client Component's JSX import
4. Misunderstanding the component tree boundary between Server and Client Components
5. Importing components with "server-only" package protection into Client Components
6. Attempting to pass Server Component functions or async components as props to Client Components
7. Not using the children prop pattern to compose Server Components within Client Component layouts
8. Converting a Server Component to a Client Component without refactoring its server-only dependencies

How to fix "Cannot import a Server Component from a Client Component"

// ❌ WRONG: Directly importing Server Component into Client Component
"use client"
import ServerComponent from "./server-component"

export default function ClientComponent() {
  return <div><ServerComponent /></div>
}

// ✅ CORRECT: Pass as children prop
// app/page.tsx (Server Component)
import ClientComponent from "./client-component"
import ServerComponent from "./server-component"

export default function Page() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  )
}

// app/client-component.tsx
"use client"

export default function ClientComponent({ children }: { children: React.ReactNode }) {
  return <div className="wrapper">{children}</div>
}

// ❌ WRONG: Mixed responsibilities
"use client"
import { useState } from "react"
import { db } from "@/lib/db"

export default function MixedComponent() {
  const posts = await db.post.findMany() // Error! Cannot use db in Client Component
  const [selected, setSelected] = useState(null)
  // ...
}

// ✅ CORRECT: Split into Server + Client
// app/posts-page.tsx (Server Component)
import { db } from "@/lib/db"
import PostsList from "./posts-list"

export default async function PostsPage() {
  const posts = await db.post.findMany()
  return <PostsList posts={posts} />
}

// app/posts-list.tsx (Client Component)
"use client"
import { useState } from "react"

export default function PostsList({ posts }: { posts: Post[] }) {
  const [selected, setSelected] = useState(null)
  // Client-side interactivity only
}

// app/actions.ts (Server Action)
"use server"
import { db } from "@/lib/db"

export async function createPost(formData: FormData) {
  const title = formData.get("title") as string
  await db.post.create({ data: { title } })
}

// app/post-form.tsx (Client Component)
"use client"
import { createPost } from "./actions"

export default function PostForm() {
  return (
    <form action={createPost}>
      <input name="title" />
      <button type="submit">Create</button>
    </form>
  )
}

npm install server-only

// lib/database.ts
import "server-only"
import { PrismaClient } from "@prisma/client"

export const db = new PrismaClient()

npm install client-only

// components/counter.tsx
"use client"
import { useState } from "react"

export default function Counter() {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  )
}

// Example component hierarchy

app/page.tsx (Server Component)
├─ Header (Server Component)
├─ SearchBar (Client Component) ← "use client" boundary
│  └─ SearchIcon (Client Component - imported into Client)
├─ PostsList (Server Component)
│  ├─ PostCard (Server Component)
│  └─ LikeButton (Client Component) ← "use client" boundary
└─ Footer (Server Component)

Advanced notes

Frequently asked questions

What does "Cannot import a Server Component from a Client Component" mean?

js 13+ with the App Router, all components are Server Components by default unless marked with the "use client" directive. Server Components run only on the server and have access to server-only APIs like databases, file systems, and environment variables. Client Components run on both the server (for pre-rendering) and in the browser, supporting interactivity with hooks like useState and useEffect.

How do I fix "Cannot import a Server Component from a Client Component"?

This error occurs in Next.js when you try to directly import a Server Component into a Client Component marked with "use client". Client Components cannot import Server Components because any imported component becomes part of the client bundle and loses server-only capabilities.

What causes "Cannot import a Server Component from a Client Component"?

Directly importing a component that uses server-only features (database access, file system) into a Client Component Importing a component that calls async Server Components or Server Actions directly Trying to use a Server Component as a direct child in a Client Component's JSX import

Is the "Cannot import a Server Component from a Client Component" error serious?

It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Related errors

• Dynamic route segments cannot be cached indefinitely

  How to fix "Dynamic route segments cannot be cached indefinitely" in React

  MEDIUM

• Component must be async if it uses async/await

  Component must be async if it uses async/await

  MEDIUM

• Cannot use fetch in a non-async function

  Cannot use fetch in a non-async function

  MEDIUM

• Hook can only be called inside the body of a function component

  Hook can only be called inside the body of a function component

  HIGH

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation
• 📖
  Next.js: Server and Client Components(Official Docs)
• 🐙
  GitHub Discussion: Importing server components into client components(GitHub)
• Demystifying RSC: Importing Server Components into Client Components
• 📖
  Next.js Learn: React Foundations - Server and Client Components(Official Docs)
• Client components and the "use client" directive in Next.js 13