I am wondering how I can solve this with new ways of coding. I've seen someone say this error is due to the update of react-hook-form, but I am not sure how to solve this. If anyone knows this, I would appreciate it.

I originally tried to solve this by adding the "..." before register instead of using "ref=". I have also tried different placing of "name="email"" as answered in the similar question below; however, I am still getting this error.

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

my error says: " Uncaught TypeError: path.split is not a function" and I am using "react-hook-form": "react-hook-form": "^7.33.1".

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

const EMAIL_PATTERN = /^(([^<>()\\[\]\\.,;:\s@"] (\.[^<>()\\[\]\\.,;:\s@"] )*)|(". "))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9] \.) [a-zA-Z]{2,}))$/;

const LoginForm = ({onSubmit}) => {

  const { register, handleSubmit, errors } = useForm();
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="form-group">
        <label htmlFor="email">Email</label>
        <input
          {...register({required: true, pattern: EMAIL_PATTERN})}
          name="email"
          type="email"
          className="form-control"
          id="email" />
        { errors.email &&
          <div className="alert alert-danger"> 
            { errors.email.type === 'required' &&
              <span>Email is required!</span>
            }
            { errors.email.type === 'pattern' &&
              <span>Not valid email format!</span>
            }
          </div>
        }
      </div>

CodePudding user response：

As written in React Hook Form documentation (https://react-hook-form.com/api/useform/register) you should either supply input's name or id before the register options. Currently you're only providing the register options so it's giving you an error message as it tries to register with invalid name or id.

register: (name: string, RegisterOptions?) => ({ onChange, onBlur, name, ref })

In your case it should be the following.

  <input {...register("email", {required: true, pattern: EMAIL_PATTERN})}
          name="email"
          type="email"
          className="form-control"
          id="email" />