next · Build and types
The message
You're importing a component that needs useState. This React hook only works in a client component.
What it means
In the App Router every component is a server component by default, and a server component imported a file that uses a hook which only means something in a browser, such as useState. The directive is a single 'use client' line at the very top of the file, and adding it pulls that file and everything it imports into the client bundle — which is why marking the smallest piece that needs state, rather than the whole page, is the cheap choice. In the other direction, splitting so that a client component receives server components as children keeps the data fetching on the server. Next.js 13 worded the same situation as "It only works in a Client Component but none of its parents are marked with \"use client\"".
The fix
There is no one-line command for this. The explanation says what to look at instead.
- Printed by
- next
- Build and types
- 10
Build errors are a tool refusing before anything runs, so they break nothing at the moment they appear — but they do ask two questions: will you fix the type or the path to match the real shape, or will you push that one line through with an as any or a suppression comment — and it is here that the things which are only true on your own machine, letter case, extensions and environment variables, show themselves for the first time.
Reading an error message
- Read from the first line down. The lower you go the more it is about the tool’s internals; the cause is usually at the top.
- If there is a file and a line number, start there — not the top stack frame, but the topmost line that names a file you wrote.
- Search the message verbatim, but strip your own paths and variable names first; those are what stop the search from matching.
- The same condition is worded differently across tool versions. If results look wrong, add the version number to the query.
- Before pasting a fix, check what it throws away. Some of these cannot be undone.
Common questions
Q. What does “You're importing a component that needs useState. This React hook only works in a client component.” mean?
In the App Router every component is a server component by default, and a server component imported a file that uses a hook which only means something in a browser, such as useState. The directive is a single 'use client' line at the very top of the file, and adding it pulls that file and everything it imports into the client bundle — which is why marking the smallest piece that needs state, rather than the whole page, is the cheap choice. In the other direction, splitting so that a client component receives server components as children keeps the data fetching on the server. Next.js 13 worded the same situation as "It only works in a Client Component but none of its parents are marked with \"use client\"".
Q. How do I fix it?
There is no one-line command. The explanation above says what to look at instead.
Q. Which tool prints this?
next. It sits under Build and types, and the message runs to 16 words.