SPFX 1.15.2集成Microsoft Graph Toolkit遇组件加载失败问题

问题原因 #

你同时全局部署了MGT的SPFX包，又在自己的SPFX项目中安装了@microsoft/mgt-spfx依赖，导致MGT的自定义元素（包括mgt-mock-provider）被重复注册，触发DOM异常。

解决方案 #

1. 移除本地项目中的重复MGT依赖 #

执行命令卸载@microsoft/mgt-spfx，避免本地代码再次注册自定义元素：

npm uninstall @microsoft/mgt-spfx

2. 调整React组件导入与依赖配置 #

• 修改MGT React组件的导入语句，直接从包根目录导入，而非dist子目录：

  import { Person, ViewType } from '@microsoft/mgt-react';
  

• 在项目的package.json中添加resolutions配置，强制MGT React使用不包含自定义元素注册的核心包版本：

  "resolutions": {
    "@microsoft/mgt-element": "npm:@microsoft/mgt-element@2.6.1/dist/es6/mgt-element.esm.js"
  }
  

  该配置会让MGT React跳过自定义元素的注册逻辑，依赖全局部署的MGT SPFX包提供的已注册元素。

3. 清理WebPart中的重复Provider初始化代码 #

删除webpart.ts中关于SharePointProvider和Providers的导入及onInit中的相关代码——全局部署的MGT SPFX包已自动完成SharePoint Provider的初始化，无需本地重复配置。

4. 重新打包部署 #

清理旧打包文件后重新构建发布：

gulp clean
gulp bundle --ship
gulp package-solution --ship

将新生成的解决方案包上传至应用目录，重新安装到目标网站集即可。

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