[Zod/React Hook Form] “TypeError: r[(intermediate value)(…)] is not a function” というエラーが発生する時の改善方法 [Next.js]

Next.js
投稿日:
カテゴリー Next.js/Reactタグ

ZodとReact Hook Formでフォームの処理を書いていたら、以下のエラーが発生しました。

TypeError: r[(intermediate value)(intermediate value)(intermediate value)] is not a function

エラーの原因と解消方法

エラーの原因は、ZodのSchemaをServer ActionとしてClient Componentから呼び出しているためでした。

Client ComponentにSchemaを書くか、”use server”と書いていないtsファイルに書いてimportすればエラーは出なくなります。

ソースコード

以下のコードは、React Hook Formの公式のページから引用しています。

https://github.com/react-hook-form/resolvers

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';

const schema = z.object({
  name: z.string().min(1, { message: 'Required' }),
  age: z.number().min(10),
});

const App = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit((d) => console.log(d))}>
      <input {...register('name')} />
      {errors.name?.message && <p>{errors.name?.message}</p>}
      <input type="number" {...register('age', { valueAsNumber: true })} />
      {errors.age?.message && <p>{errors.age?.message}</p>}
      <input type="submit" />
    </form>
  );
};

広告