useFormStatus in React Server Components
Unanswered
Eric Burel posted this in #help-forum
Hey, useFormStatus is expected to work with React Server Components according to the documentation, but did anyone manage to actually import it? I feel like importing from "react-dom" will also load "useContext" and other client-only code that then fail the server bundle
The error (which is quite unsettling):
I am using the latest canary
The error (which is quite unsettling):
./node_modules/next/dist/esm/client/components/navigation.js
Attempted import error: 'useContext' is not exported from 'react' (imported as 'useContext').
Import trace for requested module:
./node_modules/next/dist/esm/client/components/navigation.js
./node_modules/next/dist/esm/api/navigation.js
./node_modules/next-auth/lib/actions.js
./node_modules/next-auth/index.js
./app/auth.ts
./app/api/auth/[...nextauth]/route.tsI am using the latest canary
16 Replies
Giant panda
It's a client-side hook.
Perhaps I am misunderstanding the documentation and it shouldn't work for client comps
Giant panda
The React docs aren't clear enough. It must be used within a client component.
"In addition, you need to use a framework that supports React Server Components to get the full benefit of useFormState."
that's what bothers me
and everything in this component seems to be made to support form state in pure server rsc with no js
I can't get if it's a goal and we are not there yet or if it is indeed a client-side hook
Giant panda
It's just an accessor for a context and must be reactive, as such it can't possible be supported within RSCs.
You probably got distracted by unclear wording in the docs.
also because server action do work both with and without JS
so technically I would have expected something similar to be doable with the state of the form
a kind of progressive enhancement
anyway I've turned my form to a client component but that's disappointing
it seems less useful than expected, it means I need to pass results via searchParams
if I want to have a true RSC
duh actually it fails my build when importing from a client component too 🙂