使用Next.js+TypeScript时useActionState报错问题求助

核心问题分析 #

出现Error: (0 , react__WEBPACK_IMPORTED_MODULE_1__.useActionState) is not a function or its return value is not iterable的主要原因有三点：

1. 缺失Next.js核心依赖 #

你的package.json中未添加Next.js依赖，而useActionState需要Next.js 13.4+版本的支持才能正常工作，缺少该依赖会导致React的服务器组件/action相关特性无法被正确识别。

2. 函数导入导出不匹配 #

actions.ts中使用默认导出（export default async function createUser），但page.tsx中用了命名导入（import { createUser } from "../components/actions"），导致实际导入的createUser为undefined，传给useActionState的不是有效函数。

3. React版本兼容性问题 #

你使用了React的canary尝鲜版，该版本不稳定，可能与Next.js存在兼容性冲突，建议使用稳定版并匹配Next.js要求的React版本。

具体修复步骤 #

步骤1：添加并更新依赖 #

修改package.json，补充Next.js依赖，同时将React/ReactDOM替换为稳定兼容版本：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "db:migrate": "TS_NODE_COMPILER_OPTIONS='{ \"module\": \"commonjs\" }' knex migrate:latest",
    "db:migrate:undo": "TS_NODE_COMPILER_OPTIONS='{ \"module\": \"commonjs\" }' knex migrate:down",
    "db:migrate:make": "TS_NODE_COMPILER_OPTIONS='{ \"module\": \"commonjs\" }' knex migrate:make"
  },
  "dependencies": {
    "next": "^14.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "typescript": "^5"
  }
}

执行安装命令更新依赖：

npm install

步骤2：修正导入导出不匹配问题 #

方案A：修改actions.ts为命名导出

'use server'
 
export async function createUser(prevState: any, formData: FormData) {
  return {
    message: 'Please enter a valid email',
  }
}

（此方案下page.tsx中的import { createUser }可正常使用）

方案B：修改page.tsx为默认导入

"use client";

import { useActionState } from "react";
import createUser from "../components/actions"; // 移除导入语句的花括号

const initialState = {
  message: "",
};

export default function App() {
  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>
  );
}

步骤3：优化tsconfig配置（可选） #

Next.js 13+推荐使用bundler作为模块解析策略，可修改tsconfig.json中的对应项：

"moduleResolution": "bundler"

验证修复 #

执行npm run dev启动项目，提交表单后应能正常接收返回的状态信息，原错误不再出现。

内容的提问来源于stack exchange，提问作者Random Data Monster