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

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

[mrodrigues95]

@allwd That seems to work as a work around for the time being, thanks.

[jhg023]

I'm facing this bug as well after updating to Nextjs 12.0.2, and I did not encounter this issue on Nextjs 12.0.1

[Czer0C]

Having the same issue with NextJS 12.0.2, the temporary fix provided by @allwd works.

[sgonv]

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';`

[azarmehri]

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 😊

[jorisre]

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

[bluebill1049]

thanks @jorisre 🙏

[sgonv]

@azarmehri Oh, it worked for me. Thanks!

[hongdeyuan]

Having the same issue with NextJS 12.0.2；

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

This is a way to bypass the Rust compiler and does not solve the fundamental problem. If you install a dependency that does not satisfy the CommonJS module, the project will still not run properly

[uDaniAlves]

I'm having the same issue and @allwd solution worked from me but Storybook stopped working.

The errors are: ERROR in ./node_modules/@hookform/resolvers/yup/dist/yup.mjs 1:909-910 Can't import the named export 'appendErrors' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/@hookform/resolvers/yup/dist/yup.mjs 1:710-711 Can't import the named export 'toNestError' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/@hookform/resolvers/yup/dist/yup.mjs 1:582-583 Can't import the named export 'validateFieldsNatively' from non EcmaScript module (only default export is available)

[Yhozen]

Another fix would be

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

[JamesWong1999]

similar issue: https://github.com/vercel/next.js/issues/30750 ?

[PaulHaze]

Facing the same issue with Next Js, tried @allwd & @Yhozen solutions. Neither worked

10:44:06.116 | > Build error occurred
-- | --
10:44:06.117 | file:///vercel/path0/node_modules/@hookform/resolvers/dist/resolvers.mjs:1
10:44:06.117 | import{get  as r,set as e}from"react-hook-form";var i=function(e,i){for(var a in  i.fields){var  f=i.fields[a];if(f&&f.ref&&"reportValidity"in f.ref){var   t=r(e,a);f.ref.setCustomValidity(t&&t.message\|\|""),f.ref.reportValidity()}}},a=function(a,f){f.shouldUseNativeValidation&&i(a,f);var  t={};for(var o in a){var  s=r(f.fields,o);e(t,o,Object.assign(a[o],{ref:s&&s.ref}))}return  t};export{a as toNestError,i as validateFieldsNatively};
10:44:06.118 | ^^^
10:44:06.118 | 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.

If anyone has any other solutions I would love to hear them!

EDIT Next.Js versions 11.1.3 and 12.0.1 have fixed the build issue so at least it building for now....

[dsacramone]

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?

[PaulHaze]

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

[bluebill1049]

can we try nextjs v12.0.3-canary.2? see if this issue is getting resolved?

[PaulHaze]

can we try nextjs v12.0.3-canary.2? see if this issue is getting resolved?

I actually tried that version before reverting back to 12.0.1 and from what I could tell on my end it didn't do anything to resolve it. I tried the 3 methods of importing that @allwd & @Yhozen mentioned.

[dsacramone]

Facing the same issue with Next Js, tried @allwd & @Yhozen solutions. Neither worked

10:44:06.116 | > Build error occurred
-- | --
10:44:06.117 | file:///vercel/path0/node_modules/@hookform/resolvers/dist/resolvers.mjs:1
10:44:06.117 | import{get  as r,set as e}from"react-hook-form";var i=function(e,i){for(var a in  i.fields){var  f=i.fields[a];if(f&&f.ref&&"reportValidity"in f.ref){var   t=r(e,a);f.ref.setCustomValidity(t&&t.message\|\|""),f.ref.reportValidity()}}},a=function(a,f){f.shouldUseNativeValidation&&i(a,f);var  t={};for(var o in a){var  s=r(f.fields,o);e(t,o,Object.assign(a[o],{ref:s&&s.ref}))}return  t};export{a as toNestError,i as validateFieldsNatively};
10:44:06.118 | ^^^
10:44:06.118 | 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.

If anyone has any other solutions I would love to hear them!

EDIT Next.Js versions 11.1.3 and 12.0.1 have fixed the build issue so at least it building for now....

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

[jhg023]

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

[bigint]

Yes still this is blocking 😕

[phanvanluan94]

Same issue.

[jeromeSH26]

downgrading to 12.0.1 fix the issue

[PaulHaze]

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 !? :)

[justyn-clark]

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

[taskordhq]

Thanks @justyn-clark as a temp workaround this works

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

[dsacramone]

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 !? :)

Hey Paul, what version of react-hook-form are you using, as I have those same versions you mentioned (next/hookform) and still getting the error.

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 !? :)

Thanks! What version of react-hook-form are you using?

[PaulHaze]

@dsacramone I'm using "react-hook-form": "^7.18.1",

[jhg023]

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

[yordis]

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

Didn't work for me, any updates on this one?

[ItaloCanturil]

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

Didn't work for me, any updates on this one?

const { yupResolver } = require('@hookform/resolvers/yup') worked for me

[Seijinx]

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.

[bigint]

For me 7.20.0 with next 12.0.4 works fine 🎉

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

[bluebill1049]

7.20.0 type module breaks other libs depends on it...

[yordis]

Python 2 vs. 3 ....

@bluebill1049 I think we should commit to figuring out how to make it work for ESM ... I know it is painful, but this was the inevitable from NodeJS 😭

[bluebill1049]

@yordis we do have ESM support (as far as I know), its' a mix with commonJS and ESM the real pain.

[yordis]

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

[newadbie]

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

[bluebill1049]

thanks, @yordis for trying to help.

[bluebill1049]

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

[Seijinx]

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 !

[jhg023]

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.

[novazembla]

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.

[AlexandruCalinica]

v7.20.1 works with v12.0.2 for me.

[embedvr]

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.

[mario-jerkovic]

import { yupResolver } from '@hookform/resolvers/zod/dist/zod' worked for me with next 12.0.6 with deprecation warning in console

[DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/projectsName/node_modules/@hookform/resolvers/package.json.
Update this package.json to use a subpath pattern like "./*".

NodeJS Version 16.13.1

[pronovaso]

I still have an issue with yup. My setup is last versions of resolver,react-hook-form and NextJS version from 12.0.2 to 12.0.6

[AloisCRR]

Hello, I'm getting this error:

Server Error
ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization

This error happened while generating the page. Any console logs will be displayed in the terminal window.

I've tried all ways, the only one that works is using require() but then I loose TypeScript inference and the linter goes crazy (I mean it forbids the use of require()). If I remove the "resolver" property from useForm then everything works properly.

Versions:

"@hookform/resolvers": "^2.8.4"
"next": "^12.0.7"
"react-hook-form": "^7.20.5"

Node v17.2.0

[horaotoko]

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

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

[daniel-stockman-lark]

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.