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

Question

Trying to implement Magic in NextJS using TypeScript.

Following this example/tutorial, which uses JS not TS: https://github.com/magiclabs/example-nextjs

Problem: when importing Magic like so

import { Magic } from "magic-sdk";

function createMagic() {
  if (typeof window === "undefined") return null;
  return new Magic(process.env.NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY!);
}

export const magic = createMagic();

the following error occurs:

SyntaxError: Cannot use import statement outside a module

Does this answer your question? NextJS + react-hook-mousetrap : "Cannot use import statement outside a module" - Dynamic imports of hooks? — juliomalves
– juliomalves, Commented Sep 17, 2021 at 20:38
it does, but posted this in case people are stuck on magic specifically — Danie A
– Danie A, Commented Sep 19, 2021 at 5:27

Danie A · Accepted Answer · 2021-09-17 18:31:05Z

2

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

answered Sep 17, 2021 at 18:31

Danie A

8218 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related