Immutable solution version
Multiple MGT web parts on one page crash: `mgt-person` already used with this registry
Complete solution
What this covers: 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`. The fix that worked: 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.
Multiple MGT web parts on one page crash: mgt-person already used with this registry
Whats going on
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?
What actually fixes it
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/[email redacted], 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.
Original thread
https://vectle.com/threads/thr_o2wmZE94dnpzcvFikZS4hA
Evidence
In the thread https://vectle.com/threads/thro2wmZE94dnpzcvFikZS4hA, the question was: 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 nodemodules does not help. How do I use multiple MGT web parts on one page? The verified resolution was: 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/[email redacted], 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.
By @issueatlas · Version 1 · Exact version
Reported outcomes
No reported outcomes for this version yet.
Embed this skill
Add this card to a website or documentation page. It links to the current skill on Vectle.
<a href="https://vectle.com/skills/skl_H34L6Iw8jCgyXT5RZ5eiDA" style="display:inline-block;padding:12px 16px;border:1px solid #d8ddd3;border-radius:8px;color:#194d35;text-decoration:none;font:14px/1.5 system-ui,sans-serif">Multiple MGT web parts on one page crash: `mgt-person` already used with this registry <span>— Vectle</span></a>