V7: TypeError: (0 , react_hook_form__WEBPACK_IMPORTED_MODULE_0__.set) is not a function

[stephent]

I've updated my next.js project from RHF 6.15.5 to 7.0.3 and switched from @hookform/resolvers:1.3.0 to 2.0.0. I'm using yup for validation throughout (although the use case in this example is very simple).

I also ran the update script:

npx @hookform/codemod v7/update-register

Now, when the form is submitted, I get the following error:

Unhandled Runtime Error
TypeError: (0 , react_hook_form__WEBPACK_IMPORTED_MODULE_0__.set) is not a function

Call Stack
a node_modules/@hookform/resolvers/dist/resolvers.module.js (1:106)
eval node_modules/@hookform/resolvers/yup/dist/yup.module.js (1:645)
async eval node_modules/react-hook-form/dist/index.esm.js (1213:40)

onSubmit is not called, so it looks like this is indeed an issue with the yup resolver. I'm not seeing anything obviously wrong in my code - here are the essentials:

import React from 'react'
import { useForm } from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers/yup'
import * as yup from 'yup'
import log from 'loglevel'

import { t } from 'i18n'

export default function SearchForm({ className = '', onResults, onError, onFocus }) {

  const validationSchema = yup.object().shape({
    searchTerm: yup.string().required()
  })

  const { register, handleSubmit } = useForm({
    mode: "onSubmit",
    resolver: yupResolver(validationSchema)
  })

  const onSubmit = (data) => {
    log.debug('onSubmit', data);
  }

  return (
    <form id='siteSearchForm' className={className} onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="searchTerm" className="sr-only">
        {t('search.term')}
      </label>
      <input
        type="text"
        {...register('searchTerm', {required: true})}
        placeholder={t('search.placeholder')}
        onFocus={() => { if (onFocus) { onFocus() }}} />
      <div >
        <button type="submit">
          {t('search.title')}
        </button>
      </div>
    </form>
  );
}

Anything obviously wrong with what I'm doing here? Thanks!

[jorisre]

Hi @stephent

Have you tried to remove your node_modules and re-install your project ? It seems you're using RHF 6 (the set function is not exported in the v6 while version 7 exports it)

The code looks good, can you share a codesandbox or repository with your problem please ?

[stephent]

Thanks. I haven't tried a reinstall (I've never once had to do that in the life of the project), but will give it a go tomorrow and report back.

[domhede]

I was having the same issue. Updating @hookform/resolvers to latest 2.0.1 resolved the issue for me.

[stephent]

@jorisre a clean npm install seems to have resolved it.

I think my npm installation is losing the plot - that's the second screw up in unrelated modules in as many days - had to wipe and reinstall in both instances. Thanks!

[shabbirumrali]

@jorisre I have tried removing node_modules and reinstalling back but issue isn't resolve at my end

error: Login.js:10 Uncaught TypeError: _store_auth_slice__WEBPACK_IMPORTED_MODULE_2__.authActions.login is not a function at handleSubmit (Login.js:10:1)

auth-slice.js

`import { createSlice } from "@reduxjs/toolkit";

const authSlice = createSlice({
name: 'Auth',
initialState: {isLoggedIn: false},
reducer: {
login(state) {
state.isLoggedIn = true
},
logout(state) {
state.isLoggedIn = false
}
}
})
export const authActions = authSlice.actions
export default authSlice`

login.js

`import React from 'react'
import { useDispatch } from 'react-redux'
import { authActions } from '../store/auth-slice'

const Login = () => {
const dispatch = useDispatch()
const handleSubmit = (e) => {
e.preventDefault()
// dispatch(authActions.login())
dispatch(authActions.login())
}
return (

Login Form

User Name

Password

Submit

)
}

export default Login`

[StevNdegwa]

Same issue. Removing node_modules and re-installing worked for me

[vitgrocha]

Pode me ajudar? já tentei fazer essa sua solução, porém, sem sucesso......
o meu erro que aparece é esse:
TypeError: (0, _reactHookForm.UseForm) is not a function. (In '(0, _reactHookForm.UseForm)({
resolver: (0, _yup.yupResolver)(schima)
})', '(0, _reactHookForm.UseForm)' is undefined)

[vitgrocha]

[nbentoneves]

I used an old version of react hook form: "react-hook-form": "^6.15.5" with "@hookform/resolvers": "^2.6.1". I updated and the error is gone.

[malithmcr]

Having the same issue after updating react to 18

[The-Anomaly]

I'm having this same issue "Error: (0 , react_hook_form__WEBPACK_IMPORTED_MODULE_6__.useForm) is not a function"

Callstack:

eO
file:///C:/Users/admin/Desktop/GIT/sendstack/ctrl-dashboard/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:263560)
<unknown>
file:///C:/Users/admin/Desktop/GIT/sendstack/ctrl-dashboard/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:276362)
Object.toJSON
file:///C:/Users/admin/Desktop/GIT/sendstack/ctrl-dashboard/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:281132)
stringify
<anonymous>
<unknown>
file:///C:/Users/admin/Desktop/GIT/sendstack/ctrl-dashboard/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:267488)
ez
file:///C:/Users/admin/Desktop/GIT/sendstack/ctrl-dashboard/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:267567)
eH
file:///C:/Users/admin/Desktop/GIT/sendstack/ctrl-dashboard/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:267968)
Timeout._onTimeout
file:///C:/Users/admin/Desktop/GIT/sendstack/ctrl-dashboard/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:264466)
listOnTimeout
node:internal/timers (573:17)
process.processTimers
node:internal/timers (514:7)

Packages installed:
"@hookform/resolvers": "^3.3.2",
"next": "14.0.4",
"react": "^18",
"react-dom": "^18",
"react-hook-form": "^7.49.2",
"yup": "^1.3.3"

My Code:

import styles from "./styles.module.scss";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import { useForm, SubmitHandler } from "react-hook-form";
import Link from "next/link";
import { Routes } from "@/router/routes";
import { Button, Input } from "@/components";

interface LoginData {
  email: string;
  password: string;
}

const initLoginData: LoginData = {
  email: "",
  password: "",
};

const schema = yup
  .object()
  .shape({
    email: yup.string().email("Enter a valid email").required("Required"),
    password: yup.string().required("Required"),
  })
  .required();

const LoginUI = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
    watch,
    setValue,
  } = useForm<LoginData>({
    resolver: yupResolver(schema),
    defaultValues: initLoginData,
  });

  return (
    <>
      <section className={styles.header}>
        <h1 className={styles.header__ttl}>Login</h1>
      </section>
    </>
  );
};

export { LoginUI };

I've tried deleting my node_modules and reinstalling all dependencies, but nothing changes.

[studiodamiro]

have you resolved this by any chance?

[studiodamiro]

ok.. got it. it needs to run on client, silly I forgot about 'use client'

[mmd-moradi]

For those using Next.js in the App directory, ensure that you place "use client" at the top of your component file. This should resolve the issue.

[zenismaharjan]

This worked for me. Thanks

"dependencies": { "next": "14.0.4", "react": "^18", "react-dom": "^18", "react-hook-form": "^7.49.2" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.0.4", "postcss": "^8", "tailwindcss": "^3.3.0", "typescript": "^5" }

[dennisbart]

This worked. Thanks

[matheuspbmarques]

For me, I write 'use client' in top file and resolver for me

[Endaline]

if you are using Next js I think the solution is just to input "use client" at the top of your code 😒😒 l had this error but "use client" was the solution

[LakshanRukantha]

I am working on NextJS project and after setting the page as "use client" the error is gone.

[abdulwaheed16]

import { zodResolver } from "@hookform/resolvers";
import { z } from "zod";

const studentValidationSchema = z.object({
fullname: z.string().min(3, "Full Name is required"),
email: z.string().min(3, "Email is required").email("Invalid Email Address"),
phone: z
.string()
.min(10, "Phone Number is required")
.max(15, "Invalid Contact Number"),
});

const {
register,
handleSubmit,
watch,
reset,
trigger,
formState: { errors },
} = useForm({
resolver: zodResolver(studentValidationSchema),
});

ERROR-------------------------
Unhandled Runtime Error
TypeError: (0 , hookform_resolvers__WEBPACK_IMPORTED_MODULE_11_.zodResolver) is not a function

Source
components/Contact/MultistepForm/index.js (43:26) @ studentValidationSchema

41 | formState: { errors },
42 | } = useForm({

43 | resolver: zodResolver(studentValidationSchema),
| ^
44 | });

I re-install node modules as well update the @hookform/resolvers. It is not working for me :((

[craigmcc]

Are you using next.js (14 or 15)? If so, do you have "use client" at the top of your component?

By default, components are server side unless you do this, meaning you can't use things like useForm() there.

[AWAhmad]

I tried "use client". It doesn't work
Then I specify the zodResolver path as @hookform/resolvers/zod
It works for me.

I appreciate your support:))

[AWAhmad]

It's me @abdulwaheed16 :)