resolvers: 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

Create a new NextJS project on v12
Install @hookform/resolvers
Try to use any resolver (e.g. zod)
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".

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 61
Comments: 85 (22 by maintainers)

Commits related to this issue

yupResolver in next 12 https://github.com/react-hook-form/resolvers/issues/271 — committed to takuji31/circle-manager by takuji31 3 years ago
build(esm): Use explicit .mjs extension for ESM This ensures that Node always treats the ESM output as ESM, despite the package.json (implicit) type of commonjs. Bundlers that expect ESM, such as Nex... — committed to evocateur/react-hook-form by evocateur 3 years ago
🏗️ build(esm): Use explicit .mjs extension for ESM (#7244) This ensures that Node always treats the ESM output as ESM, despite the package.json (implicit) type of commonjs. Bundlers that expect ESM,... — committed to react-hook-form/react-hook-form by evocateur 3 years ago
build(esm): Use explicit .mjs extension for ESM This ensures that Node always treats the ESM output as ESM, despite the package.json (implicit) type of commonjs. Bundlers that expect ESM, such as Nex... — committed to evocateur/react-hook-form by evocateur 3 years ago
build(esm): Use explicit .mjs extension for ESM This ensures that Node always treats the ESM output as ESM, despite the package.json (implicit) type of commonjs. Bundlers that expect ESM, such as Nex... — committed to evocateur/react-hook-form by evocateur 3 years ago
build(esm): Use explicit .mjs extension for ESM, with CJS interop (#7261) * build(esm): Use explicit .mjs extension for ESM This ensures that Node always treats the ESM output as ESM, despite the ... — committed to react-hook-form/react-hook-form by evocateur 3 years ago
🏛️ build(esm): Use explicit .mjs extension for ESM, with CJS interop (#7… (#7262) * build(esm): Use explicit .mjs extension for ESM, with CJS interop (#7261) * build(esm): Use explicit .mjs exten... — committed to react-hook-form/react-hook-form by bluebill1049 3 years ago

Most upvoted comments

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

+63

jorisre on Nov 1, 2021

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

+24

allwd on Oct 31, 2021

Another fix would be

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { yupResolver } = require('@hookform/resolvers/yup')

+16

Yhozen on Nov 2, 2021

For me 7.20.0 with next 12.0.4 works fine 🎉

https://gitlab.com/yo/devparty/-/jobs/1799427151

+14

bigint on Nov 19, 2021

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.

+10

evocateur on Dec 10, 2021

Next.js 12.0.4 didn’t solve this issue either.

+10

jhg023 on Nov 16, 2021

Same issue.

+10

phanvanluan94 on Nov 7, 2021

@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"
}

mustafaabobakr on Apr 1, 2022

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

bluebill1049 on Dec 13, 2021

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

bluebill1049 on Dec 11, 2021

I also can confirm that v7.20.2 in combination with next v12.0.4 does not compile, but v.7.20.1 does. Just want to add that I added some webpack related settings next.config.js. So in my case next does not compile with webpack.

novazembla on Nov 24, 2021

import { yupResolver } from '@hookform/resolvers/yup/dist/yup' worked for me

justyn-clark on Nov 10, 2021

Nextjs 12.0.3 was released, but it doesn’t resolve this issue, unfortunately.

jhg023 on Nov 6, 2021

How about Typescript? I tried @allwd 's suggestion, but it doesn’t work well.

Type error: Could not find a declaration file for module '@hookform/resolvers/yup/dist/yup.umd'.
'/path/to/my_project/node_modules/@hookform/resolvers/yup/dist/yup.umd.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/hookform__resolvers` if it exists or add a new declaration (.d.ts) file containing `declare module '@hookform/resolvers/yup/dist/yup.umd';`

sgonv on Nov 1, 2021

Adding experimental.esmExternals: false to next.config file works for me.

https://github.com/vercel/next.js/issues/30750#issuecomment-962198711

horaotoko on Dec 6, 2021

I can’t update to v7.20.2 when using v12.0.4 of Next.js, as I experience the same issue as the OP. The latest version of react-hook-form I can use is v7.20.1.

jhg023 on Nov 23, 2021

downgrading to 12.0.1 fix the issue

jeromeSH26 on Nov 8, 2021

Yes still this is blocking 😕

bigint on Nov 7, 2021

7.21.1 works well, but not 7.21.2 😅

simontaisne on Dec 10, 2021

v7.21.3-beta.0 works perfectly!

JuanM04 on Dec 11, 2021

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

bluebill1049 on Dec 9, 2021

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.

daniel-stockman-lark on Dec 8, 2021

@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!

evocateur on Dec 13, 2021

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.

evocateur on Dec 10, 2021

Hi @sgonv. For Typescript, you need to import resolver like import { zodResolver } from '@hookform/resolvers/zod/dist/zod' instead @hookform/resolvers/zod. It works for me 😊

azarmehri on Nov 1, 2021

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

bluebill1049 on Dec 12, 2021

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

pronovaso on Dec 10, 2021

@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 on Dec 10, 2021

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

bluebill1049 on Dec 10, 2021

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

evocateur on Dec 9, 2021

Seems working for me @bluebill1049 👏🏻

jorisre on Dec 9, 2021

This is likely not an issue with react-hook-form as the module itself does provide ESM entry point: https://www.skypack.dev/view/react-hook-form

bluebill1049 on Nov 22, 2021

Some news? I still get this issue, it is 20 day 😮

newadbie on Nov 22, 2021

@azarmehri Oh, it worked for me. Thanks!

sgonv on Nov 2, 2021

Many thanks @bluebill1049 & @evocateur 🙏

Alexandredc on Dec 13, 2021

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

Had to lock the version to 7.21.1 for now at least

yordis on Dec 10, 2021

@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

yordis on Dec 10, 2021

Another fix would be

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { yupResolver } = require('@hookform/resolvers/yup')

This fixed seems to have fixed it for me. The fix from @allwd didn’t though.

embedvr on Nov 29, 2021

Upgrading “react-hook-form” to “7.20.0” generates the same issue in Next 11.1.2. I’m freezing this at 7.19.5 for now.

react-hook-form 7.20.2 fix this same problem in Next 11.1.2. Thanks @bluebill1049 !

Seijinx on Nov 23, 2021

@bluebill1049 yeah I checked the implementation and it seems like … but I hear you … I am still try-and-error with setups because we are under the mercy of how the underline tools originally load the components.

And, I think, unless the Node version supports the package.json#exports it wouldn’t work, which I am not sure if Vercel NodeJS@14 supports it.

yordis on Nov 19, 2021

@dsacramone I’m using “react-hook-form”: “^7.18.1”,

PaulHaze on Nov 15, 2021

Thanks @justyn-clark as a temp workaround this works

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

taskordhq on Nov 10, 2021

Hey @PaulHaze , are you still importing it the same? I did as you suggest and am using 12.0.1, and it did build, but when viewed in a browser, the page doesn’t work - as expected if my hookform isn’t working. Did you use a special “import” or way to get at it?

my error is:

excludeEmptyString is not defined

@dsacramone No I think I am just importing it as usual:

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

That is what I am using to import it. The versions I have in my package.json are:

"@hookform/resolvers": "^2.8.3", "next": "12.0.1",

So far it is working both locally and when I build/deploy it. I hope that is of some use !? 😃

PaulHaze on Nov 8, 2021

Same issue. No solutions presented here works.

These did not work: import { yupResolver } from ‘@hookform/resolvers/yup/dist/yup.umd’; const { yupResolver } = require(‘@hookform/resolvers/yup’); import { yupResolver } from ‘@hookform/resolvers/yup/dist/yup’;

Any other solutions?

@jorisre - any updates to report?

@dsacramone Whilst not ideal, you can see my reply above in that dropping the version of Next down to 12.0.1 (specifically) in package.json and then re-running yarn (or npm) fixed all the build issues for me. As others have linked, this thread over at the Next repo seems to be dealing with the same (or similar) problem: https://github.com/vercel/next.js/issues/30750

PaulHaze on Nov 4, 2021