Can't import { useActionState } from 'react' following next.js tutorial, next.js v15.0.0-canary.28, react v19.0.0-rc, types/react v18.2.21

I'm following the next.js tutorial at https://nextjs.org/learn/dashboard-app

I've arrived at chapter 14, improving accessibility, at https://nextjs.org/learn/dashboard-app/improving-accessibility

At one point in the tutorial, it directs me to import { useActionState } from 'react'; in the /app/ui/invoices/create-form.tsx file.

When I do this, I get the error Module '"react"' has no exported member 'useActionState'.ts(2305)

I'm using next.js v15.0.0-canary.28, react v19.0.0-rc-6230622a1a-20240610, and types/react v18.2.21. As far as I know these are all the latest versions.

Does anyone know what could be the source of the error and how to correct it?

EDIT: It looks like there was a more current version of react than npm i @types/react was installing, I had to run npm i @types/react@18.3.3 and now it works.

I encountered the same problem, and after I ran npm i @types/react@18.3.3, I still have the following error, not sure if you had this and if you know how to solve it?

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

EDIT: I ran this and solved my problem npm install --legacy-peer-deps next@rc react@rc react-dom@rc

**

The useActionState Hook is currently only available in React’s Canary and experimental channels.

**

This hook used to be called "useFormState", but in the latest version of react canary, it's been renamed to "useActionState". It's one of the most recent features and is of course in experiemental, but you (we) are currently running react v19 canary according to the information provided.

try an explicit installation of canary see, with: npm install react@canary react-dom@canary

The react documentation says a few things, if you encounter this embarrassing error, please use the useFormState hook instead.

Take 5 seconds to consult the documentation: https://react.dev/reference/react/useActionState

Even though I followed the instructions in the React 19 upgrade guide I encountered the same problem. Here is the code I added:

{
  "dependencies": {
    "@types/react": "npm:types-react@rc",
    "@types/react-dom": "npm:types-react-dom@rc"
  },
  "overrides": {
    "@types/react": "npm:types-react@rc",
    "@types/react-dom": "npm:types-react-dom@rc"
  }
}

However, adding the following code to the tsconfig.json file, as suggested in github issue,helped me fix the problem:

{
    "compilerOptions": {
            "types": ["react/canary"]
    }
}