尝试导入错误：“useForm”未从“react-hook-form”导出（导入为“useForm”）。 #11699

Question

我在 React 中有一个全新的项目，我希望将其部署到 Amplify，但我看到以下错误：

Import trace for requested module:
./node_modules/@aws-amplify/ui-react-core/dist/esm/components/FormCore/FormProvider.mjs
./node_modules/@aws-amplify/ui-react-core/dist/esm/index.mjs
./node_modules/@aws-amplify/ui-react/dist/esm/index.mjs
./src/app/page.tsx
 ⨯ ./node_modules/@aws-amplify/ui-react-core/dist/esm/components/FormCore/FormProvider.mjs
Attempted import error: 'useForm' is not exported from 'react-hook-form' (imported as 'useForm').

我的 React 项目的

pages.tsx

中的代码：

import { withAuthenticator } from "@aws-amplify/ui-react";
import { type AuthUser } from "aws-amplify/auth";
import { type UseAuthenticator } from "@aws-amplify/ui-react-core";
import "@aws-amplify/ui-react/styles.css";
import {useForm} from "react-hook-form";

import config from '../amplifyconfiguration.json';
import {Amplify} from "aws-amplify";
Amplify.configure(config);


type AppProps = {
    signOut?: UseAuthenticator["signOut"]; //() => void;
    user?: AuthUser;
};

const App: React.FC<AppProps> = ({ signOut, user }) => {
    const {
        register,
        handleSubmit,
        formState: { errors },
    } = useForm();
    return (
        <form onSubmit={handleSubmit((data) => console.log(data))}>
            <input {...register('firstName')} />
            <input {...register('lastName', { required: true })} />
            {errors.lastName && <p>Last name is required.</p>}
            <input {...register('age', { pattern: /\d+/ })} />
            {errors.age && <p>Please enter number for age.</p>}
            <input type="submit" />
        </form>
    );
};

export default withAuthenticator(App);

我的

package.json

如下：

{
  "name": "app-ui",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ./ --ignore-path .gitignore",
    "lint:fix": "npm run lint -- --fix",
    "format": "prettier --write \"{,!(node_modules)/**/}*.js\""
  },
  "dependencies": {
    "@aws-amplify/ui-react": "^6.1.6",
    "aws-amplify": "^6.0.21",
    "final-form": "^4.20.10",
    "flowbite-react": "^0.7.3",
    "next": "14.1.3",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.51.1"
  },
  "devDependencies": {
    "@imaginary-cloud/eslint-config-react": "^2.0.1",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8.57.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-next": "14.1.3",
    "eslint-config-prettier": "^8.10.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jest": "^26.9.0",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "postcss": "^8",
    "prettier": "^3.2.5",
    "prettier-plugin-tailwindcss": "^0.5.12",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  },
  "prettier": "@imaginary-cloud/prettier-config"
}

如何解决此错误？我得到的一些建议是使用不同版本的

react-hook-form

和

@aws-amplify/ui-react

。我尝试了几种组合，但没有成功。

Answer 1

将

"use client"

放在文件顶部。

您正在使用 App Router，其中服务器组件默认为根目录。 React Hook Form 使用诸如状态之类的客户端 API。