NextJs 12: Named export `set` not found

[mrodrigues95]

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".

[hongdeyuan]

本人已收到您的邮件，辛苦了！如有重要事情，看到后，将尽快给你回复。。。

[bluebill1049]

Using patch-package, this fixed it for me (with react-hook-form@7.21.0):

diff --git a/node_modules/react-hook-form/dist/index.esm.js b/node_modules/react-hook-form/dist/index.mjs
similarity index 100%
rename from node_modules/react-hook-form/dist/index.esm.js
rename to node_modules/react-hook-form/dist/index.mjs
diff --git a/node_modules/react-hook-form/package.json b/node_modules/react-hook-form/package.json
index 579ab00..1e1c18e 100644
--- a/node_modules/react-hook-form/package.json
+++ b/node_modules/react-hook-form/package.json
@@ -3,11 +3,11 @@
   "description": "Performant, flexible and extensible forms library for React Hooks",
   "version": "7.21.0",
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/index.mjs",
   "umd:main": "dist/index.umd.js",
   "unpkg": "dist/index.umd.js",
   "jsdelivr": "dist/index.umd.js",
-  "jsnext:main": "dist/index.esm.js",
+  "jsnext:main": "dist/index.mjs",
   "source": "src/index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": true,
@@ -18,7 +18,7 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "import": "./dist/index.esm.js",
+      "import": "./dist/index.mjs",
       "require": "./dist/index.cjs.js"
     }
   },

Basically, the import target needs to use the .mjs extension, preserving the default type of CommonJS for the overall package.

thank you so much for your contribution and help! will release a beta on this soon.

[bluebill1049]

can we test this beta version? react-hook-form@7.21.1-0

[jorisre]

Seems working for me @bluebill1049 👏🏻

[evocateur]

@bluebill1049 react-hook-form@7.21.1-0 works with next@12.0.7, thanks!

[Axedyson]

Hmm I'm getting an error when using react-hook-form with storybook, it does work with next.js now! When running yarn storybook where "storybook": "start-storybook -p 6006" is written in my package.json, I get the following error:

ERROR in /home/anders/Projects/syncbase/node_modules/react-hook-form/dist/index.esm.mjs 68:24-43
Can't import the named export 'createContext' from non EcmaScript module (only default export is available)
...
...
etc.

Here are the versions that I'm currently using:

"@hookform/resolvers": "^2.8.4",
"react-hook-form": "7.21.1-0",
"@storybook/addon-a11y": "^6.4.9",
"@storybook/addon-essentials": "^6.4.9",
"@storybook/addon-interactions": "^6.4.9",
"@storybook/addon-postcss": "^2.0.0",
"@storybook/jest": "^0.0.5",
"@storybook/react": "^6.4.9",
"@storybook/testing-library": "^0.0.7"

Everything works when I'm using

"react-hook-form": "7.20.1"

Should I make a new dedicated issue for this?

[dsacramone]

7.21.1-0

did you run into an issue like this?

npm ERR! Could not resolve dependency:
npm ERR! peer react-hook-form@"^7.0.0" from @hookform/resolvers@2.8.4
npm ERR! node_modules/@hookform/resolvers
npm ERR!   @hookform/resolvers@"^2.8.3" from the root project

[bluebill1049]

closing: https://github.com/react-hook-form/react-hook-form/releases/tag/v7.21.1

[bluebill1049]

Sorry, this is a never-ending issue... https://github.com/react-hook-form/react-hook-form/issues/7251

[yordis]

@bluebill1049 that one is on CRA ... they are way behind updating anything being honest on the topic ... but I hear you ... this Python 2v3 situation is really frustrating

[bluebill1049]

Thanks for understanding @yordis... 🤦🏻‍♂️

[yordis]

@bluebill1049 what could be happening could be

A) The NodeJS version itself doesn't support the exports and ESM by default (pre-v14 I think) B) CRA setup tooling doesn't support the exports neither

So ... I would suggest to ask in CRA if they support the exports (dual package) before getting into a rabbit hole.

[bluebill1049]

Honestly, I think CRA users shouldn't expect a breaking change so does nextjs, however, this issue is created by nextjs 12, so to be fair, I hope the nextjs team can look into a solution for fixing this. In the meantime, I think it's better to have a solution to comfort both parties without destroying the developer experience (on whatever users prefer to use).

[yordis]

@bluebill1049 and that is why I mentioned to you a few weeks ago that I gave up on ESM unless I have a strong reason ...

The tools are still figuring out how to deal with it ... especially those that are not Webpack since it was doing a lot of magical things.

Not sure what is the right resolution here ... technically blame Webpack for some of the mess since it trained people to get used to "wrong things" (kind of misleading word but close enough, I cant find a better word).

Anyway ... back to broken NextJS on my side .... which is really annoying, I stopped using CRA in 2018 for a reason ... (before I even adopted NextJS) that is all I will say.

[yordis]

"react-hook-form": "7.21.1",

Had to lock the version to 7.21.1 for now at least

[bluebill1049]

all valid opinions @yordis

[pronovaso]

I confirm, that version 7.21.1 and Next 12.0.7 works well. 7.21.1. Thanks a lot.

[simontaisne]

7.21.1 works well, but not 7.21.2 😅

[evocateur]

I believe the root cause for the CRA issue is that RHF uses the import * as React from 'react' form when it should be using import React from 'react'. React itself is not ESM, it's just a default export that Babel et al make-believe is a series of named exports, thus the error message.

I'm surprised RHF isn't using esModuleInterop: true in its tsconfig. Digging in locally to see if my hunch bears fruit.

[sveggiani]

For me neither 7.21.1 or 7.21.2 are working with Next.js 12.0.7.

[evocateur]

I verified that https://github.com/react-hook-form/react-hook-form/pull/7261 works for NextJS 12.0.7, but I don't have a Storybook or CRA project offhand to test the backward-compatibility.

[bluebill1049]

thank you again @evocateur

[bluebill1049]

beta: Version 7.21.3-beta.0

[bluebill1049]

the above beta pass test for my with CRA and nextjs thank so much @evocateur life saver.

[JuanM04]

v7.21.3-beta.0 works perfectly!

[bluebill1049]

oh wow, I didn't check evocateur's profile, he is the creator/author of Lerna. Respect 🎩

[Alexandredc]

Many thanks @bluebill1049 & @evocateur 🙏

[bluebill1049]

thanks @Alexandredc All effort and credit goes to evocateur ❤️

[evocateur]

@bluebill1049 I'm merely the longtime maintainer (presently a bit delinquent), not the author, of Lerna. I appreciate your responsiveness and effort as creator and maintainer of React Hook Form!

[bluebill1049]

hopefully, this is the last time i close this issue: https://github.com/react-hook-form/react-hook-form/releases/tag/v7.22.0 🙏

[mustafaabobakr]

@Yhozen Solution Worked, Thank you 🎉

const { yupResolver } = require('@hookform/resolvers/yup');

My versions :

{
    "@hookform/resolvers": "^2.8.8",
    "next": "^12.1.4",
    "react-hook-form": "^7.29.0",
    "yup": "^0.32.11"
}

[ayepRahman]

This reoccur in next js v13 when I am trying to use zodResolver and try running yarn build with nextjs 13. I've also created a ticket in vercel

Link - https://github.com/vercel/next.js/issues/43121

 "dependencies": {
    "@heroicons/react": "^2.0.13",
    "@hookform/error-message": "^2.0.1",
    "@hookform/resolvers": "^2.9.10",
    "@tanstack/react-query": "^4.16.1",
    "@types/node": "18.11.9",
    "@types/react": "18.0.25",
    "@types/react-dom": "18.0.9",
    "aws-sdk": "^2.1257.0",
    "axios": "^1.1.3",
    "clsx": "^1.2.1",
    "dotenv": "^16.0.3",
    "eslint": "8.27.0",
    "eslint-config-next": "^13.0.3",
    "flowbite": "^1.5.4",
    "flowbite-react": "^0.3.5",
    "mongodb": "^4.11.0",
    "multer": "^1.4.5-lts.1",
    "next": "^13.0.3",
    "next-connect": "^0.13.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-dropzone": "^14.2.3",
    "react-hook-form": "^7.39.4",
    "react-tailwindcss-select": "^1.3.3",
    "typescript": "4.9.3",
    "zod": "^3.19.1"
  },

ReferenceError: File is not defined
    at 3608 (/Users/arifrahman/Code/personal/pokedex-nextjs13/.next/server/app/pokemon/create/page.js:412:31)
    at __webpack_require__ (/Users/arifrahman/Code/personal/pokedex-nextjs13/.next/server/webpack-runtime.js:25:42)
    at B (/Users/arifrahman/Code/personal/pokedex-nextjs13/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:924:142)
    at H (/Users/arifrahman/Code/personal/pokedex-nextjs13/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:922:264)
    at /Users/arifrahman/Code/personal/pokedex-nextjs13/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:927:218

[Junnygram]

how do i fix the error in my next13 app Type 'Resolver<{ password?: string | undefined; email: string; }>' is not assignable to type 'Resolver<LoginModel, any>'. Types of parameters 'values' and 'values' are incompatible. Type 'LoginModel' is not assignable to type '{ password?: string | undefined; email: string; }'

export type LoginModel = { email?: string; password?: string; }; const { handleSubmit, register, formState: { errors, isSubmitting, isValid }, } = useForm<LoginModel>({ resolver: yupResolver(schema), mode: 'all', });

const schema = yup.object().shape({ email: yup.string().email().required(), password: yup.string().password(), });

[hongdeyuan]

I have received your email, thank you!If there is anything important, I will reply to you as soon as I see it...

[Junnygram]

its been fixed , i just had to through the documentation well const schema = yup.object().shape({ email: yup.string().email().required(), password: yup.string().password().required(), });

for the type export type LoginModel = { email: string; password: string; };