Getting Uncaught TypeError: path.split is not a function in react

user_15173609 0
Viewed 51967

I'm trying to do validations for my form in react. I chose "react-hook-form" library. But I'm constantly getting error "Path.split is not a function. Even after using the default example given in their website, I'm getting the same error. This is the default code given in the official site.

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit, watch, errors } = useForm();
  const onSubmit = data => console.log(data);

  console.log(watch("example")); // watch input value by passing the name of it

  return (
    {/* "handleSubmit" will validate your inputs before invoking "onSubmit" */}
    <form onSubmit={handleSubmit(onSubmit)}>
    {/* register your input into the hook by invoking the "register" function */}
      <input name="example" defaultValue="test" ref={register} />
      
      {/* include validation with required or other standard HTML validation rules */}
      <input name="exampleRequired" ref={register({ required: true })} />
      {/* errors will return when field validation fails  */}
      {errors.exampleRequired && <span>This field is required</span>}
      
      <input type="submit" />
    </form>
  );
}
react-hook-form
5 Answers

react-hook-form updated to 7.0.0 from 6.X.X and has breaking changes:

You have to replace all ref={register} with {...register('value_name')}

Example:

Version 6.X.X:

<input ref={register({ required: true })} name="test" />

Version 7.0.X:

<input {...register('test', { required: true })} />
user_71685410

Simple input with required and errors.message features, necessary changes in update:

From version 6.x.x:

function MyComponent(props) {
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = (values) => {...};

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          name="message"
          autoComplete="off"
          ref={register({
            required: "Required",
          })}
        />
        {errors.message && errors.message.message}
        <input type="submit" />
      </form>
    </div>
  );
}

To version 7.x.x:

function MyComponent(props) {
  const { register, handleSubmit, formState: { errors }} = useForm();

  const onSubmit = (values) => {...};

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          name="message"
          autoComplete="off"
          {...register("message", {
            required: "Required",
          })}
        />
        {errors.message && errors.message.message}
        <input type="submit" />
      </form>
    </div>
  );
}

In addition to register fix, if you use errors from useForm(), now errors feature is exported from formState.

user_28012420

Worth mentioning that if you are using material ui or something similar, where ref={ref} throws an error (because it expects a different prop name instead of ref), you might want to

import { TextField } from '@material-ui/core';


return (
 <TextField {...register('name')} />
)

there is a migration guide for this here, but still worth to mention

user_39615460 
import { useForm } from "react-hook-form";
export default function App() {
const { register, formState: { errors }, handleSubmit } = useForm();

return (
  <form onSubmit={handleSubmit(onSubmit)}>
   <input {...register("firstName", { required: true })} />
   {errors.firstName?.type === 'required' && "First name is required"}
  
   <input {...register("lastName", { required: true })} />
   {errors.lastName && "Last name is required"}
  
   <input type="submit" />
  </form>
 );
 }
user_157175160

As noted above, there are changes to how register is to be used in v7

If you are still getting errors, ensure that id is actually a string and not any other type such as a number.

   <input {...register(id)} />
user_54122490
Related