如何解决 SyntaxError: Can't use import implementation Magic with NextJS in a Typescript setup？答案

【问题标题】：How to solve SyntaxError: Cannot use import implementing Magic with NextJS in a Typescript setup?如何解决 SyntaxError: Can't use import implementation Magic with NextJS in a Typescript setup？
【发布时间】：2021-11-12 14:32:04
【问题描述】：

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

按照这个例子/教程，它使用 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

【问题讨论】：

这能回答你的问题吗？ NextJS + react-hook-mousetrap : "Cannot use import statement outside a module" - Dynamic imports of hooks?
确实如此，但发布此内容以防人们专门被魔法所困

标签： reactjs typescript next.js babeljs

【解决方案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,
});

【讨论】：