Fix: "You're importing a module that depends on `useState`" when your AI-built Next.js app won't build

By The Agent Ledger. Drafted with AI assistance and reviewed by the publisher. Tested 2026-10-18.

Short answer: This error means a file that uses a React hook such as useState is being treated as a Server Component, which cannot hold state. The smallest fix is to move the interactive part into its own small file that starts with "use client", and import it from your page. Verified on a synthetic app only.

Prerequisites

• A Next.js app using the App Router (an app/ folder).
• Terminal access, or your AI tool's code view.
• No keys or accounts are needed for this fix.

The exact error

From our reproduction (npx next build, Next.js 16.4.2 with Turbopack):

Error: Turbopack build failed with 1 error:
./app/page.js:1:10
Error: 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.
    Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client
> 1 | import { useState } from "react";
    |          ^^^^^^^^

Exit code: 1. Wording differs by version. Public reports show older text, such as "You're importing a component that needs useState. This React Hook only works in a Client Component" (for example a vercel/next.js discussion on the use client boundary and an AI-editor report in redwoodjs/sdk#803, where the author notes Cursor made the same mistake). We did not run those older versions and did not measure how common the error is; the same hook name may be useEffect, useRef etc.

Versions we used

Cause

In the Next.js App Router every file is a Server Component by default. Server Components render once on the server, so they cannot use state, effects or click handlers. AI tools often write a page that imports useState and uses onClick in the same file but forget the "use client" line.

Smallest working fix

Put the interactive piece in its own file with "use client" at the very top, and keep the page itself free of hooks.

Before (fails): app/page.js

import { useState } from "react";

export default function Home() {
  const [count, setCount] = useState(0);
  return (
    <main>
      <h1>Synthetic signup counter</h1>
      <button onClick={() => setCount(count + 1)}>Clicks: {count}</button>
    </main>
  );
}

After (builds)

app/Counter.js (new file):

"use client";
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Clicks: {count}</button>;
}

app/page.js:

import Counter from "./Counter";

export default function Home() {
  return (
    <main>
      <h1>Synthetic signup counter</h1>
      <Counter />
    </main>
  );
}

Quicker alternative (not run by us as a separate test): add "use client"; as the first line of the original page.js. This is documented Next.js behavior, but it makes the whole page client code, so the split above is usually better.

Copyable prompt for your AI coding tool

My Next.js App Router build fails with "You're importing a module that depends on `useState` into a React Server Component module." Find every file without a "use client" directive that uses React hooks (useState, useEffect, useRef, useReducer) or event handlers like onClick. For each, move only the interactive part into a new small component file that starts with "use client", and import it into the original file. Do not add "use client" to pages that don't need it, do not change anything else, and show me the diff.

Review the diff yourself. We did not test this prompt in any AI tool.

How we verified

Run on 2026-10-18 in fix-02/before and fix-02/after.

1. Before: npx next build failed with the error above, exit code 1 (before-build.log).
2. After: npx next build exited 0 and listed / as a static route (after-build.log).
3. After, served page: npx next start, then curl of / returned HTML containing <button>Clicks: <!-- -->0</button>, and the client JS chunk containing the string "Clicks" existed in .next/static/chunks (after-runtime.html).

Files: see the downloads below.

Not verified

• Clicking the button in a real browser (we did not run a browser, so we did not confirm the count increases).
• Other Next.js/React/Node versions, including Next 13–15 error wording, the Pages Router, and Vite/React apps.
• Vercel, Netlify or other hosts.
• Code generated by Cursor, Lovable, Bolt or v0; our app is hand-written and synthetic.
• Related but different errors: a third-party package that uses hooks without the directive fails differently (not reproduced), as does passing functions from a Server to a Client Component.
• The "add use client to the page" alternative as a separate build.
• Whether the AI prompt produces a correct diff in any tool.

Troubleshooting

• Same error names a different file: another file also uses a hook. Fix each, or search for useState(, useEffect( and onClick.
• Error mentions a function being passed to a Client Component: a different problem; not covered here.
• Unsure which files need the directive: only files that use hooks, state, browser APIs or event handlers.

Security notes

• Client Components ship to every visitor's browser. Never put secrets or private keys in them.

Downloads

Synthetic example files from our test. No real keys or data.

• page.diff: Before/after diff of the page
• before-page.js: Before: page that fails to build
• after-page.js: After: page that builds
• after-Counter.js: After: new client component file
• before-build.log.txt: Build log before the fix (exit 1)
• after-build.log.txt: Build log after the fix (exit 0)
• after-served-page.html.txt: Served HTML of the fixed page (contains the button)