"Cannot Use Import Statement Outside a Module" Error When Importing React-Hook-Mousetrap in Next.Js

Cannot use import statement outside a module error when importing react-hook-mousetrap in Next.js

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 next.config.js.

const withTM = require('next-transpile-modules')(['react-hook-mousetrap']);

module.exports = withTM({ /* Your Next.js config */});

Next.js seemingly erroneous message SyntaxError: Cannot use import statement outside a module

I ended up using next/dynamic

import dynamic from 'next/dynamic';

...

const DynamicPackage = dynamic(() => import('package'), { ssr: false });

How to solve SyntaxError: Cannot use import implementing Magic with NextJS in a Typescript setup?

This is because Magic uses ESM style modules.

Solved using:

yarn add next-transpile-modules

and modifying my next.config.js to:

const withTM = require("next-transpile-modules")([
  "magic-sdk",
  "@magic-sdk/provider",
  "@magic-sdk/types",
  "@magic-sdk/commons",
]);

module.exports = withTM({
  reactStrictMode: true,
});

React-hook-form build problem when upgrading nextjs to version 12

As David Cingolani mentioned, this problem was fixed in react-hook-form after version 7.22.5.

To update the lib to the latest version run

npm i react-hook-form@latest

or

yarn add react-hook-form@latest

To update to the most recent version or use the suffix "@7.22.5" to update to the exact version.

E.g: npm i react-hook-form@7.22.5

---

Related Topics