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.

[Pmacdon15]

Link to the code that reproduces this issue

https://github.com/Pmacdon15/test1

To Reproduce

1. Use example for useActionState on next docs.
2. Start dev server
3. go to localhost:3000
4. error on loading

Current vs. Expected behavior

Expected behavior was that I was to follow this example on the next documentation:https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations and I was going to be able to pass a message from the action to the form using useActionSate. the error I'm in countering is TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.useActionState) is not a function or its return value is not iterable

Provide environment information

{
  "name": "test1",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "14.2.3",
    "react": "^18",
    "react-dom": "^18",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.3",
    "typescript": "^5"
  }
}

 npm -v     
10.5.2

 node -v
v20.12.1

Which area(s) are affected? (Select all that apply)

Developer Experience, Documentation, TypeScript, Webpack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

When I looked at the react docs it says useActionState is in Canary. However the useActionState is in the next docs. This is my first time using it. so I'm unsure where to go from here.

[Pmacdon15]

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

[ashkanyadegari]

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

[Pmacdon15]

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',
  }
}

[matthew-mcallister]

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?

[Pmacdon15]

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

[Pmacdon15]

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?

[matthew-mcallister]

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

[Pmacdon15]

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

[da1z]

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

[slimshreydy]

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

[zachblume]

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

[james-beston]

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.

[YO-SC]

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

[thedevopsguyblog]

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.

[thedevopsguyblog]

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

[Pmacdon15]

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?

[Ucok23]

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

[Pmacdon15]

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

[aidankinzett]

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

[YO-SC]

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.

[Pmacdon15]

The docs appear to have been updated to useFormState