Error | useSubmit must be used within a data router

[Mat-moran]

Hi,

first thanks for this package!

I am trying to test it but I am getting this error when trying the first example in a rrv7 app.

Error: useSubmit must be used within a data router. See https://reactrouter.com/en/main/routers/picking-a-router.

Version: "react-hook-form": "7.53.2",
page code

// contactus
import { useRemixForm, getValidatedFormData } from "remix-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as zod from "zod";
import { Route } from "./+types/contactus";
import { data, Form } from "react-router";

const schema = zod.object({
  name: zod.string().min(1),
  email: zod.string().email().min(1),
});

type FormData = zod.infer<typeof schema>;

const resolver = zodResolver(schema);

export const action = async ({ request }: Route.LoaderArgs) => {
  const {
    errors,
    data: d,
    receivedValues: defaultValues,
  } = await getValidatedFormData<FormData>(request, resolver);
  if (errors) {
    // The keys "errors" and "defaultValues" are picked up automatically by useRemixForm
    return data({ errors, defaultValues });
  }

  // Do something with the data
  return data(d);
};

export default function MyForm() {
  const {
    handleSubmit,
    formState: { errors },
    register,
  } = useRemixForm<FormData>({
    mode: "onSubmit",
    resolver,
  });

  return (
    <Form onSubmit={handleSubmit} method="POST">
      <label>
        Name:
        <input type="text" {...register("name")} />
        {errors.name && <p>{errors.name.message}</p>}
      </label>
      <label>
        Email:
        <input type="email" {...register("email")} />
        {errors.email && <p>{errors.email.message}</p>}
      </label>
      <button type="submit">Submit</button>
    </Form>
  );
}

I am using Base stack as default configuration.

[Mat-moran]

related with this issue
#127

upgrading to 7.0.2 fix the issue