Next.js 12升级后Monorepo构建报错：Module parse failed

核心问题 #

单仓项目（含api、web模块）升级Next.js后，内置Webpack loader规则被干扰，导致TSX/TS文件无法被正确解析。

修复步骤 #

1. 修正next.config.js的Webpack配置 #

Next.js 12自带TS/TSX的默认处理逻辑，自定义配置时不要覆盖默认的module.rules，仅按需添加规则：

// web/next.config.js
module.exports = {
  webpack: (config) => {
    // 仅添加自定义loader，不要替换config.module.rules数组
    // config.module.rules.push(/* 你的自定义规则 */);
    return config;
  },
};

2. 移除冗余的独立Webpack配置文件 #

如果项目根目录或web目录外存在webpack.config.js，会干扰Next.js的内置配置，直接删除该文件即可。

3. 校验tsconfig.json关键配置 #

确保TS配置符合Next.js 12要求，重点排除api模块避免无关文件被处理：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules", "../api"]
}

4. 清理或修正Babel配置 #

Next.js 12依赖内置Babel预设，自定义.babelrc或babel.config.json易引发冲突：

• 先重命名.babelrc为.babelrc.bak，测试next build是否正常
• 若需保留Babel配置，仅保留Next.js预设：

{
  "presets": ["next/babel"]
}

5. 重置依赖环境 #

删除旧依赖文件后重新安装，避免版本冲突：

# 进入web目录执行
rm -rf node_modules package-lock.json
npm install

6. 检查文件与导入规范 #

确认所有TSX/TS文件扩展名正确，导入路径无拼写错误，避免Next.js无法识别文件类型。

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