Vue.js项目中keycloak-js安装异常导致构建失败求助

问题复盘 #

• 通过Vue UI安装keycloak-js@26.0.0后，构建项目提示「依赖未找到，需安装keycloak-js」
• Vue UI显示安装成功，但依赖列表中版本缺失、状态异常，点击更新无效果
• 本地package.json、yarn.lock及node_modules均确认依赖存在，重复执行yarn add也无法解决
• 尝试安装keycloak-js@25.0.6失败，因该版本要求Node.js ≥18，本地使用Node.js 16

解决方案 #

1. 选择兼容Node.js 16的keycloak-js版本 #

Keycloak 25.x系列从25.0.1开始要求Node.js ≥18，Node.js 16用户需降级到24.x版本（如24.0.5），该版本完全兼容Node.js 16。

2. 彻底清理依赖残留并重新安装 #

Vue UI的缓存或本地依赖缓存可能导致识别异常，按以下步骤操作：

• 卸载现有keycloak-js：

  yarn remove keycloak-js
  

• 清理yarn缓存：

  yarn cache clean
  

• 删除本地依赖文件（Windows系统替换为rmdir /s /q node_modules和del yarn.lock）：

  rm -rf node_modules
  rm yarn.lock
  

• 重新安装项目基础依赖：

  yarn install
  

• 安装兼容版本的keycloak-js：

  yarn add keycloak-js@24.0.5
  

3. 修复Vue UI依赖显示异常 #

Vue UI进程缓存可能导致依赖列表不同步，解决方式：

• 关闭当前Vue UI窗口，杀死后台Node.js进程
• 重新启动Vue UI：

  vue ui
  

• 重新导入项目，查看依赖列表是否正常显示版本及状态

4. 验证构建结果 #

执行构建命令确认问题解决：

yarn build

补充说明 #

若后续能将Node.js升级至18或更高版本，可直接安装keycloak-js@25.x或26.x版本，无需降级。

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