NextJS+Amplify+React Query集成报错及配置疑问求助

技术栈 #

• NextJS 14.1.4
• @tanstack/react-query 5.28.8
• aws-amplify 6.0.23

问题1：React Hook Form导入错误 #

启动服务器时出现以下错误：

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

原因分析 #

该错误源于@aws-amplify/ui-react-core依赖的react-hook-form版本与项目中安装的版本不兼容，它尝试导入的useForm导出方式在当前项目的版本中不存在。

解决方案 #

1. 查看项目当前react-hook-form版本：

npm list react-hook-form

2. 安装Amplify UI v6兼容的react-hook-form版本（推荐^7.51.0及以上）：

npm install react-hook-form@^7.51.0

3. 清除缓存并重启开发服务器：

rm -rf node_modules .next && npm install && npm run dev

问题2：Amplify.configure()的配置位置疑问 #

不需要在每个page.jsx文件中重复配置Amplify，以下是正确的配置方式：

客户端全局配置 #

在已添加"use client"指令的providers.jsx中配置一次即可，客户端所有组件都会生效：

"use client";
import awsconfig from "@/app/aws-exports";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { Amplify } from "aws-amplify";
import { useState } from "react";

Amplify.configure(awsconfig);

export default function Provider({ children }) {
  const [queryClient] = useState(() => new QueryClient());
  return (
    <QueryClientProvider client={queryClient}>
      <ReactQueryDevtools initialIsOpen={false} />
      {children}
    </QueryClientProvider>
  );
}

服务器端全局配置 #

对于需要在服务器组件中使用Amplify的场景，创建一个全局服务器配置文件（比如server-amplify-config.js）：

import { Amplify } from "aws-amplify";
import awsconfig from "@/app/aws-exports";

Amplify.configure(awsconfig, { ssr: true });

之后在需要使用Amplify的服务器组件顶部导入该配置文件即可，无需每个页面重复配置：

"use server"
import "./server-amplify-config";
import PropTypes from "prop-types";
import { HydrationBoundary, QueryClient } from "@tanstack/react-query";
import { listInfluencer } from "@/app/server/actions";
import ClubsComponent from "@/app/ui/dashboard/clubs/clubs";
import { dehydrate } from "react-query";

const ClubsPage = async ({ searchParams }) => {
  const q = searchParams?.query || "";
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery({
    queryKey: ["listInfluencers"],
    queryFn: listInfluencer({
      filter: {
        creatorType: {
          eq: "club",
        },
      },
    }),
  });

  return (
    <div>
      <HydrationBoundary state={dehydrate(queryClient)}>
        <ClubsComponent />
      </HydrationBoundary>
    </div>
  );
};

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