已存在.babelrc，Next.js仍加载@next/swc-linux-arm64-gnu的原因？

问题描述 #

项目运行在Docker容器中，配置、代码与同事完全一致，此前能正常运行，近期未做任何改动却出现SWC加载失败的错误。日志明确显示已检测到.babelrc并禁用SWC作为Babel的替代，但仍尝试加载Linux arm64架构的SWC二进制文件，最终加载失败。

错误日志 #

2024-03-11 17:17:06 yarn run v1.22.19
2024-03-11 17:17:06 $ next dev -p 4000
2024-03-11 17:17:10    Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
2024-03-11 17:17:11   ▲ Next.js 13.5.6
2024-03-11 17:17:11   - Local:        http://localhost:4000
2024-03-11 17:17:11 
2024-03-11 17:17:11  ✓ Ready in 4.8s
2024-03-11 17:17:30    Using external babel configuration from /app/.babelrc
2024-03-11 17:17:33  ○ Compiling /middleware ...
2024-03-11 17:17:33 
2024-03-11 17:17:33 Done in 27.42s.
2024-03-11 17:17:30  ⚠ Attempted to load @next/swc-linux-arm64-gnu, but it was not installed
2024-03-11 17:17:30  ⚠ Attempted to load @next/swc-linux-arm64-musl, but it was not installed
2024-03-11 17:17:33  ⨯ Failed to load SWC binary for linux/arm64, see more info here: https://nextjs.org/docs/messages/failed-loading-swc

.babelrc配置 #

{
  "sourceType": "unambiguous",
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": 100
        }
      }
    ],
    "@babel/preset-typescript",
    "@babel/preset-react",
    "next/babel"
  ],
  "plugins": []
}

环境信息 #

• OSX 13.5.2 M1
• Node v16.17.1 arm64 darwin（也曾尝试v20.0.2）
• Next.js v13.5.6
• Yarn 1.22.19

解决方案 #

1. 确保Docker镜像架构匹配 #

本地为M1 arm64架构，Docker默认拉取的镜像可能与本地架构不匹配，导致SWC二进制包无法找到。可以在构建Docker镜像时指定平台：

docker build --platform linux/amd64 -t your-image-name .

或者确保Docker镜像内安装的是对应linux/arm64架构的SWC依赖。

2. 强制禁用SWC所有相关功能 #

在next.config.js中添加配置，彻底禁用SWC，强制使用Babel编译：

module.exports = {
  swcMinify: false,
  experimental: {
    forceSwcTransforms: false,
    swcPlugins: []
  }
}

3. 清理依赖缓存 #

• 本地删除node_modules和yarn.lock，重新执行yarn install
• 在Dockerfile中添加清理步骤，避免缓存的旧依赖导致问题：

RUN rm -rf node_modules yarn.lock && yarn install --frozen-lockfile

4. 检查Babel配置优先级 #

确认项目中没有其他Babel配置文件（如babel.config.json、.babelrc.js），这些文件可能会覆盖.babelrc的设置，导致SWC未被正确禁用。

5. 手动指定SWC二进制包版本 #

在package.json中添加与Next.js版本匹配的SWC二进制包依赖：

"dependencies": {
  "@next/swc-linux-arm64-gnu": "13.5.6",
  "@next/swc-linux-arm64-musl": "13.5.6"
}

执行yarn install后重新构建Docker镜像。

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