Next.js 13.1.1+Turborepo引入UI包报错：需适配loader

问题核心 #

添加@next/bundle-analyzer、@sentry/nextjs、@next-pwa插件后，transpilePackages: ['ui']的配置被干扰，导致UI包的TSX文件未被正确转译，出现Unexpected token错误。

具体修复步骤 #

1. 修正插件包裹顺序

插件的嵌套顺序会影响配置合并逻辑，withSentryConfig需要放在最外层（它需要处理最终的完整配置），正确的嵌套顺序如下：

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

const withPWA = require('@next-pwa')({
  dest: 'public',
  // 根据需求添加其他PWA配置，比如 disable: process.env.NODE_ENV === 'development'
});

const { withSentryConfig } = require('@sentry/nextjs');

/** @type {import('next').NextConfig} */
const baseNextConfig = {
  transpilePackages: ['ui'],
  // 你的其他Next.js配置
};

// 顺序：base配置 → bundle-analyzer → next-pwa → sentry
module.exports = withSentryConfig(withPWA(withBundleAnalyzer(baseNextConfig)));

2. 确保transpilePackages未被插件覆盖

部分插件可能会浅拷贝配置导致transpilePackages丢失，可以临时添加日志验证最终配置是否保留该字段：

const finalConfig = withSentryConfig(withPWA(withBundleAnalyzer(baseNextConfig)));
console.log(finalConfig.transpilePackages); // 正常应输出 ['ui']
module.exports = finalConfig;

3. 修复@next-pwa的webpack配置干扰

@next-pwa可能会修改webpack规则，导致TSX文件的loader未覆盖到UI包。可以手动扩展webpack配置，强制让UI包的TSX文件被babel-loader处理：

const path = require('path');

const withPWA = require('@next-pwa')({
  dest: 'public',
  webpack: (config) => {
    // 添加针对UI包的TSX转译规则
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      include: [path.resolve(__dirname, '../../packages/ui')],
      use: 'babel-loader',
      exclude: /node_modules/,
    });
    return config;
  },
});

4. 统一Babel配置范围

确保项目根目录的babel.config.js包含UI包的路径，避免转译遗漏：

module.exports = {
  presets: ['next/babel'],
  include: ['**/*', '../../packages/ui/**/*'],
};

5. 彻底清理缓存

Turborepo和Next.js的缓存可能残留旧配置，执行以下命令清理：

# 删除Next.js构建缓存
rm -rf .next

# 删除Turborepo缓存
rm -rf .turbo

# 重置依赖（可选，若依赖有冲突）
rm -rf node_modules ../../packages/ui/node_modules
npm install

额外检查点 #

• 确保UI包的package.json中没有设置main/module字段指向编译后的产物（transpilePackages需要直接处理源码）
• 确认UI包内的TSX文件语法符合Next.js 13.1.1的支持范围（避免使用未转译的新语法）

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