TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.useActionState) is not a function or its return value is not iterable While using the example it the docs for useActionState. about next.js HOT 21 CLOSED

this is very strange to put code in docs that does not work in stable version of next

from next.js.

I was able to work around this by using these package versions:

"dependencies": {
  "next": "14.3.0-canary.59",
  "react": "19.0.0-beta-4508873393-20240430",
  "react-dom": "19.0.0-beta-4508873393-20240430"
}

Not sure what the issue is; maybe useActionState was removed from React 18.x?

from next.js.

For those who need it, here is an example using the useFormState hook:

the frontend

'use client'

import { someAction } from '@/app/actions'
import { useFormStatus, useFormState } from 'react-dom'

const initialState = {
  message: '',
}

export default function UploadFileForm() {
  const [state, formAction] = useFormState(someAction, initialState)

  return (
    <form className="flex flex-col gap-2" action={formAction}>
      <div className="grid w-full max-w-sm items-center gap-1.5">
        <label htmlFor="someInput">Some input</label>
        <input id="someInput" name="someInput" type="text" required />
      </div>

      <SubmitButton />

      {/* not-sr-only will make the message visible, making the element visible to sighted users as well as screen readers. */}
      <p aria-live="polite" className="not-sr-only">
        {state?.message}
      </p>
    </form>
  )
}

function SubmitButton() {
  const { pending } = useFormStatus()

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Doing form action...' : 'Do form action'}
    </button>
  )
}

the server action

'use server'
 
export async function someAction(prevState: any, formData: FormData) {
  // ...
  return {
    message: 'A message from the server action, yay!',
  }
}

thanks to @zachblume and @slimshreydy for the reminder of that hook

from next.js.

Weird. The docs should definitely be rewritten to refer to useFormState until useActionState lands in next@latest

from next.js.

Yea could we get the old useFormState example until the useActionState updates are merged to the non-canary version of Next?

from next.js.

The docs appear to have been updated to useFormState

from next.js.

Shouldn't this be reopened until some sort of solution is implemented, or at least the documentation is updated?

from next.js.

Just hit the same issue. The package in their next-forms example does not mention the fact it's a canary release, just uses the 'latest' version.

from next.js.

I was also stumbled by misleading documentation.
If the docs could be reverted then that would save time.
Thanks @YO-SC for the correct docs - saved me googling time.

from next.js.

I was able to find the correct docs by switching branch.
https://github.com/vercel/next.js/blob/v14.2.3/examples/next-forms/app/add-form.tsx

from next.js.

Just to note I also replaced the stater code from the base page to call the Signup component I created using the docs.

from next.js.

I think a bit hard to go through your repo. But I usually get this error when Im trying to use a client side hook. In order to fix this, you can just add:
"use client" to the top of the page.

See: https://nextjs.org/docs/app/building-your-application/rendering/client-components

from next.js.

sorry I didn't included the code I used , it is from the example the docs:

//@/app/ui/signup.tsx   
'use client'

import { useActionState } from 'react'
import { createUser } from '@/app/actions'

const initialState = {
  message: '',
}

export function Signup() {
  const [state, formAction] = useActionState(createUser, initialState)

  return (
    <form action={formAction}>
      <label htmlFor="email">Email</label>
      <input type="text" id="email" name="email" required />
      {/* ... */}
      <p aria-live="polite" className="sr-only">
        {state?.message}
      </p>
      <button>Sign up</button>
    </form>
  )
}

export default Signup

and

//@/app/actions.tsx
'use server'
import { z } from 'zod'
 
const schema = z.object({
    email: z.string({
      invalid_type_error: 'Invalid Email',
    }),
  })

export async function createUser(prevState: any, formData: FormData) {
    const validatedFields = schema.safeParse({
        email: formData.get('email'),
      })
     
      // Return early if the form data is invalid
      if (!validatedFields.success) {
        return {
          errors: validatedFields.error.flatten().fieldErrors,
        }
      }
  return {
    message: 'Please enter a valid email',
  }
}

from next.js.

When I looked at the react docs it says it's only available in canary, but that makes me wonder? I never knew features went backwards

from next.js.

I updated my dependencies to the ones you suggested and ran npm i --force and the issue was resolved. Do we know when it will make its way to the stable channel?

from next.js.

Okay I can reopen it. I guess you're right it would be good to update the documentation. I just figured because it's in Canary that it would be back to the stable channel shortly

from next.js.

I don't know if it matters but I updated the repo I provided with both solutions ( using canary, using useFormState) as branches. Thanks again for your help. I wonder if i should close this issue because it is fixed in canary and I have a work around?

from next.js.

this is really strange to mention a function from canary in documentation where we surely assume all its code come from latest stable release, hope they quickly add hint in documention or merge function to latest stable release

from next.js.

I'm assuming it will be in 14.3 but I'm not sure when that will be.

from next.js.

is there a stable way to know the pending state of a server action? I just want to add a loading spinner to a button but it isn't a part of a form

from next.js.

is there a stable way to know the pending state of a server action? I just want to add a loading spinner to a button but it isn't a part of a form

If you need that behaviour, what comes to my mind is to use some sort of shared/global state, pass the pending value (from the useFormState hook) to it, and use that global state value where needed.

Tools like jotai should help. As far as "backed in" nextjs solutions, i don't know of any.

This might not be the best way to do it tho. If any more devs see this and got some ideas feel free to share em.

from next.js.