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

- **ID:** `nextjs/server-component-import-client-side-only-module`
- **Domain:** nextjs
- **Category:** module_error
- **Verification:** ai_generated
- **Fix Rate:** 90%

## 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.

## Version Compatibility

| Version | Status | Introduced | Deprecated |
|---------|--------|------------|------------|
| Next.js 13.4.0 | active | — | — |
| Next.js 14.0.0 | active | — | — |
| Next.js 14.2.0 | active | — | — |

## Workarounds

1. **Use dynamic import with ssr: false to load the module only on the client: 'const MyComponent = dynamic(() => import('./MyClientComponent'), { ssr: false })'.** (95% success)
   ```
   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.** (90% success)
   ```
   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.** (70% success)
   ```
   If the module is small, refactor it to avoid browser APIs and make it usable on the server.
   ```

## Dead Ends

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