You're importing a module that depends on `useState` into a React Server Component module. This API is only available in Client Components. To fix, mark the file (or its parent) with the `"use client"` directive.

Next.js · updated 2026-11-04

Reported by the Next.js compiler (next dev and next build) when a file treated as a Server Component, which is every file in app/ by default, imports a React API that only runs in the browser: useState, useEffect, useReducer, useRef, createContext, class components. The import trace under the message shows which file pulled it in.

 ⨯ ./components/like-button.tsx
Error:   x You're importing a module that depends on `useState` into a React Server Component module. This API is only available in Client Components. To fix, mark the file (or its parent) with the `"use client"` directive.
Import trace for requested module:
  ./components/like-button.tsx
  ./app/posts/[id]/page.tsx

Quick fix

Put "use client" at the very top of the file that uses the hook (the first line, before imports), not on the page. Keep the page a Server Component and pass data to the client component as props. For a third-party component that uses hooks but ships without "use client", re-export it from a small file of your own that starts with "use client".

1. Read the import trace: the first file listed is the one that uses the client-only API.
2. Add "use client" as the first line of that file.
3. Leave pages and layouts as Server Components; fetch data there and pass it down as props (props must be serializable).
4. Third-party component without "use client": create a wrapper file with "use client" that re-exports it, and import the wrapper.
5. If you moved the directive and still see it, make sure it's the first statement: a directive below an import is ignored.

// components/like-button.tsx
'use client'; // first line, before imports

import { useState } from 'react';

export function LikeButton({ initial }: { initial: number }) {
  const [likes, setLikes] = useState(initial);
  return <button onClick={() => setLikes(likes + 1)}>{likes} likes</button>;
}

// app/posts/[id]/page.tsx stays a Server Component:
// <LikeButton initial={post.likes} />

Why it happens

Other fixes

• Mark only the interactive leaf components as client components; marking a whole page "use client" sends all of its code to the browser and loses server-only data fetching.
• Context providers need their own "use client" file; render the provider in a layout and keep the layout itself a Server Component.

Same error, other wording

• You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
• You're importing a module that depends on `useEffect` into a React Server Component module.
• TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it.

Related errors

• Error: Event handlers cannot be passed to Client Component props.
• ReferenceError: window is not defined
• Only plain objects, and a few built-ins, can be passed to Client Components from Server...

More in React and Next.js rendering

• Hydration failed because the server rendered HTML didn't match the client. As a result...Next.js
• An error occurred in the Server Components render. The specific message is omitted in...Next.js
• Dynamic server usage: Route /x couldn't be rendered statically because it used `headers`.Next.js
• Route "/orders/[id]" used `params.id`. `params` should be awaited before using its...Next.js
• Error: NEXT_REDIRECTNext.js
• Error: NextRouter was not mounted.Next.js
• Invalid src prop (https://cdn.example.com/p/42.jpg) on `next/image`, hostname...Next.js
• TypeError: Failed to parse URL from /api/ordersNext.js
• Too many re-renders. React limits the number of renders to prevent an infinite loop.Next.js
• useSearchParams() should be wrapped in a suspense boundary at page "/search".Next.js
• Objects are not valid as a React child (found: object with keys {id, name, total}). If...Next.js
• Element type is invalid: expected a string (for built-in components) or a class/function...Next.js

References: Next.js docs: "use client" directive, Next.js docs: Server and Client Components, Next.js source: the compiler message (react_server_components.rs)