Person hover card in combination with Personal mail webpart

[SPLeon]

Hi,

This is a copy of an issue on PnP Modern Search. I raised an issue there:

Version used
4.7

Describe the bug
I found an issue with PnP search in combination with some webparts of PnP starter kit.
I've added the search result webpart to a page and we display people results with hover card (builtin).
When navigating to another page where Personal Meetings/Personal Agenda webpart is added, this webpart is not working (unexpected error).
Also when navigating to the search result page after I have visited a page with other PnP webparts, the result webpart is not working.
Also search input is not working. Think this is related to the use of Graph Api.

To Reproduce
Steps to reproduce the behavior:

1. Go to page where PnP Personal Meetings/ PnP Personal Agenda webpart are added
2. Go to page where PnP Search webpart is added with Person card and Person hover card (works without hover card)
3. Search for a person
4. No results are being display / no search query is executed (url doesn't change)
5. Refresh page, webpart is working as expected

Expected behavior
Search is working as expected

Desktop (please complete the following information):

• Browser Edge Chromium

Additional context
Other way around, when you first navigate to Search page and execute query and then navigate to other page were PnP personal webparts are added, the webpart don't work. (Personal mail does work). Error in webparts:

[SPLoaderError.loadComponentError]:
Failed to load component "6d28e73b-ed80-494e-8238-c0106c26b36a" (PersonalCalendarWebPart). Original error: Failed to load component dependency "6d28e73b-ed80-494e-8238-c0106c26b36a" from component "PersonalCalendarWebPart" (Failed to load component "78b11c7d-7ca8-47cb-a93c-d3beabb519a1" (MgtSpfxLibrary). Original error: Failed to load entry point from component "78b11c7d-7ca8-47cb-a93c-d3beabb519a1" (MgtSpfxLibrary). Original error: Failed to execute 'define' on 'CustomElementRegistry': the name "mgt-mock-provider" has already been used with this registry). Original error: {3}

INNERERROR:
Failed to load component dependency "6d28e73b-ed80-494e-8238-c0106c26b36a" from component "PersonalCalendarWebPart" (Failed to load component "78b11c7d-7ca8-47cb-a93c-d3beabb519a1" (MgtSpfxLibrary). Original error: Failed to load entry point from component "78b11c7d-7ca8-47cb-a93c-d3beabb519a1" (MgtSpfxLibrary). Original error: Failed to execute 'define' on 'CustomElementRegistry': the name "mgt-mock-provider" has already been used with this registry). Original error: {3}
CALLSTACK:
Error
at t [as constructor] (https://res-1.cdn.office.net/files/sp-client/sp-pages-assembly_nl-nl_168dc8aa602dd549589131872131aef8.js:70:215909)
at new t (https://res-1.cdn.office.net/files/sp-client/sp-pages-assembly_nl-nl_168dc8aa602dd549589131872131aef8.js:70:793796)
at e.buildErrorWithVerboseLog (https://res-1.cdn.office.net/files/sp-client/sp-pages-assembly_nl-nl_168dc8aa602dd549589131872131aef8.js:70:831105)
at e.buildLoadComponentError (https://res-1.cdn.office.net/files/sp-client/sp-pages-assembly_nl-nl_168dc8aa602dd549589131872131aef8.js:70:827196)
at https://res-1.cdn.office.net/files/sp-client/chunk.systemjs-component-loader_nl-nl_ffad6cdffea73800d2a1.js:1:6036

According to people of this repo this is the issue:

Seems to be the issue is the starter kit web parts, as they are the ones failing. I see search web part use mgt v2.3.0 while starterkit uses v2.2.1. So this could also be a culprit. PnP Modern search also checks if Providers.globalProvider is already set before using it, something toolkit does not. The toolkit parts are not following guidance at https://learn.microsoft.com/en-us/graph/toolkit/get-started/mgt-spfx#usage

This is an issue when two projects use different versions of the same dependency - and the dependency is global in the DOM.

This SO seems relevant as well.

https://stackoverflow.com/questions/70335990/%C3%97-notsupportederror-failed-to-execute-define-on-customelementregistry-the

We could try to change to use
@microsoft/mgt-react instead of @microsoft/mgt as they don't play nice together it seems.

I'm inclined to close this to see if following https://learn.microsoft.com/en-us/graph/toolkit/get-started/mgt-spfx#usage for the toolkit solves the issue before we change package.

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[SPLeon]

Any update?

[eoverfield]

We are in the process of updating the starter kit webparts to SPFx v1.16.1 and "@microsoft/mgt-react": "2.9.0" as well as "@microsoft/mgt-spfx": "2.9.0".
While you wait for the updated .pnp bundle, you might want to review the webparts that have been updated in the v3 branch:
https://github.com/pnp/sp-starter-kit/tree/v3/source