NextJS执行npm run build报Unexpected token 'export'错误

这个报错的核心原因是模块解析规则不匹配：

• Next.js执行生产构建时，服务端侧默认不会转译node_modules目录下的第三方包代码，会直接用Node.js的CommonJS规则解析.js后缀的文件
• mui-rte包的入口文件使用了ES Module规范的export语法，CommonJS环境无法识别该关键字，就会抛出Unexpected token 'export'的语法错误
  之前能正常构建一般是两种情况：要么依赖版本漂移后mui-rte的入口文件配置变更，丢失了CommonJS兼容入口；要么升级Next.js后，框架默认的模块解析、依赖转译规则收紧，不再自动转译该包。

按优先级从高到低可以选以下方案：

• 配置Next.js转译目标依赖
  如果你用的是Next.js 13.1及以上版本，直接在项目根目录的next.config.js中添加转译配置，让构建阶段主动处理mui-rte的ES Module语法：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    // 原有配置保留
    transpilePackages: ["mui-rte"],
  };
  
  module.exports = nextConfig;
  

  如果是13.1以下的旧版本Next.js，可以安装next-transpile-modules依赖实现相同的转译效果。配置完成后重启构建流程即可。
• 动态导入组件并关闭服务端渲染
  富文本编辑器本身强依赖浏览器端DOM API，本身就不适合在服务端渲染，可以直接用Next.js自带的动态导入能力加载组件，跳过服务端侧的代码解析：

  import dynamic from "next/dynamic";
  
  // 导入时关闭ssr
  const MUIRichTextEditor = dynamic(
    () => import("mui-rte").then((mod) => mod.default),
    { ssr: false }
  );
  
  // 组件使用逻辑和原有写法完全一致，不需要调整props配置
  export default function EditorArea() {
    const save = (data) => {
      // 原有保存逻辑
    };
    const handleEditorChange = (data) => {
      // 原有变更逻辑
    };
    return (
      <MUIRichTextEditor
        label="Type something here..."
        onSave={save}
        onChange={handleEditorChange}
        defaultValue={defaultDescValue}
        inlineToolbar={false}
        controls={[
          "title",
          "bold",
          "italic",
          "underline",
          "numberList",
          "bulletList",
          "quote",
        ]}
      />
    )
  }
  

• 锁定依赖版本重装
  如果没有修改过Next.js配置、组件代码，大概率是安装依赖时拉取到了存在入口配置问题的mui-rte版本，可以直接删除node_modules目录和对应的依赖锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新执行npm install安装依赖后再尝试构建；也可以在package.json中把mui-rte的版本固定到之前能正常构建的版本号，避免自动升级拉到有问题的版本。

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