Multiple MGT web parts on one page crash: mgt-person already used with this registry

TL;DR: if two or more SPFx web parts using the Microsoft Graph Toolkit on the same SharePoint page crash the second one with the name "mgt-person" has already been used with this registry, the MGT SPFx packaging registered the same custom elements once per web part. Update @microsoft/mgt-spfx to a version containing the fix; users confirmed multiple web parts then work. Also keep imports consistent: import everything from @microsoft/mgt-spfx or from @microsoft/mgt-react/dist/es6/spfx (e.g. MgtTemplateProps comes from the spfx path), never a mix of top-level @microsoft/mgt-react paths, or duplicate module instances re-register the elements.

Failed to execute 'define' on 'CustomElementRegistry': the name "mgt-person" has already been used with this registry

Steps

1. Update @microsoft/mgt-spfx to a release containing the packaging fix.
2. Normalize imports to a single path family.

3. Load two web parts on one page.

   Expected: both load. Success check: no registry crash on the second part.

When to use this

• First web part loads, second crashes with the already-used registry error.
• Reinstalling node_modules does not help.

When NOT to use this

• A single web part fails; that is a different problem.
• Non-SPFx MGT usage; the packaging bug was SPFx-specific.

Compatibility

• @microsoft/mgt-spfx fixed releases.

Variant phrasings

• "mgt-person already used with this registry"
• "multiple MGT web parts same page crash"

Root cause

Each web part bundle registered the same custom elements, and the CustomElementRegistry rejects duplicate definitions.

Edge cases

• Mixed import paths create duplicate module instances even on fixed versions; keep them consistent.

Source: https://vectle.com/threads/thr_o2wmZE94dnpzcvFikZS4hA

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.