{"record":{"id":"baddfb4912fb3693","repo":"vercel/next.js","slug":"using-client-components-is-not-allowed-in-this-env","errorCode":null,"errorMessage":"Using Client Components is not allowed in this environment.","messagePattern":"Using Client Components is not allowed in this environment\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/next/src/client/use-client-disallowed.ts","lineNumber":5,"sourceCode":"const error = new Proxy(\n  {},\n  {\n    get(_target) {\n      throw new Error(\n        'Using Client Components is not allowed in this environment.'\n      )\n    },\n  }\n)\nexport default new Proxy(\n  {},\n  {\n    get: (_target, p) => {\n      if (p === '__esModule') return true\n      return error\n    },\n  }\n)\n","sourceCodeStart":1,"sourceCodeEnd":20,"githubUrl":"https://github.com/vercel/next.js/blob/0ae8c72462952df163f1b1e0726641bc5b40dc93/packages/next/src/client/use-client-disallowed.ts#L1-L20","documentation":"`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).","triggerScenarios":"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.","commonSituations":"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.","solutions":["Ensure Client Components are only rendered as elements (`<ClientComponent />`) from Server Components, not by calling their hooks/functions directly.","Move client-only logic behind a `'use client'` boundary and pass serializable props from the server.","Audit third-party imports — if a dependency is client-only, wrap it in a Client Component."],"exampleFix":"// before — Server Component imports client module directly\nimport { useThing } from './client-hook' // 'use client' module\nexport default function Page() { useThing() /* throws via Proxy */ }\n\n// after — pass client logic into a Client Component\nimport ClientWidget from './ClientWidget' // 'use client'\nexport default function Page() {\n  return <ClientWidget initial={...} />\n}","handlingStrategy":"type-guard","validationCode":"// Ensure client modules are only imported by client components.\n// Audit that no Server Component imports a 'use client' module's internals directly.","typeGuard":"// No runtime guard — the Proxy throws on access. Prevention is architectural:\n// keep 'use client' boundaries clean and pass serializable props.","tryCatchPattern":null,"preventionTips":["Render Client Components as JSX elements from Server Components; do not call their hooks directly.","Mark client-only utility modules with 'use client' and import them only from client files.","Audit third-party dependencies for implicit client-only behavior before importing into server code."],"tags":["server-components","client-components","rsc","bundling"],"analyzedSha":"0ae8c72462952df163f1b1e0726641bc5b40dc93","analyzedAt":"2026-08-06T19:44:29.143Z","schemaVersion":2},"datasetVersion":"2026-08-07T02:17:10.218Z"}