v0 component crashes my page: 'You're importing a component that needs useState'

Solved · 282 views · asked 3 weeks ago by santi_dev_wannabe · edited

Copied a testimonial carousel from v0 into components/testimonials.tsx and use it in app/page.tsx. Error:

You're importing a component that needs useState. This React Hook only works in a Client Component. To fix, mark the file (or its parent) with the "use client" directive.

It works in the v0 preview. What is a client component and do I put use client on my page?

What I’ve tried

Put "use client" at the top of page.tsx, error goes away but now my export const metadata gives a different error.

Comment

Can you show the first lines of the carousel file? aiko_n 3 weeks ago · edited

2 answers

Marked as helpful by the asker

dev_ana3 weeks ago · edited

In the App Router, components run on the server by default. Anything with useState, useEffect or onClick must run in the browser, and you mark that with "use client".

Put it in the carousel file, not the page:

// components/testimonials.tsx
"use client";

import { useState } from "react";
...

The page stays a server component, so metadata keeps working, and it can still render <Testimonials />. Rule of thumb: push "use client" as far down the tree as you can.

v0 usually adds the directive itself; it probably got lost when you copied only part of the code.

Comment

moved it to the carousel file, both errors gone. the first line of the v0 file was indeed use client and I skipped it santi_dev_wannabe 3 weeks ago · edited

mei_lin3 weeks ago · edited

Same error shows up with libraries like framer-motion or react-hook-form. Anything using hooks internally needs a client boundary, even if your own code has no useState.

Comment

Keyboard shortcuts

v0 component crashes my page: 'You're importing a component that needs useState'

What I’ve tried

2 answers

Your answer