Next.js项目因依赖版本不兼容构建失败，求适配包版本

核心问题原因 #

material-ui-search-bar基于旧版Material UI（@material-ui/core v4及以下）开发，你的项目存在版本不兼容问题：要么是@material-ui/core/@material-ui/icons的版本与material-ui-search-bar依赖的版本不匹配，要么是这些依赖未被正确安装为生产依赖，导致webpack在构建阶段无法解析模块。

适配的包版本配置 #

将以下版本更新到你的package.json中，确保所有Material UI相关包版本统一：

{
  "dependencies": {
    "next": "^12.3.4", // 适配v4版Material UI的稳定Next.js版本
    "@material-ui/core": "^4.12.4",
    "@material-ui/icons": "^4.11.3",
    "material-ui-search-bar": "^1.0.1"
    // 其他原有依赖保持不变
  }
}

操作步骤 #

• 卸载现有冲突依赖：

  npm uninstall @material-ui/core @material-ui/icons material-ui-search-bar
  

• 安装指定兼容版本：

  npm install @material-ui/core@4.12.4 @material-ui/icons@4.11.3 material-ui-search-bar@1.0.1
  

• 清理缓存并重新构建：

  rm -rf node_modules .next package-lock.json
  npm install
  npm run build
  

额外说明 #

若你计划升级到Material UI v5（@mui/material），material-ui-search-bar不再兼容，需替换为@mui/material自带的搜索组件，或使用社区维护的适配v5的第三方搜索包。

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