Next.js useFormStatus issue

Question

Using server actions with next.js on a new project, i get this error:

TypeError: (0 , react_dom__WEBPACK_IMPORTED_MODULE_2__.useFormStatus) is not a function

form component:

"use client"
import { sendEmail } from '@/actions/sendEmail'
import React from 'react'
import SubmitButton from './SubmitButton'

export default function ContactInner({contact}: {contact: any}) {
  return (
    <section className="w-full items-center justify-center flex flex-col px-4 pb-28 2xl:pt-12 py-8">
        <div className='w-[min(100%,38rem)] flex flex-col text-center gap-4'>
        <h1 className='text-3xl md:text-4xl font-semibold'>{contact.title}</h1>
        <p className='text-neutral-700 dark:text-neutral-400'>
        {contact.descriptionpart1}{" "}
          <a className='underline' href='mailto:[email protected]'>
            [email protected]
          </a>
        {" "}{contact.descriptionpart2}
        </p>

        <form
        className='mt-4 flex flex-col'
        action={async formData => {
          await sendEmail(formData)
        }}
        >
          <input name='senderEmail' className='px-4 h-14 rounded-lg border border-border bg-transparent outline-none focus:border-primary transition duration-200' type="email" required maxLength={100} placeholder={contact.inputplaceholder}/>
          <textarea name='message' className='p-4 h-52 my-3 rounded-lg border border-border bg-transparent outline-none focus:border-primary transition duration-200' required maxLength={5000} placeholder={contact.textareaplaceholder}/>
          <SubmitButton buttonLabel={contact.buttonLabel}/>
        </form>
        </div>
    </section>
  )
}

so i have this form that sends emails using resend, which works so i tried to have a pending/loading state and created a button element like this:

"use client"

import React from 'react'
import { useFormStatus } from 'react-dom'
import { FaPaperPlane } from 'react-icons/fa'

export default function SubmitButton({buttonLabel}: {buttonLabel: any}) {
  const { pending } = useFormStatus()
  return (
  <button 
    className="focus:scale-110 hover:scale-110 active:scale-105 group flex gap-2 items-center justify-center h-[3rem] w-[8rem] 
    rounded-full bg-gray-900 hover:bg-gray-950 dark:bg-slate-200 dark:hover:bg-slate-300 outline-none transition-all 
    duration-200 text-white dark:text-black" 
    type='submit'>
        {buttonLabel}
      <FaPaperPlane className="transition duration-200 text-xs opacity-80 group-hover:-translate-y-1 group-hover:translate-x-1"/>
  </button>
  )
}

so the issue is when i do const { pending } = useFormStatus(), i get the error mentioned above, i can see that useFormStatus is imported but idk why i get the error, might be a new update?

The (previously) experimental useForm hooks have been updated in upstream React but Next vendors a pinned and often older version of React which could be likely the issue. Only yesterday Vercel merged the upstream changes which are expected to be available with Next 14 in a few days. You could try to downgrade a few versions down to 13.4.X and use the experimental_ hooks or just wait a bit more than a week for the stable and fully type-safe version. — Christian Ivicevic
– Christian Ivicevic, Commented Oct 17, 2023 at 14:12

Roshan Singh · Accepted Answer · 2023-12-20 20:10:51Z

6

Its Not experimental anymore:

import { useFormStatus } from 'react-dom'

answered Dec 20, 2023 at 20:10

Roshan Singh

761 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DarKS4ys Over a year ago

yeah now it works, there was something weird with the old version i was using

desertnaut · Accepted Answer · 2024-10-31 11:37:33Z

5

Gust run this command and it should solve it:

npm i @types/react@latest @types/react-dom@latest

and also don't forget to update react and react-dom to latest.

edited Oct 31, 2024 at 11:37

desertnaut

60.8k32 gold badges155 silver badges183 bronze badges

answered Feb 18, 2024 at 8:04

DarKS4ys

932 silver badges8 bronze badges

1 Comment

CodeFinity Over a year ago

Add a -D to that as we don't need @types as "dependencies".

Kannu Mandora · Accepted Answer · 2023-10-17 14:11:09Z

1

import the hook like this:

import { experimental_useFormStatus as useFormStatus } from 'react-dom'

answered Oct 17, 2023 at 14:11

Kannu Mandora

6926 silver badges17 bronze badges

5 Comments

DarKS4ys Over a year ago

I cant import it. Module '"react-dom"' has no exported member 'experimental_useFormStatus'.ts(2305) any

Kannu Mandora Over a year ago

you need to install react experiment version

DarKS4ys Over a year ago

how do i do that 🗿 cuz i couldnt find a experimental version of react

Kannu Mandora Over a year ago

Refer this answer Link

Rohan Mayya Over a year ago

@KannuMandora that answer is from 2020, so it's the wrong one. Something is currently broken with the APIs which makes it unusable

Collectives™ on Stack Overflow

Next.js useFormStatus issue

3 Answers 3

1 Comment

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related