React TS + Vite集成Msal Provider时出现getLogger读取错误

解决方案 #

问题根源

你的项目中同时安装了MSAL.js v1（msal@1.4.17）和MSAL.js v2（@azure/msal-browser@2.35.0、@azure/msal-react@1.5.3）。这两个版本的库API完全不兼容：MsalProvider（v2组件）期望接收v2的PublicClientApplication实例，但项目中存在的v1包导致模块解析混乱，最终出现实例属性未定义的错误。

修复步骤

1. 卸载旧版MSAL
   执行命令移除v1版本的msal包：

   npm uninstall msal
   # 或 yarn 用户使用：
   yarn remove msal
   

2. 清理并重装依赖
   删除node_modules和锁文件，确保依赖环境干净：

   rm -rf node_modules package-lock.json
   npm install
   

3. 验证依赖
   检查package.json，确保只保留MSAL.js v2相关依赖：

   "dependencies": {
       "@azure/msal-browser": "^2.35.0",
       "@azure/msal-react": "^1.5.3",
       // 其他依赖保留
   }
   

4. 确认代码正确性
   你的Main.ts中初始化PublicClientApplication的代码是正确的，确保没有任何地方引用了旧版msal包的模块。

补充说明

MSAL.js v1和v2是完全独立的版本，v2使用@azure/前缀的包，v1使用msal包。混用会导致实例类型不匹配，引发类似的属性访问错误。移除旧版依赖后，问题即可解决。

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