如何解决SyntaxError:不能使用导入实现魔术与NextJS在Typescript设置?

Question

尝试使用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

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