NextJs 12: Named export `set` not found

Describe the bug I’ve upgraded to NextJS v12 which supports ES modules out of the box and now I’m getting the following error whenever I try to load any page that imports uses zodResolver.

file:///node_modules/@hookform/resolvers/dist/resolvers.mjs:1
import{get as r,set as o}from"react-hook-form";var a=function(a,e){var f={};for(var t in a){var n=r(e,t);o(f,t,Object.assign(a[t],{ref:n&&n.ref}))}return f};export{a as toNestError};
error - unhandledRejection: 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:

import pkg from 'react-hook-form';
const {get: r,set: o}from"react-hook-form";var a=function(a,e){var f={};for(var t in a){var n=r(e,t);o(f,t,Object.assign(a[t],{ref:n&&n.ref}))}return f};export{a: toNestError} = pkg;

To Reproduce

1. Create a new NextJS project on v12
2. Install @hookform/resolvers
3. Try to use any resolver (e.g. zod)
4. See error

import { zodResolver } from '@hookform/resolvers/zod';

export const useZodForm = ({
  schema,
  ...formConfig
}) => {
  return useForm({
    ...formConfig,
    resolver: zodResolver(schema),
  });
};

Expected behavior Import is resolved.

Additional context "@hookform/resolvers": "^2.8.2", "react-hook-form": "^7.18.0", "next": "^12.0.2".

[jorisre]

Hey all 👋🏻 I’m working on that issue, I’ll back to you soon as possible

[allwd]

@mrodrigues95 I faced the same issue just now. Fixed it temporarily by replacing import { yupResolver } from '@hookform/resolvers/yup'; with import { yupResolver } from '@hookform/resolvers/yup/dist/yup.umd';. Maybe it’s going to work for you as well.