React-hook-form build problem when upgrading nextjs to version 12

Question

When I upgrade nextjs to version 12 and I run yarn dev it has a problem in react-hook-form library:

SyntaxError: Named export 'set' not found. The requested module react-hook-form is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using ....

Can anyone help me fix this error?

Answer 1

import your yupResolver slightly differently.

as opposed to:

import {yupResolver} from '@hookform/resolvers/yup';

do:

import {yupResolver} from '@hookform/resolvers/yup/dist/yup';

Answer 2

As David Cingolani mentioned, this problem was fixed in react-hook-form after version 7.22.5.

To update the lib to the latest version run

npm i react-hook-form@latest

or

yarn add react-hook-form@latest

To update to the most recent version or use the suffix "@7.22.5" to update to the exact version.

E.g: npm i [email protected]

Answer 3

with the version 7.22.5 of react hook form this error was fixed