はじめに
Githubでnpm run buildしたさいに発生したエラーです。
useFormで陥りやすいミスをしていました。
問題
ローカル上では問題なかったのですが、Githubでnpm run bulidするさいにエラーが発生しました。
Home
type FormValues = {
ID: string;
};
export const Home: FC<FormValues> = memo(() => {
const onClick = handleSubmit( async () => {
const input_id = getValues("ID");
const id = await supabase.from("users").select("user_id").eq("user_id", input_id).single();
if (id.error) {
alert("名刺が見つかりませんでした。IDを確認してください。");
throw new Error(id.error.message);
}
if (id) {
navigate(`/cards/${id.data.user_id}`);
}
});
return (
<form onSubmit={handleSubmit(onClick)}>
)
解決方法
handleSubmitを二重に使ってるのが原因でした。
onClickは「純粋なSubmitHandler」にする方向で修正しました。
handleSubmitは1回だけ使う
onSubmitは (data) => {} の形にする
あと、修正前はFC<FormValues>としていました。
これも一つの原因でした。
いつも型を記載するときの流れから、書いていました。
useForm<FormValues> =「フォームの中身の型」
FC<FormValues> =「コンポーネントのpropsの型」
Home
type FormValues = {
ID: string;
};
export const Home: FC = memo(() => {
const { register, handleSubmit, formState: { errors } } = useForm<FormValues>();
const onSubmit: SubmitHandler<FormValues> = async (data) => {
const input_id = data.ID;
const id = await supabase.from("users").select("user_id").eq("user_id", input_id).single();
if (id.error) {
alert("名刺が見つかりませんでした。IDを確認してください。");
throw new Error(id.error.message);
}
if (id) {
navigate(`/cards/${id.data.user_id}`);
}
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
)
おわりに
どの型が使えるかは判断します。