Next.js构建产物中react-dom重复打包的原因与解决求助

可能原因 #

• Next.js本身内置了react和react-dom，但项目手动在dependencies中再次声明了同版本/不同版本的react-dom，导致Webpack解析时将其识别为不同模块重复打包。
• 第三方依赖（比如你项目里的framer-motion）可能间接引入了不同版本的react-dom，或者依赖解析逻辑拉取了额外实例。
• Webpack模块解析路径问题：不同node_modules子目录下的react-dom被视为独立模块，未被合并。

解决步骤 #

1. 移除手动声明的react/react-dom（推荐） #

Next.js 12+版本已经内置了兼容的react和react-dom，无需手动在项目依赖里添加。直接删除package.json中dependencies里的react和react-dom，然后重新安装依赖：

npm uninstall react react-dom
npm install

或者用yarn：

yarn remove react react-dom
yarn install

重新构建后再用analyzer检查，重复打包的情况应该会消失。

2. 强制统一所有依赖的react-dom版本 #

如果必须保留手动安装的react/react-dom，或者第三方依赖引入了其他版本，可通过package.json强制所有依赖使用同一版本：

• npm用户：在package.json中添加overrides字段：

  {
    // ...其他配置
    "overrides": {
      "react-dom": "^18.2.0"
    }
  }
  

• yarn用户：添加resolutions字段：

  {
    // ...其他配置
    "resolutions": {
      "react-dom": "^18.2.0"
    }
  }
  

添加后重新安装依赖，再构建分析。

3. 清理缓存并重新构建 #

有时候缓存会导致旧依赖残留，执行以下操作：

# 删除Next.js缓存目录
rm -rf .next
# 重新构建并分析
npm run analyze

4. 检查依赖树定位来源 #

先运行命令查看所有依赖的react-dom版本和引入路径，确认重复来源：

npm ls react-dom
# 或者yarn
yarn list react-dom

根据输出找到引入额外react-dom的依赖，针对性处理（比如升级该依赖版本）。

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