close

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

Hello Guys, How are you all? Hope You all Are Fine. I am facing an error Getting Uncaught TypeError: path.split is not a function in react. So Here I am Explain to you all the possible solutions Here.

Without Wasting your time, Lets start This Article to Solve This Error.

How Getting Uncaught TypeError: path.split is not a function in react This Error Occurs ?

I Have a Validation Form And 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

And This is My Form

    <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 Uncaught TypeError: path.split is not a function in react ?

Question: How To Solve Uncaught TypeError: path.split is not a function in react ?
Answer: 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’)}.

Solution 1

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

Just Replace line with your code at all places.

ref={register}

to

{...register('value_name')}

Solution 2

Try out This. 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';

const { ref, ...rest } = register('value_name')


return (
 <TextField inputRef={red} {...rest} />
)

Solution 3

Simple input with required and error 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.

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also Read

Leave a Comment