[BUG] error when having multiple SPFx web parts on the page using MGT React

[waldekmastykarz]

Describe the bug

When you have more than one SharePoint Framework web part on the page using MGT, only the first web part works. Other web parts fail with an error similar to the following:

[SPLoaderError.loadComponentError]:
Failed to load component "9eac8961-60e7-45b8-990e-175340d7c4a0" (PersonalTasksWebPart). Original error: Failed to load entry point from component "9eac8961-60e7-45b8-990e-175340d7c4a0" (PersonalTasksWebPart). Original error: Failed to execute 'define' on 'CustomElementRegistry': the name "mgt-flyout" has already been used with this registry

INNERERROR:
Failed to load entry point from component "9eac8961-60e7-45b8-990e-175340d7c4a0" (PersonalTasksWebPart). Original error: Failed to execute 'define' on 'CustomElementRegistry': the name "mgt-flyout" has already been used with this registry
CALLSTACK:
Error
    at t [as constructor] (https://spoprod-a.akamaihd.net/files/sp-client/sp-webpart-workbench-assembly_en-us_9ceb85ce0448063e9ae1d52c37235084.js:1:530327)
    at new t (https://spoprod-a.akamaihd.net/files/sp-client/sp-webpart-workbench-assembly_en-us_9ceb85ce0448063e9ae1d52c37235084.js:1:675582)
    at Function.e.buildErrorWithVerboseLog (https://spoprod-a.akamaihd.net/files/sp-client/sp-webpart-workbench-assembly_en-us_9ceb85ce0448063e9ae1d52c37235084.js:1:716478)
    at Function.e.buildLoadComponentError (https://spoprod-a.akamaihd.net/files/sp-client/sp-webpart-workbench-assembly_en-us_9ceb85ce0448063e9ae1d52c37235084.js:1:712523)
    at https://spoprod-a.akamaihd.net/files/sp-client/sp-webpart-workbench-assembly_en-us_9ceb85ce0448063e9ae1d52c37235084.js:1:704790

To Reproduce
Steps to reproduce the behavior:

1. Download https://github.com/pnp/sp-starter-kit/blob/master/source/react-personal-calendar/sharepoint/solution/react-personal-calendar.sppkg
2. Download https://github.com/pnp/sp-starter-kit/blob/master/source/react-personal-tasks/sharepoint/solution/react-personal-tasks.sppkg
3. Add both packages to the SharePoint app catalog in your tenant
4. Deploy both packages globally and approve Graph API permission requests
5. Open the hosted workbench at https://<your tenant>.sharepoint.com/_layouts/workbench.aspx
6. Add the Personal Calendar and Personal Tasks web parts to the page. Notice how the Personal Calendar web part works fine, but the Personal Tasks web part shows the aforementioned error

Expected behavior
Multiple SPFx web parts using MGT work just fine on one page

Screenshots

Environment (please complete the following information):

• OS: macOS
• Browser: Edge
• Framework: React
• Context: SharePoint
• Version: mgt-react@2.0.0-preview.3

[ghost]

Hello waldekmastykarz, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[nmetulev]

Hey @waldekmastykarz, this is a known issue at this time and we are tracking it in #229.

There is no easy solution to this while we are waiting for scoped elements to make it into the w3c spec. But I'm wondering if there is something that can be done with SPFx library types?