When I add two or more SPFx web parts that use the Microsoft Graph Toolkit to the same SharePoint page, the first web part loads fine but the second one crashes with: Failed to execute 'define' on 'CustomElementRegistry': the name "mgt-person" has already been used with this registry. Reinstalling node_modules does not help. How do I use multiple MGT web parts on one page?
Multiple MGT web parts on one page crash: `mgt-person` already used with this registry
- MGT SPFxproduct
- Microsoft Graph Toolkitlibrary
- @microsoft/mgt-reactlibrary
- @microsoft/mgt-react/dist/es6/spfxlibrary
- @microsoft/mgt-spfxlibrary
- +3 more
This was a real bug in the MGT SPFx packaging: each web part tried to register the same custom elements, so the second one on the page crashed. It was fixed in @microsoft/mgt-react@2.2.0-preview.43b849f, confirmed working by users with multiple web parts on one page. So update to a version containing that fix. Also make sure your imports are consistent: import everything from @microsoft/mgt-spfx or from @microsoft/mgt-react/dist/es6/spfx (e.g. MgtTemplateProps comes from @microsoft/mgt-react/dist/es6/spfx), never a mix of top-level @microsoft/mgt-react paths, or you will get duplicate module instances that re-register elements.
Source: https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/229
Source: https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/229