Use next.js 10 @hookform/resolvers yup to get the following error SyntaxError: Cannot use import statement outside a module

[jq153387]

SyntaxError: Cannot use import statement outside a module

Use next.js 10 @hookform/resolvers yup to get the following error

import { transformToNestObject, } from 'react-hook-form';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/jq153387/Sites/test/node_modules/@hookform/resolvers/yup.js:1:18)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at eval (webpack-internal:///@hookform/resolvers/yup:1:18)
    at Object.@hookform/resolvers/yup (/Users/jq153387/Sites/test/.next/server/pages/index.js:115:1)
/Users/jq153387/Sites/test/node_modules/@hookform/resolvers/dist/yup.js:2

---

"dependencies": {
    "@hookform/resolvers": "^1.3.1",
    "next": "^10.0.4",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-hook-form": "^6.14.0",
    "yup": "^0.32.8"
  },

[jorisre]

Same as #100

I'm working on resolvers's V2 which will have a better bundle supports.
As a workaround, you can use 1.3.0

[la55u]

I have the exact same issue but with zod

[jq153387]

@jorisre Using 1.3.0 is the same situation, other versions 1.2.0 ~ 1.0.0 have been tried, all in the same situation. do not know why?

[la55u]

@jq153387 1.3.0 works, make sure you use the exact version and not ^1.3.0.

[jq153387]

@la55u Thank you so much, I don't quite understand the difference between 1.3.0 and ^1.3.0?

About node.js ^ in package.json dependency version

https://stackoverflow.com/questions/22565344/in-package-json-dependency-version
http://fredkschott.com/post/2014/02/npm-no-longer-defaults-to-tildes/

[pau1tuck]

@jq153387 yarn add @hookform/resolvers@1.3.0 (exact version) fixes the issue for me. If you use the caret ^ it means there could be a minor patch, e.g. 1.3.1, which doesn't work here.

[jorisre]

@pau1tuck The issue is solved, you can use the latest version v1.3.6

[trevorpfiz]

I am getting a similar error in "next": "12.0.7" with "@hookform/resolvers": "^2.8.4"

[FlorianCassayre]

Make sure you are importing:

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

and not:

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

That was my problem (the IDE picked this import for some reason).