Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

SyntaxError: Cannot use import statement outside a module

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

截圖 2021-01-04 下午11 07 10

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

Issue Analytics

State:
Created 3 years ago
Reactions:8
Comments:9 (2 by maintainers)

Top GitHub Comments

10reactions

la55ucommented, Jan 4, 2021

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

8reactions

jorisrecommented, Jan 4, 2021

Same as https://github.com/react-hook-form/resolvers/issues/100

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

Top Results From Across the Web

"Cannot use import statement outside a module" error when ...

The error occurs because react-hook-mousetrap is exported as an ESM library. You can have Next.js transpile it using next-transpile-modules in your ...

@hookform/resolvers - npm

A simple and composable way to validate data in JavaScript (or TypeScript). npm. import { useForm } from 'react-hook-form' ...

Cannot use import statement outside a module - YouTube

Are you using imports in a node. js application and running into the SyntaxError : Cannot use import statement outside a module error...

Next.js 11 - User Registration and Login Tutorial with Example ...

In this tutorial we'll go through an example of how to build a simple user registration, login and user management (CRUD) application with...

unexpected token, expected "," jest - You.com | The AI Search ...

Try to add typescript extension in jest config : module.exports = { roots: ['<rootDir>'], transform: { '^.+\\.ts?$': 'ts-jest' } ...