Turborepo中给ui包加依赖后Next.js报Unexpected token 'export'错误

你遇到的Unexpected token 'export'错误，核心原因是@fortawesome/react-native-fontawesome及其关联依赖的代码未被转译为浏览器兼容的格式，且仅转译UI包不足以覆盖这些第三方依赖。以下是可行的解决步骤：

1. 修改Next.js配置，直接指定需转译的第三方包 #

在Next.js项目的next.config.js中，把UI包和所有Font Awesome相关依赖都加入transpilePackages数组——Next.js的这个配置不仅支持本地包，也支持npm上的第三方包：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: [
    'ui',
    '@fortawesome/react-native-fontawesome',
    '@fortawesome/fontawesome-svg-core',
    '@fortawesome/free-solid-svg-icons'
  ],
  // 保留原有其他配置
};

module.exports = nextConfig;

2. 调整UI包的package.json配置 #

移除UI包package.json中的"type": "module"配置——该设置会让Node.js把包当作ES模块处理，反而会和Next.js的转译逻辑冲突，导致转译不生效。

3. 清理缓存并重启服务 #

执行以下命令清除缓存，确保新配置生效：

# 删除Next.js缓存目录
rm -rf .next
# 可选：若问题仍存在，清除依赖重新安装
rm -rf node_modules yarn.lock
yarn install
yarn dev

4. 适配Next.js App Router（若使用） #

如果你的Next.js项目用的是App Router，需要在UI包中使用Font Awesome的组件文件顶部添加'use client'指令，标记该组件为客户端组件：

'use client';

import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
// 其他组件代码

为什么之前的方法无效？ #

• 仅转译ui包时，UI包依赖的@fortawesome/*库仍在node_modules中，Next.js默认不会转译第三方npm包，导致未编译的ES模块语法直接被浏览器解析，抛出错误。
• next-transpile-modules在Next.js 13+版本已被官方的transpilePackages替代，继续使用可能出现兼容性问题。
• 设置"type": "module"会改变Node.js对模块的解析方式，干扰Next.js的转译流程。

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