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

To solve Uncaught TypeError: path.split is not a function in react error follow below methods. In react, while attempting to validate a form. Sometimes you will caught with the “react-hook-form” library and keep receiving the problem “Path.split is not a function.” Receiving the same error even after using the default sample provided on their page. This is the official website’s default code.

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

And the Form is:

<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>

How to solve TypeError: path.split is not a function in react ?

To solve the TypeError: path.split is not a function in react issue. The react-hook-form should be 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:

In Version 6.X.X:

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

In Version 7.0.X:

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

Alternative to Solve TypeError: path.split is not a function in react

It is worth noting that if you are using material ui or anything similar and ref=ref raises an error (since it expects a different prop name instead of ref), you may want to change your code.

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

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

Hope the above solution works.

Also read :

ImportError cannot import name ‘_endpoint_from_view_func’ from ‘flask.helpers’
ModuleNotFoundError: No module named ‘grp’ on windows