React项目部署Amplify时'useForm'未从react-hook-form导出错误的解决方法

部署React项目到Amplify时出现以下错误：

⨯ ./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').

导入追踪日志：

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

项目page.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的版本组合，但问题未解决，求可行修复方案。

这个问题核心是Amplify UI React v6依赖的react-hook-form版本与项目安装版本存在兼容性冲突，Amplify UI内部的Form组件依赖特定版本的react-hook-form导出方式，导致解析失败。可以按以下步骤逐一尝试：

1. 强制统一react-hook-form版本 #

通过依赖锁定工具强制所有子包使用同一个兼容的react-hook-form版本：

针对npm用户： #

• 先安装依赖锁定工具：

npm install npm-force-resolutions --save-dev

• 在package.json的scripts中添加前置钩子：

"preinstall": "npx npm-force-resolutions"

• 在package.json根节点添加resolutions字段：

"resolutions": {
  "react-hook-form": "^7.45.0"
}

• 清理旧依赖后重新安装：

rm -rf node_modules package-lock.json
npm install

针对yarn用户： #

• 直接在package.json根节点添加：

"resolutions": {
  "react-hook-form": "^7.45.0"
}

• 清理旧依赖后重新安装：

rm -rf node_modules yarn.lock
yarn install

2. 降级Amplify UI React到稳定兼容版本 #

如果强制版本无效，尝试将@aws-amplify/ui-react降级到v6.0.x系列，该版本对react-hook-form的依赖范围更宽松：

npm install @aws-amplify/ui-react@6.0.21

同时确保aws-amplify主包版本与UI版本匹配：

npm install aws-amplify@6.0.21

3. 配置Next.js模块解析别名 #

Next.js 14的模块缓存可能导致解析异常，在next.config.js中添加别名强制解析正确的react-hook-form包：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.resolve.alias['react-hook-form'] = require.resolve('react-hook-form');
    return config;
  },
};

module.exports = nextConfig;

4. 清理Amplify远程构建缓存 #

部署时Amplify的远程构建缓存可能残留旧依赖，在Amplify控制台操作：

• 进入应用 → 构建 → 构建设置 → 高级设置
• 勾选「Enable cache busting」，重新触发构建

内容的提问来源于stack exchange，提问作者Tora Tora Tora