How to resolve the error Attempted import error: 'react-hook-form' does not contain a default export (imported as 'useForm'). using react js

Question

How to Attempted import error: 'react-hook-form' does not contain a default export (imported as 'useForm'). fix the error using react js. I am try to do that but i am getting error when i run nom start this error 'react-hook-form' does not contain a default export (imported as 'useForm'). fix the error using react js.

anybody help me out how to fix that.its very thankful

my code

import React, { useRef, useState } from "react";
import ReactDOM from "react-dom";
import useForm from "react-hook-form";

import "./styles.css";

function App() {
  const { register, errors, handleSubmit, watch } = useForm({});
  const password = useRef({});
  const newpassword = useRef({});

  password.current = watch("password", "");
  newpassword.current = watch("password_repeat", "");
  const onSubmit = async (data) => {
    if (password.current.length === 0) {
      alert("You must specify a password");
      return;
    }

    var match = password.current.match(
      /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=[^!"#$%&'()*+,-.:;<=>?@[\]^_`{|}~]*[!"#$%&'()*+,-.:;<=>?@[\]^_`{|}~])(?=\D*\d)/
    );
    if (!match) {
      alert(
        "Password Should contain at least one Number, one upperCase and one lowercase letter and a special character"
      );
      return;
    }

    if (password.current.length < 8) {
      alert("Password must have at least 8 characters");
      return;
    }

    if (newpassword.current !== password.current) {
      alert("The passwords do not match");
      return;
    }

    alert("Your Success message");
  };

  return (
    <form onSubmit={(e) => e.preventDefault()}>
      <label>Password</label>
      <input name="password" type="text" ref={register({})} />
      {errors.password && <p>{errors.password.message}</p>}

      <label>Repeat password</label>
      <input name="password_repeat" type="password" ref={register({})} />
      {errors.password_repeat && <p>{errors.password_repeat.message}</p>}

      <input type="submit" onClick={handleSubmit(onSubmit)} />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

My package.json

{
  "name": "react-hook-form-password-match-check-standard-validation",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "src/index.js",
  "dependencies": {
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "react-hook-form": "3.13.1",
    "react-scripts": "3.0.1"
  },
  
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Answer 1

I am add 'use client' in next js and it worked.

Answer 2

Because it has a named export. Therefore, you have to import it as follows.

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

Refer the following documentation to use react-hook-form node module. https://www.npmjs.com/package/react-hook-form

And update the component as follows based on the documentation.

import React, { useRef } from "react";
import { useForm } from "react-hook-form";
import ReactDOM from "react-dom";

import "./styles.css";

export default function App() {
  const {
    register,
    formState: { errors },
    handleSubmit,
    watch,
  } = useForm();
  const password = useRef({});
  const newpassword = useRef({});

  password.current = watch("password", "");
  newpassword.current = watch("password_repeat", "");
  const onSubmit = async (data) => {
    if (password.current.length === 0) {
      alert("You must specify a password");
      return;
    }

    var match = password.current.match(
      /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=[^!"#$%&'()*+,-.:;<=>?@[\]^_`{|}~]*[!"#$%&'()*+,-.:;<=>?@[\]^_`{|}~])(?=\D*\d)/
    );
    if (!match) {
      alert(
        "Password Should contain at least one Number, one upperCase and one lowercase letter and a special character"
      );
      return;
    }

    if (password.current.length < 8) {
      alert("Password must have at least 8 characters");
      return;
    }

    if (newpassword.current !== password.current) {
      alert("The passwords do not match");
      return;
    }

    alert("Your Success message");
  };

  return (
    <form onSubmit={(e) => e.preventDefault()}>
      <label>Password</label>
      <input {...register("password")} />
      {errors.password && <p>{errors.password.message}</p>}

      <label>Repeat password</label>
      <input {...register("password_repeat")} />
      {errors.password_repeat && <p>{errors.password_repeat.message}</p>}

      <input type="submit" onClick={handleSubmit(onSubmit)} />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Application View

Code SandBox

https://codesandbox.io/embed/react-hook-form-password-match-check-standard-validation-forked-lw641?fontsize=14&hidenavigation=1&theme=dark

Update your package.json file for dependency used in react-hook-form as well.

"react-hook-form": "^7.15.0"

instead of using "react-hook-form": "3.13.1"

Hope this would solve your issue.