CODEWITHSUNDEEP
reactjstypescriptnext.jsbabeljs
Danie A
Danie A

Reputation: 821

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

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

Upvotes: 1

Views: 317

Answers (1)

Danie A
Danie A

Reputation: 821

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

Upvotes: 2

Related Questions