nextjs module_boundary ai_generated true

Error: This module cannot be imported from a Client Component module. It should only be used from a Server Component.

ID: nextjs/server-only-import-client

Also available as: JSON · Markdown
91%Fix Rate
92%Confidence
80Evidence
2023-01-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
14 active — — —

Root Cause

A module marked with 'server-only' or importing server-only APIs (e.g., database clients, fs, secret keys) is being imported into a 'use client' component. The Server/Client module boundary must be restructured.

generic

Workarounds

  1. 93% success Pass server data as props from a Server Component parent instead of importing the server module directly 
    // Server Component (page.tsx - no 'use client')
import { getSecretData } from '@/lib/server-data';
import { ClientDisplay } from './ClientDisplay';
export default async function Page() {
  const data = await getSecretData();
  return <ClientDisplay data={data} />;
}

    Sources: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#moving-client-components-down-the-tree

  2. 88% success Create a Server Action to fetch the data and call it from the client component 
    // actions.ts
'use server';
import { db } from '@/lib/db';
export async function fetchData(id: string) {
  return db.query(id);
}

// ClientComponent.tsx
'use client';
import { fetchData } from './actions';
// call fetchData in useEffect or form action

    Sources: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations

  3. 90% success Split the module into server-only and shared parts 
    // lib/utils-shared.ts (safe for client)
export function formatDate(d: Date) { ... }

// lib/utils-server.ts (import 'server-only')
import 'server-only';
import { formatDate } from './utils-shared';
export function getSecret() { ... }

    Sources: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns

Dead Ends

Common approaches that don't work:

  1. Remove 'use client' from the importing component 80% fail

    If the component uses hooks like useState or useEffect, removing 'use client' will cause a different error about hooks only being available in Client Components. The real issue is the import chain, not the directive.

  2. Remove the 'server-only' package import from the server module 90% fail

    Removing the 'server-only' guard suppresses the error but allows server secrets and credentials to leak into the client bundle. The error exists as a security boundary.

  3. Wrap the server-only import in a try-catch or dynamic import in the client component 95% fail

    The module boundary check happens at build time during module graph analysis, not at runtime. Dynamic import from a client component still includes the module in the client bundle graph.

Error Chain

Leads to:
Preceded by:
Frequently confused with: