admin 管理员组

文章数量: 1086019

I'm following the next.js tutorial at

I've arrived at chapter 14, improving accessibility, at

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/[email protected] and now it works.

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

I've arrived at chapter 14, improving accessibility, at https://nextjs/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/[email protected] and now it works.

  • javascript
  • reactjs
  • typescript
  • next.js
Share Improve this question edited Jun 29, 2024 at 22:30 Dan Tahir asked Jun 29, 2024 at 22:01 Dan TahirDan Tahir 931 silver badge5 bronze badges
Add a ment  | 

5 Answers 5

Reset to default 3

I encountered the same problem, and after I ran npm i @types/[email protected], 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:

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

if you use [email protected] try this steps it worked for me

  1. delete import {useActionState} from 'react'
  2. add import {useFormState} from 'react-dom'
  3. replace useActionState with useFormState

Update to the latest canary version using your package manager like npm, yarn or pnpm. For example:

npm install next@canary

本文标签：

Error[2]: Invalid argument supplied for foreach(), File: /www/wwwroot/roclinux.cn/tmp/view_template_quzhiwa_htm_read.htm, Line: 58
File: /www/wwwroot/roclinux.cn/tmp/route_read.php, Line: 205, include(/www/wwwroot/roclinux.cn/tmp/view_template_quzhiwa_htm_read.htm)
File: /www/wwwroot/roclinux.cn/tmp/index.inc.php, Line: 129, include(/www/wwwroot/roclinux.cn/tmp/route_read.php)
File: /www/wwwroot/roclinux.cn/index.php, Line: 29, include(/www/wwwroot/roclinux.cn/tmp/index.inc.php)

版权声明：本文标题：javascript - Can't import { useActionState } from 'react' following next.js tutorial, next.js v15.0.0-ca 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744073414a2528906.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。