Are you seeing the confusing error message "Uncaught TypeError: path.split is not a function" in your React project? Don't worry! I'll help you fix it, step by step. Whether you're new to development or just starting with React, knowing how to solve this error is important for a smooth development experience.

Before we get started, let's look at the exact problem you're encountering.

Error

Solution

The react-hook-form library has been updated in the latest version 7.0.0 from 6.X.X, bringing significant changes, particularly affecting how to input features are handled, along with required or error messages. Let's go into this update to find the necessary improvements for perfect integration:

Update your code by replacing all instances of ref={register({ required: "Required" })} with {...register("message", { required: "Required" })}.

Old version: 6.x.x

ref={register({ required: "Required" })}

New version: 7.0.0

{...register("message", { required: "Required" })}

In the new version 7.0.0 of the react-hook-form library, the structure of the object returned by useForm() has been updated. Specifically, the formState object has been introduced to encapsulate various form-related state properties, including errors.

So, to access the errors object in the new version, you need to destructure it from formState instead of directly from the returned object.

Here's how you should structure it in the new version:

Update your code by replacing const { register, handleSubmit, errors } = useForm(); with const { register, handleSubmit, formState: { errors } } = useForm();

Old version: 6.x.x

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

New version: 7.0.0

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

After making this change, this problem will be completely resolved, so your program will run properly. I have given the complete code below explaining the differences between the old and new versions so that you can properly understand.

Old version: 6.x.x

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

const FormComponent = () => {
    const { register, handleSubmit, errors } = useForm();

    const onSubmit = (data) => {
        console.log(data);
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <div>
                <label htmlFor="username">Username:</label>
                <input type="text" name="username" ref={register({ required: true })} />
                {errors.username && <span>Username is required</span>}
            </div>
            <div>
                <label htmlFor="email">Email:</label>
                <input type="email" name="email" ref={register({ required: true, pattern: /^\S+@\S+$/i })} />
                {errors.email && <span>Email is required and must be valid</span>}
            </div>
            <button type="submit">Submit</button>
        </form>
    );
};

export default FormComponent;

New version: 7.0.0

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

const FormComponent = () => {
    const { register, handleSubmit, formState: { errors } } = useForm();

    const onSubmit = (data) => {
        console.log(data);
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <div>
                <label htmlFor="username">Username:</label>
                <input type="text" name="username" {...register("username", { required: true })} />
                {errors.username && <span>Username is required</span>}
            </div>
            <div>
                <label htmlFor="email">Email:</label>
                <input type="email" name="email" {...register("email", { required: true, pattern: /^\S+@\S+$/i })} />
                {errors.email && <span>Email is required and must be valid</span>}
            </div>
            <button type="submit">Submit</button>
        </form>
    );
};

export default FormComponent;

Now I hope your code is 100% perfect.

Conclusion

In Version 7.x.x, a crucial adjustment is required. Notice the change in how the register function is used. Instead of passing ref={register({ required: "Required" })}, we now utilize {...register("message", { required: "Required" })} directly within the input element. This modification ensures smoother integration with the latest version of the library.

Additionally, it's essential to highlight that the error feature no longer originates from useForm(). Instead, it can now be exported from FormState.

By making these updates, you'll keep your React forms working well with the latest version of react-hook-form, ensuring they perform and function as they should.

If you have any questions about this solution or any other error related to web development, you can ask them in the question box given below, and you will get an answer soon.