# 错误：此模块无法从服务器组件模块中导入。它只能从客户端组件中使用。

- **ID:** `nextjs/server-component-import-client-side-only-module`
- **领域:** nextjs
- **类别:** module_error
- **验证级别:** ai_generated
- **修复率:** 90%

## 根因

一个使用浏览器专用 API（如 window, document）或在模块级别标记了 'use client' 的模块被导入到服务器组件中，而服务器组件在服务器上运行，这些 API 不存在。

## 版本兼容性

| 版本 | 状态 | 引入 | 弃用 |
|------|------|------|------|
| Next.js 13.4.0 | active | — | — |
| Next.js 14.0.0 | active | — | — |
| Next.js 14.2.0 | active | — | — |

## 解决方案

1. ```
   Use dynamic import with ssr: false to load the module only on the client: 'const MyComponent = dynamic(() => import('./MyClientComponent'), { ssr: false })'.
   ```
2. ```
   Create a wrapper Client Component that imports the module and pass props from the Server Component.
   ```
3. ```
   If the module is small, refactor it to avoid browser APIs and make it usable on the server.
   ```

## 无效尝试

- **** — This converts the entire Server Component to a Client Component, losing server-side benefits and potentially causing other issues. (60% 失败率)
- **** — The module may still use browser APIs internally; removing the directive doesn't make the code run on the server. (70% 失败率)
- **** — Dynamic import alone still runs on the server during SSR; use ssr: false to disable server-side rendering. (80% 失败率)