vercel/next.js · error · Error

Using Client Components is not allowed in this environment.

Error message

Using Client Components is not allowed in this environment.

What it means

`use-client-disallowed.ts` exports a `Proxy` whose `get` trap throws this `Error` on any property access. Next.js swaps in this module for `react` (or `'use client'` modules) in environments where Client Components are forbidden — notably when a Client Component is imported into a Server Component graph running in a context that cannot execute client modules (e.g. server-only RSC bundles, certain edge constraints).

Source

Thrown at packages/next/src/client/use-client-disallowed.ts:5

const error = new Proxy(
  {},
  {
    get(_target) {
      throw new Error(
        'Using Client Components is not allowed in this environment.'
      )
    },
  }
)
export default new Proxy(
  {},
  {
    get: (_target, p) => {
      if (p === '__esModule') return true
      return error
    },
  }
)

View on GitHub (pinned to 0ae8c72462)

Solutions

  1. Ensure Client Components are only rendered as elements (`<ClientComponent />`) from Server Components, not by calling their hooks/functions directly.
  2. Move client-only logic behind a `'use client'` boundary and pass serializable props from the server.
  3. Audit third-party imports — if a dependency is client-only, wrap it in a Client Component.

Example fix

// before — Server Component imports client module directly
import { useThing } from './client-hook' // 'use client' module
export default function Page() { useThing() /* throws via Proxy */ }

// after — pass client logic into a Client Component
import ClientWidget from './ClientWidget' // 'use client'
export default function Page() {
  return <ClientWidget initial={...} />
}
Defensive patterns

Strategy: type-guard

Validate before calling

// Ensure client modules are only imported by client components.
// Audit that no Server Component imports a 'use client' module's internals directly.

Type guard

// No runtime guard — the Proxy throws on access. Prevention is architectural:
// keep 'use client' boundaries clean and pass serializable props.

Prevention

When it happens

Trigger: Importing a module marked `'use client'` (or the `react` client entry) into a Server Component that is bundled for an environment disallowing client modules; the bundler remaps the import to this Proxy stub, and any property read triggers the throw.

Common situations: Importing a Client Component into a Server Component incorrectly; misconfigured `serverComponents` setup; a third-party library that is client-only being pulled into a server bundle; using `react` APIs that are client-only in an RSC.

Related errors


AI-assisted analysis of vercel/next.js@0ae8c72462 (2026-08-06). Data as JSON: /api/errors/baddfb4912fb3693. Report an issue: GitHub.