Astro.js与Preact集成react-hook-form报错：无法读取useForm

结论 #

react-hook-form 完全支持在 Astro + Preact 环境中使用，你遇到的「Cannot read properties of undefined (reading 'useForm')」错误是由配置细节和组件处理方式导致的，可通过以下步骤修复：

问题排查与修复步骤 #

1. 升级依赖版本 #

你的 Preact 版本（10.6.5）较旧，可能与新版 react-hook-form 存在兼容性问题。建议升级到最新稳定版：

npm install preact@latest @astrojs/preact@latest

2. 确保组件文件后缀正确 #

Astro 需要通过文件后缀识别 Preact 组件，请将你的表单组件文件后缀从 .js 改为 .jsx（或 .tsx 若使用 TypeScript），确保 Astro 用 Preact 的 JSX 处理器解析该文件。

3. 修正组件内的导入与 useForm 绑定 #

你的组件中已导入 useForm，但需要将 register 方法绑定到表单输入组件上，否则表单无法收集数据。修正后的组件代码如下：

import style from "@styles/form.module.css";
import { useForm } from "react-hook-form";

import { Input } from "./Input";
import { Textarea } from "./Textarea";

export const Form = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div class={style.title}>
        <Input 
          type="text" 
          text="Email title" 
          name="emailTitle"
          {...register("emailTitle", { required: "标题不能为空" })}
        />
        {errors.emailTitle && <p>{errors.emailTitle.message}</p>}
      </div>
      <div class={style.email}>
        <Input 
          type="email" 
          text="Email address" 
          name="emailAdress"
          {...register("emailAdress", { 
            required: "邮箱不能为空",
            pattern: {
              value: /^\S+@\S+$/i,
              message: "请输入有效的邮箱地址"
            }
          })}
        />
        {errors.emailAdress && <p>{errors.emailAdress.message}</p>}
      </div>
      <div class={style.message}>
        <Textarea 
          text="Message" 
          name="message"
          {...register("message", { required: "消息不能为空" })}
        />
        {errors.message && <p>{errors.message.message}</p>}
      </div>
      <div class={style.send_button}>
        <button type="submit">Send message</button>
      </div>
    </form>
  );
};

4. 验证配置正确性 #

你的现有配置（tsconfig.json、package.json、astro.config.mjs）整体是正确的，但需确保：

• astro.config.mjs 中 preact({ compat: true }) 已启用，这是让 Preact 兼容 React 生态库的关键
• tsconfig.json 中 jsxImportSource 设为 "preact"，且 paths 正确映射了 react 和 react-dom 到 preact/compat

错误原因分析 #

出现「useForm 未定义」的常见原因：

1. 组件文件后缀错误，Astro 未用 Preact 处理器解析，导致 react-hook-form 的导入无法通过 Preact 的 compat 层正确解析
2. Preact 版本过低，与新版 react-hook-form 的 API 不兼容
3. 未启用 preact({ compat: true })，导致 React 生态库无法识别 Preact 环境

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