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

Question

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>
  );
}

Can you share a minimal CodeSandbox that reproduces the issue? — Arun Kumar Mohan
– Arun Kumar Mohan, Commented Apr 3, 2021 at 4:02
Hi @ArunKumarMohan Here is the link "codesandbox.io/live/ljesmy8" — Pramod Kumar
– Pramod Kumar, Commented Apr 3, 2021 at 4:58
Looks like you've shared a session URL instead of a CodeSandbox URL. I just answered a similar question here that should fix the issue. Replace ref={register} with {...register('example')}. — Arun Kumar Mohan
– Arun Kumar Mohan, Commented Apr 3, 2021 at 5:10
Yeah its working. Thanks @ArunKumarMohan. I didn't see migration docs. — Pramod Kumar
– Pramod Kumar, Commented Apr 3, 2021 at 5:17

Amit · Accepted Answer · 2021-04-28 07:31:51Z

194

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 })} />

edited Apr 28, 2021 at 7:31

answered Apr 3, 2021 at 19:47

Amit

2,4221 gold badge14 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ethaan Over a year ago

You could run the codemon npx @hookform/codemod v7/update-register

Twirlman Over a year ago

@Ethaan how do you execute the command with yarn?

Brayden W Over a year ago

@Twirlman the npx command will still work even if you are using yarn.

Ethaan Over a year ago

yea as @BraydenW says, npx come with npm 5.2+

Prateek Pareek Over a year ago

let suppose we have any reusable input field them how we will pass this register to that reusable function

|

karel · Accepted Answer · 2021-09-29 03:42:50Z

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.

Oleksandr Danylchenko · Accepted Answer · 2022-02-13 11:02:40Z

19

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

edited Feb 13, 2022 at 11:02

Oleksandr Danylchenko

7049 silver badges17 bronze badges

answered Apr 5, 2021 at 19:30

Ethaan

11.4k5 gold badges37 silver badges45 bronze badges

Comments

Jobin Jacob Kavalam · Accepted Answer · 2022-02-02 08:48:10Z

2

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)} />

answered Feb 2, 2022 at 8:48

Jobin Jacob Kavalam

1511 silver badge6 bronze badges

Comments

CodeAbsolute · Accepted Answer · 2021-10-07 11:16:32Z

0

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>
 );
 }

answered Oct 7, 2021 at 11:16

CodeAbsolute

11

2 Comments

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Chirag Joshi Over a year ago

this is giving errors

Gaurav Sharma · Accepted Answer · 2024-07-16 11:29:47Z

0

In react this kind of error usually occurs when we forgot to pass the field on which we need to perform the operation

Wrong ❌: setValue(filteredOptions)

Right ✔ : setValue('options',filteredOptions)

answered Jul 16, 2024 at 11:29

Gaurav Sharma

1

Collectives™ on Stack Overflow

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

6 Answers 6

Example:

6 Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Example:

6 Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related