NextJs 12: Named export `set` not found #271

mrodrigues95 · 2021-10-31T19:21:29Z

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

The text was updated successfully, but these errors were encountered:

allwd · 2021-10-31T21:16:33Z

@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 · 2021-10-31T21:47:07Z

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

jhg023 · 2021-11-01T00:46:58Z

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 · 2021-11-01T01:22:43Z

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

sgonv · 2021-11-01T10:27:18Z

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 · 2021-11-01T15:55:57Z

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 · 2021-11-01T21:30:38Z

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

bluebill1049 · 2021-11-01T22:11:03Z

thanks @jorisre 🙏

sgonv · 2021-11-02T02:23:08Z

@azarmehri Oh, it worked for me. Thanks!

hongdeyuan · 2021-11-02T07:40:30Z

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 · 2021-11-02T17:47:28Z

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 · 2021-11-02T19:00:22Z

Another fix would be

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

JamesWong1999 · 2021-11-03T00:20:34Z

similar issue: vercel/next.js#30750 ?

PaulHaze · 2021-11-03T23:46:38Z

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 · 2021-11-04T00:59:17Z

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 · 2021-11-04T03:34:26Z

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:
vercel/next.js#30750

bluebill1049 · 2021-11-04T03:47:52Z

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

PaulHaze · 2021-11-04T06:54:23Z

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 · 2021-11-05T05:10:36Z

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 · 2021-11-06T21:38:01Z

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

bigint · 2021-11-07T02:46:39Z

Yes still this is blocking 😕

phanvanluan94 · 2021-11-07T05:41:05Z

Same issue.

jeromeSH26 · 2021-11-08T16:28:23Z

downgrading to 12.0.1 fix the issue

PaulHaze · 2021-11-08T20:20:19Z

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

bluebill1049 · 2021-12-10T08:57:10Z

all valid opinions @yordis

pronovaso · 2021-12-10T09:18:06Z

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

simontaisne · 2021-12-10T10:13:04Z

7.21.1 works well, but not 7.21.2 😅

evocateur · 2021-12-10T17:42:21Z

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 · 2021-12-10T18:09:45Z

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

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 Next v12, no longer explode when encountering this module. Refs react-hook-form#7095 Refs react-hook-form#7088 Refs react-hook-form/resolvers#271 Refs vercel/next.js#30750

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 Next v12, no longer explode when encountering this module. Refs react-hook-form#7244 Refs react-hook-form#7095 Refs react-hook-form#7088 Refs react-hook-form/resolvers#271 Refs vercel/next.js#30750

evocateur · 2021-12-10T19:13:03Z

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

bluebill1049 · 2021-12-10T22:06:16Z

thank you again @evocateur

) * 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 Next v12, no longer explode when encountering this module. Refs #7244 Refs #7095 Refs #7088 Refs react-hook-form/resolvers#271 Refs vercel/next.js#30750 * fix(esm-interop): Import non-ESM React as default

bluebill1049 · 2021-12-11T09:06:28Z

beta: Version 7.21.3-beta.0

bluebill1049 · 2021-12-11T09:14:26Z

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

JuanM04 · 2021-12-11T14:18:54Z

v7.21.3-beta.0 works perfectly!

bluebill1049 · 2021-12-12T01:01:46Z

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

Alexandredc · 2021-12-13T07:39:41Z

Many thanks @bluebill1049 & @evocateur 🙏

bluebill1049 · 2021-12-13T07:44:25Z

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

… (#7262) * 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 package.json (implicit) type of commonjs. Bundlers that expect ESM, such as Next v12, no longer explode when encountering this module. Refs #7244 Refs #7095 Refs #7088 Refs react-hook-form/resolvers#271 Refs vercel/next.js#30750 * fix(esm-interop): Import non-ESM React as default * 7.21.3-beta.0 * update with v2 compress * fix lint error and update packages Co-authored-by: Daniel Stockman <5605+evocateur@users.noreply.github.com>

evocateur · 2021-12-13T17:12:02Z

@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 · 2021-12-13T21:37:43Z

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 · 2022-04-01T13:48:35Z

@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 · 2022-11-19T08:28:18Z

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 - vercel/next.js#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 · 2023-09-11T14:58:15Z

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 · 2023-09-11T14:58:48Z

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

Junnygram · 2023-09-12T08:18:46Z

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; };

bluebill1049 added the bug Something isn't working label Oct 31, 2021

bluebill1049 mentioned this issue Nov 1, 2021

issue: react-hook-form with nextjs 12 failed during yarn build react-hook-form/react-hook-form#6935

Closed

1 task

Andrewnt219 mentioned this issue Nov 2, 2021

Named export set not found Andrewnt219/rent-near-me#84

Closed

bluebill1049 added the help wanted Extra attention is needed label Nov 2, 2021

amuttsch mentioned this issue Nov 4, 2021

Next.js 12.0.2 + Framer 5.0.1 leading to errors in production vercel/next.js#30750

Closed

bluebill1049 added the dependencies Pull requests that update a dependency file label Nov 8, 2021

bluebill1049 mentioned this issue Dec 10, 2021

Error: Unexpected import statement in CJS module. using @hookform/resolvers 2.8.4, react-hook-form 7.21.2, and Next.js 12.0.7 #301

Closed

evocateur mentioned this issue Dec 10, 2021

build(esm): Use explicit .mjs extension for ESM, with CJS interop react-hook-form/react-hook-form#7261

Merged

bluebill1049 mentioned this issue Dec 11, 2021

beta: build(esm): Use explicit .mjs extension for ESM, with CJS interop (#7… react-hook-form/react-hook-form#7262

Merged

bluebill1049 mentioned this issue Dec 12, 2021

issue: build fails on nextjs v12, something to with yup or yup resolvers logs suggest "Named export 'set' not found." react-hook-form/react-hook-form#7267

Closed

1 task

bluebill1049 closed this as completed Dec 13, 2021

bluebill1049 mentioned this issue Jan 25, 2022

Imports not works since version 2.8.4 or 2.8.3 #337

Closed

NextJs 12: Named export set not found #271

NextJs 12: Named export set not found #271

Comments

mrodrigues95 commented Oct 31, 2021 • edited

allwd commented Oct 31, 2021

mrodrigues95 commented Oct 31, 2021

jhg023 commented Nov 1, 2021

Czer0C commented Nov 1, 2021

sgonv commented Nov 1, 2021

azarmehri commented Nov 1, 2021

jorisre commented Nov 1, 2021

bluebill1049 commented Nov 1, 2021

sgonv commented Nov 2, 2021

hongdeyuan commented Nov 2, 2021 • edited

uDaniAlves commented Nov 2, 2021

Yhozen commented Nov 2, 2021

JamesWong1999 commented Nov 3, 2021

PaulHaze commented Nov 3, 2021 • edited

dsacramone commented Nov 4, 2021 • edited

PaulHaze commented Nov 4, 2021

bluebill1049 commented Nov 4, 2021

PaulHaze commented Nov 4, 2021

dsacramone commented Nov 5, 2021 • edited

excludeEmptyString is not defined

jhg023 commented Nov 6, 2021

bigint commented Nov 7, 2021

phanvanluan94 commented Nov 7, 2021

jeromeSH26 commented Nov 8, 2021

PaulHaze commented Nov 8, 2021

excludeEmptyString is not defined

bluebill1049 commented Dec 10, 2021

pronovaso commented Dec 10, 2021

simontaisne commented Dec 10, 2021

evocateur commented Dec 10, 2021

sveggiani commented Dec 10, 2021

evocateur commented Dec 10, 2021

bluebill1049 commented Dec 10, 2021

bluebill1049 commented Dec 11, 2021

bluebill1049 commented Dec 11, 2021

JuanM04 commented Dec 11, 2021

bluebill1049 commented Dec 12, 2021

Alexandredc commented Dec 13, 2021

bluebill1049 commented Dec 13, 2021

evocateur commented Dec 13, 2021

bluebill1049 commented Dec 13, 2021

mustafaabobakr commented Apr 1, 2022

ayepRahman commented Nov 19, 2022 • edited

Junnygram commented Sep 11, 2023

hongdeyuan commented Sep 11, 2023 via email

Junnygram commented Sep 12, 2023

NextJs 12: Named export `set` not found #271

NextJs 12: Named export `set` not found #271

mrodrigues95 commented Oct 31, 2021 •

edited

hongdeyuan commented Nov 2, 2021 •

edited

PaulHaze commented Nov 3, 2021 •

edited

dsacramone commented Nov 4, 2021 •

edited

dsacramone commented Nov 5, 2021 •

edited

ayepRahman commented Nov 19, 2022 •

edited