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

Question

尝试使用 TypeScript 在 NextJS 中实现 Magic。

下面这个 example/tutorial，它使用 JS 而不是 TS：https://github.com/magiclabs/example-nextjs

问题：像这样导入 Magic 时

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();

出现以下错误：

SyntaxError: Cannot use import statement outside a module

Answer 1

这是因为 Magic 使用了 ESM 风格的模块。

使用以下方法解决：

yarn add next-transpile-modules

并将我的 next.config.js 修改为：

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

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

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

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

reactjs

typescript

next.js

babeljs