You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am writing a component library with Vite and Storybook. It has mostly regular react components but some that have useState I've put "use client" at the top in order to be compatible with my Next.js app. This worked great until I needed to use this library with a non-typescript react app. Ok, I just compile the ts into js with vite build. But when I do, the .es file has a useState at the top that affects all components such that everything is now a client component. The component library and it's dist should mostly stay agnostic of server and client rendering, yet I'm having to jump through hundreds of hoops just to server render. I've gone through the vite server rendering docs and building docs and tried many permutations of solutions to no avail. I've ended up with a version that has the dist build for my react app and a version that doesnt for my Next app.
Reproduction
vite.new/react-ts
Steps to reproduce
Steps to reproduce:
Create new Vite app with yarn create vite my-vite-app --template react-ts
Write any two React components - one with useState and a "use client" at the top, one without either.
Run vite build or yarn build
Go to any Next app possibly created with create-next-app and link your new library
Try to import your server component (the one without state) and see that you can't because the .es file has useState imported at the top.
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.
Hello @rafa-apptronik. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.
Describe the bug
I am writing a component library with Vite and Storybook. It has mostly regular react components but some that have useState I've put "use client" at the top in order to be compatible with my Next.js app. This worked great until I needed to use this library with a non-typescript react app. Ok, I just compile the ts into js with vite build. But when I do, the .es file has a useState at the top that affects all components such that everything is now a client component. The component library and it's dist should mostly stay agnostic of server and client rendering, yet I'm having to jump through hundreds of hoops just to server render. I've gone through the vite server rendering docs and building docs and tried many permutations of solutions to no avail. I've ended up with a version that has the dist build for my react app and a version that doesnt for my Next app.
Reproduction
vite.new/react-ts
Steps to reproduce
Steps to reproduce:
Create new Vite app with
yarn create vite my-vite-app --template react-ts
Write any two React components - one with useState and a "use client" at the top, one without either.
Run vite build or yarn build
Go to any Next app possibly created with
create-next-app
and link your new libraryTry to import your server component (the one without state) and see that you can't because the .es file has useState imported at the top.
System Info
Used Package Manager
yarn
Logs
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.Validations
The text was updated successfully, but these errors were encountered: