{
  "id": "nextjs/server-component-import-client-side-only-module",
  "signature": "Error: This module cannot be imported from a Server Component module. It should only be used from a Client Component.",
  "signature_zh": "错误：此模块无法从服务器组件模块中导入。它只能从客户端组件中使用。",
  "regex": "Error: This module cannot be imported from a Server Component module\\. It should only be used from a Client Component\\.",
  "domain": "nextjs",
  "category": "module_error",
  "subcategory": null,
  "root_cause": "A module that uses browser-only APIs (e.g., window, document) or is marked with 'use client' at the module level is imported into a Server Component, which runs on the server where those APIs don't exist.",
  "root_cause_type": "generic",
  "root_cause_zh": "一个使用浏览器专用 API（如 window, document）或在模块级别标记了 'use client' 的模块被导入到服务器组件中，而服务器组件在服务器上运行，这些 API 不存在。",
  "versions": [
    {
      "version": "Next.js 13.4.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "Next.js 14.0.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "Next.js 14.2.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "",
      "why_fails": "This converts the entire Server Component to a Client Component, losing server-side benefits and potentially causing other issues.",
      "fail_rate": 0.6,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "The module may still use browser APIs internally; removing the directive doesn't make the code run on the server.",
      "fail_rate": 0.7,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "Dynamic import alone still runs on the server during SSR; use ssr: false to disable server-side rendering.",
      "fail_rate": 0.8,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "Use dynamic import with ssr: false to load the module only on the client: 'const MyComponent = dynamic(() => import('./MyClientComponent'), { ssr: false })'.",
      "success_rate": 0.95,
      "how": "Use dynamic import with ssr: false to load the module only on the client: 'const MyComponent = dynamic(() => import('./MyClientComponent'), { ssr: false })'.",
      "condition": "",
      "sources": []
    },
    {
      "action": "Create a wrapper Client Component that imports the module and pass props from the Server Component.",
      "success_rate": 0.9,
      "how": "Create a wrapper Client Component that imports the module and pass props from the Server Component.",
      "condition": "",
      "sources": []
    },
    {
      "action": "If the module is small, refactor it to avoid browser APIs and make it usable on the server.",
      "success_rate": 0.7,
      "how": "If the module is small, refactor it to avoid browser APIs and make it usable on the server.",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "Use dynamic import with ssr: false to load the module only on the client: 'const MyComponent = dynamic(() => import('./MyClientComponent'), { ssr: false })'.",
    "Create a wrapper Client Component that imports the module and pass props from the Server Component.",
    "If the module is small, refactor it to avoid browser APIs and make it usable on the server."
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://nextjs.org/docs/app/building-your-application/rendering/server-components#third-party-packages",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.87,
  "fix_success_rate": 0.9,
  "resolvable": "true",
  "first_seen": "2023-05-10",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}