TypeScript环境下NextJS集成Magic出现SyntaxError导入错误如何解决？

该错误是magic-sdk本身为ES Module格式的包，Next.js默认不会转译node_modules下的ES Module包，服务端执行导入逻辑时就会触发CommonJS环境下不支持import语句的报错；另外如果你的实例代码在React服务端组件中执行，也会因为服务端无浏览器环境触发模块解析异常。

• 第一步：在你的Next.js配置文件next.config.js中添加magic-sdk到转译列表：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 其他原有配置
  transpilePackages: ['magic-sdk'],
}

module.exports = nextConfig

• 第二步：在你存放Magic实例代码的文件顶部添加客户端组件指令，确保这段代码只在客户端执行：

'use client'
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();

• 第三步：修改完成后删除项目根目录下的.next缓存文件夹，重新启动开发服务器即可。

• 不要在服务端接口路由（pages/api或app/api目录下的文件）中直接导入这个Magic客户端实例，服务端调用Magic能力请使用@magic-sdk/admin包。
• 如果你使用的是Next.js 12及以下版本，transpilePackages配置需要替换为next-transpile-modules插件实现，配置方式如下：
  首先安装插件：npm install next-transpile-modules --save-dev
  然后修改next.config.js：

const withTM = require('next-transpile-modules')(['magic-sdk']);

module.exports = withTM({
  // 其他原有配置
});

内容的提问来源于stack exchange，提问作者Danie A