Chapter 15: TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_3__.useActionState) is not a function or its return value is not iterable

[beckrecca]

Hello! One cannot proceed with the instructions as is in Chapter 15 (https://nextjs.org/learn/dashboard-app/adding-authentication).

In this chapter, we add export default function LoginForm() to the login-form.tsx file, as shown here: https://github.com/vercel/next-learn/blob/main/dashboard/final-example/app/ui/login-form.tsx#L14

However, the compiler is upset with TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_3__.useActionState) is not a function or its return value is not iterable.

In case I missed anything, here's my code as well: https://github.com/beckrecca/pReactice/blob/main/app/ui/login-form.tsx

I haven't been able to find report of a similar error. Is there any workaround?

[dtknepper]

I'm having the exact same issue. I think its because they are using the useActionState which according to the React documentation is still in the Canary channel only.

My issue: https://github.com/vercel/next-learn/issues/775**

[NemanjaMilenkovic]

Depending on the React canary version used, useFormState from react-dom might help you finish the task: for example:

import { useFormState } from 'react-dom';

  const [errorMessage, formAction, isPending] = useFormState(
    authenticate,
    undefined
  );

[yasnaya-polyana]

Legendary thanks