Intermittent errors on people search results with mgt-mock-provider registration

[ferrarirosso]

Version used
4.5.4.3

Describe the bug
We have a search results page with the following setup :

1. 4 search verticals, one of them showing only people search results ("Use Microsoft Graph Toolkit" is off)
2. In the default search vertical we show different results source, one of them is also a people search results webpart ("Use Microsoft Graph Toolkit" is on)

We receive the following intermittent errors when displaying search results :
FEHLER:
Failed to execute 'define' on 'CustomElementRegistry': the name "mgt-mock-provider" has already been used with this registry

AUFRUFLISTE:
Error: Failed to execute 'define' on 'CustomElementRegistry': the name "mgt-mock-provider" has already been used with this registry
at https://publiccdn.sharepointonline.com/mytenant.sharepoint.com/sites/apps/ClientSideAssets/59903278-dd5d-4e9e-bef6-562aae716b8b/chunk.vendors~microsoft-graph-toolkit_a0d5d9237e6d504060d1.js:189:15976
at https://publiccdn.sharepointonline.com/mytenant.sharepoint.com/sites/apps/ClientSideAssets/59903278-dd5d-4e9e-bef6-562aae716b8b/chunk.vendors~microsoft-graph-toolkit_a0d5d9237e6d504060d1.js:189:15991
at a (https://publiccdn.sharepointonline.com/mytenant.sharepoint.com/sites/apps/ClientSideAssets/59903278-dd5d-4e9e-bef6-562aae716b8b/chunk.vendors~microsoft-graph-toolkit_a0d5d9237e6d504060d1.js:418:4419)
at Object.JHPj (https://publiccdn.sharepointonline.com/mytenant.sharepoint.com/sites/apps/ClientSideAssets/59903278-dd5d-4e9e-bef6-562aae716b8b/chunk.vendors~microsoft-graph-toolkit_a0d5d9237e6d504060d1.js:418:4807)
at i (https://publiccdn.sharepointonline.com/mytenant.sharepoint.com/sites/apps/ClientSideAssets/59903278-dd5d-4e9e-bef6-562aae716b8b/modern-search-results-web-part_e74c141135066849eb54.js:1:799)
at Module.KTOQ (https://publiccdn.sharepointonline.com/mytenant.sharepoint.com/sites/apps/ClientSideAssets/59903278-dd5d-4e9e-bef6-562aae716b8b/chunk.vendors~microsoft-graph-toolkit_a0d5d9237e6d504060d1.js:422:2484)
at i (https://publiccdn.sharepointonline.com/mytenant.sharepoint.com/sites/apps/ClientSideAssets/59903278-dd5d-4e9e-bef6-562aae716b8b/modern-search-results-web-part_e74c141135066849eb54.js:1:799)
at Module.nVLA (https://publiccdn.sharepointonline.com/mytenant.sharepoint.com/sites/apps/ClientSideAssets/59903278-dd5d-4e9e-bef6-562aae716b8b/chunk.vendors~microsoft-graph-toolkit_a0d5d9237e6d504060d1.js:2239:7518)
at i (https://publiccdn.sharepointonline.com/mytenant.sharepoint.com/sites/apps/ClientSideAssets/59903278-dd5d-4e9e-bef6-562aae716b8b/modern-search-results-web-part_e74c141135066849eb54.js:1:799)

The error is emitted from the people result webpart in the default vertical

Additional Content

• We have tried to interpolate the "Use Microsoft Graph Toolkit" between the 2 webparts showing people results but with no success

Questions

1. Is this a supported scenario where we can have more than one people search results webpart implemented ?
2. How should we configure multiple people search results regarding MGT ?
3. How to circument this intermittent error if possible ?

[ferrarirosso]

Follow-up
I have tried to implement multiple people webparts with mgt enabled multiple times on the same page in our dev environment but could not reproduce the issue we have intermittently in our production environment.

I found this thread
microsoftgraph/microsoft-graph-toolkit#229
about the issue with the Sharepoint provider and the solution is to reference, quoted
"In a nutshel, make sure all your mgt imports are either from

@microsoft/mgt-spfx
@microsoft/mgt-react/dist/es6/spfx
and you should be good to go"

pnp modern search uses '@microsoft/mgt/dist/es6'
Could this be a hint to this problem ?

[wobba]

The component fails when we use @microsoft/mgt-spfx. See #1127

[ferrarirosso]

We could track the problem down and it is now easily reproductible:

1. Create a SPFx webpart (we've used 1.15.2) and use mgt-react and display for example a person card.
2. Do a search query in top search bar, which is linked to a search result page containing the PnP modern search solution and having a search result webpart with the MGT Toolkit Flag activated
   => The people component will show the above error.

We have tried to adapt our dummy test webpart with the official mgt-package but the error persists.
Any clue how to use a SPFx Webpart with MGT and the PnP Modern Search solution with people results using the MGT Graph Toolkit ?

[wobba]

Can you retry using v4.8 as I rewrote the mgt impl a little bit?

[ferrarirosso]

Tried with v4.8
I have attached my test project, unfortunately same behaviour => error
testmgtwp.zip

[wobba]

Then I'm not sure what the solution is as it seems mgt related - which is a component we re-use. And mgt works fine using one web part at least. Seems like a race condition of sorts with multiple parts.

[ferrarirosso]

Thanks !
The only possible solution I see now, is to rewrite our webpart and use pnp live persona control

[FranckyC]

@ferrarirosso, the issue is because you try to load MGT components multiple times on the page (from mgt-react and from PnP WebParts). Can you try to enable MGT on only one PnP WebPart and let other WebParts assume MGT is loaded on the page?

[ferrarirosso]

@FranckyC
We have the following setup :

1. SPO-Page with the spfx webpart above added one time on this page. This is PageA
2. Search Result Page with pnp modern search which shows people results and mgt graph toolkit activated so we have the people card flyout. This is PageB
   When on PageA, we do a search in the search box, which is configured to go to another site where PageB is located and we get this error.
   So my understanding is, we have only mgt once loaded per page and we also change the page (and the site).
   Maybe I'm doing something wrong, but what ?

[FranckyC]

@ferrarirosso do you get a full page refresh when switching to page B?

[ferrarirosso]

@FranckyC I think when you go from sitea/pagea to siteb/pageb through the standard top search box, you get a page refresh.

[FranckyC]

Can you open the network tab from your browser and see if MGT is loaded multiple times when switching pages?

[wobba]

@FranckyC maybe dispose issue of mgt on page nav....

[ferrarirosso]

I see the microsoft graph toolkit only once (screenshot 3 & 4 but it's the same line :-))

Please find attached the screenshots from the network tab.

I cleared the network tab before pressing enter from the sitea/pagea and landing to siteb/pageb

Just wondering, can you reproduce this issue or are we "alone" & consistent over all our tenants ?

[wobba]

@ferrarirosso is there more to the error message "already been used"? As seen in https://stackoverflow.com/questions/70335990/%C3%97-notsupportederror-failed-to-execute-define-on-customelementregistry-the it should say what package it has been registered with.

[ferrarirosso]

Here the detailed error 👍

Did you mean "more" details or "more" errors ?

[wobba]

Seems some race condition when you have multiple web parts. I'll see if I can figure out a workaround somehow.

[wobba]

@ferrarirosso Can you download https://1drv.ms/u/s!AsQPRl4COMyeosR1swAobiv6_qIuHg?e=t67lhS and see if you can repro the issue with this version? I'm not able to repro myself so trying some things.

[ferrarirosso]

Thanks for your kind support !
Same behaviour

So to recapitulate our setup :

1. We have one spfx webpart which uses mgt-react
2. When we are on a page sitea/pagexy where this spfx webpart is loaded and the user uses the top search bar to search for some content, the user is redirected to sitesearch/searchresultpage where we have configured various pnp search results webparts, one of them being a people search result webpart with the flag MGT Graph Toolkit activated.
3. We could reproduce this behaviour on different tenants (dev / preprod & prodcution)
4. We also created the above spfx solutoin (testmgtwp) and can reproduce the behaviour on a dev tenant with this simple spfx webpart.

Further remarks :

1. When coming from a site/page where no mgt was loaded on the page, and searching through the top search bar, the search results for people loads without errors (and the other too)
2. When searching directly on the search result page (we also have a search box there), the search results for people loads without errors (and the other too)

[wobba]

Got it.. the issue is that mgt is loaded on page, and as SP uses smart navigation, then pnp search web parts tries to reload. I'll take another shot at this.

[wobba]

@ferrarirosso can you use the same link and re-test. Added an extra check I think hope solved it.

[ferrarirosso]

Downloaded this package, unfortunately I get cdn errors with this package

• Tried to deploy globally or per site, does not change anything
• Deployed latest v4.8.0 from github, it works
  

[wobba]

CDN errors are intermittent. Wait, clear browser cache, retry.

[ferrarirosso]

Great, started a private browser session.
And now it works like a charm !
No more errors switching from sitea/pagea with mgt and going to siteb/searchresultpage with mgt toolkit enabled
If you can link your fix here, I will implement it asap in our codebase so we can push it asap in our production environment.
Many many thanks for staying tuned on this issue !

[wobba]

I'll publish my PR tomorrow 🙂

[wobba]

Comitted in the dev branch.