Chapter 14 Improving Accessibility - useActionState is not available in React

[dtknepper]

Uppon importing useActionState like so:
import { useActionState } from 'react';

The following error appears:
Module '"react"' has no exported member 'useActionState'.ts(2305)

When searching on Google, the official React Documentation actually says that the useActionState is still an experimental feature in their Canary channel.

I assume this means that when using the stable version of React, this Hook is not available yet and can therefore not be used.

If I am completely wrong on this topic, please explain me what I am doing wrong! I'm not doing this course because I am so good at this all already ;)

[leerob]

I am not able to reproduce, can you share more about what you're seeing? Can you restart your TypeScript server?

[braxtonb]

@dtknepper - Ran into something similar, @leerob 's suggestion to restart the Typescript server solved it on my end

The following steps may be helpful

1. Copy final-example's package.json
2. Run pnpm i to install latest dependencies
3. Restart Typescript server using cmd + shift + p and select TypeScript: Restart TS Server

4. After the TypeScript server restarts, ideally useActionState is defined

[dtknepper]

I have updated all my dependancies, and I still get this error. I was however able to still continue with this project by using useFormState from the react-dom dependancy.

@braxtonb I see in you screenshot that you actually use the Canary release of React and not the general release. That's why you do not get this error.

[leerob]

Indeed, you are supposed to be using the canary version here (this tutorial was recently updated to Next 15 / React 19).

Those will soon be stable, but this is getting things ready ahead of time.

[bwarman]

What are we supposed to do to get this working? Without the useActionState hook the entire tutorial grinds to a halt at chapter 14.

[dtknepper]

@leerob honestly, I think it's quite weird to depend on a canary release for a tutorial that is made for beginners. Especially since there is never a mention of using this version as the NPM command to start the project is using the latest stable release and not the canary version. The command to start this tutorial is: npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm On top of that using a canary version which is most likely still quite buggy for a beginner tutorial is not the smartest thing in my humble newcomer opinion.

@bwarman the easiest thing to do, is to use useFormState instead of the useActionState and change the import from react to react-dom. This will give almost the same behaviour.

[scottfennell-toptal]

I just encountered this error myself.

I'm coming from a jQuery / old-school JS background and the zoo of dependencies, versions, and related errors is making it really hard for me to feel good about trying Next in any real capacity.

I think it's best to keep the tutorial as stable as possible rather than bleeding edge.

[leerob]

@bwarman have you already restarted your TS server or the steps mentioned above?

the NPM command to start the project is using the latest stable release and not the canary version.

This is the npx command, which is a separate project (create-next-app is a CLI tool), which pulls the code for the specific example codebase as an argument.

If you would prefer to use useFormState, you can reference this PR and use the codebase at deca7c7.

[Sahil4883]

hey there i faced the same issue with the useActionState and couldn't find out how do i resolve it
if there's any resolution regarding the error please let me know I'm looking forward to complete this whole course

[K332]

@Sahil4883
#775 (comment)
You can try useFormState to solve it

[m-speroni]

This worked for me:
npm i @types/react@18.3.3
npm install --legacy-peer-deps next@rc react@rc react-dom@rc

[skinnynoizze]

This worked for me: npm i @types/react@18.3.3 npm install --legacy-peer-deps next@rc react@rc react-dom@rc

Thanks man. What a nightmare of tutorial lol.

[leerob]

React 19 (and types) are now stable: #946