mgt-react 3.1.3 with mgt-spfx 3.1.3 do not work without mgt-spfx-vv3.sppkg [BUG]

[Ofer-Gal]

Describe the bug Most my SPFx web parts Use MGT and I was happy to learn that "MGT v3 doesn't require the MGT-spfx package!" But without it I got error on the deployed webpart :

Something went wrong
If the problem persists, contact the site administrator and give them the information in Technical Details.
TECHNICAL DETAILS
ERROR:
Cannot read properties of undefined (reading 'id')

CALL STACK:
TypeError: Cannot read properties of undefined (reading 'id')
    at https://res-1.cdn.office.net/files/sp-client/sp-pages-assembly_en-us_cc09beedac12482b5e7fa1f1e86d8093.js:79:249283
    at new Promise (<anonymous>)
    at e.loadComponent (https://res-1.cdn.office.net/files/sp-client/sp-pages-assembly_en-us_cc09beedac12482b5e7fa1f1e86d8093.js:79:249251)
    at https://res-1.cdn.office.net/files/sp-client/sp-pages-assembly_en-us_cc09beedac12482b5e7fa1f1e86d8093.js:79:251288
    at async Promise.all (index 0)

To Reproduce Steps to reproduce the behavior:

1. Remove all mgt ... .sppkg
2. Create a web part using <Person ... /> with mgt-react 3.1.3 with mgt-spfx 3.1.3
3. Deploy to the tenant
4. Embed the webpart
5. See error

Expected behavior The web part should work.

Environment (please complete the following information):

• OS: Windows
• Browser edge
• Framework react
• Context [SharePoint]
• Version [1.18.1]
• Provider [SharePoint] if (!Providers.globalProvider) { Providers.globalProvider = new SharePointProvider(this.context); }

Additional context If adding mgt-spfx-vv3.sppkg to the tenant, The 3.1.3 webpart works fine. But all older web parts buit with 2.11.1 or les show error

ERROR:
Script error for: 78b11c7d-7ca8-47cb-a93c-d3beabb519a1_2.11.1
http://requirejs.org/docs/errors.html#scripterror

CALL STACK:
Error: Script error for: 78b11c7d-7ca8-47cb-a93c-d3beabb519a1_2.11.1
http://requirejs.org/docs/errors.html#scripterror
    at B (eval at e (https://res-1.cdn.office.net/files/sp-client/sp-pages-assembly_en-us_cc09beedac12482b5e7fa1f1e86d8093.js:79:248587), <anonymous>:8:252)
    at HTMLScriptElement.onScriptError (eval at e (https://res-1.cdn.office.net/files/sp-client/sp-pages-assembly_en-us_cc09beedac12482b5e7fa1f1e86d8093.js:79:248587), <anonymous>:30:244)

I do not have the budget to change all older web part to 3.1.3

[ahamedfazil]

I have encountered the same problem as you. +1

[sebastienlevert]

So! I was able to make it work and it works as expected. That being said, our documentation is a little weak and we'll do some edits over there.

You can see the repro here: https://github.com/sebastienlevert/mgt-spfx-side-by-side

The key:

• Use the mgt-spfx for v2
• Use the disambiguation feature for v3 (and provide a disambiguated solution name)

[Ofer-Gal]

And only mgt-spfx-v2.sppkg deployed to the tenant I assume. I will try that. Thank you. Whish I knew to use only lowercase incustomElementHelper.withDisambiguation('donereports');

[sebastienlevert]

Yes, only mgt-spfx-v2.sppkg is deployed! Is it breaking with disambiguation when passing non-lowercase strings? @gavinbarron, something we could maybe enforce in the function to lowercase the generated tags?

[Ofer-Gal]

Yes. My code was: customElementHelper.withDisambiguation('DoneReports'); and I got: DOMException: Failed to execute 'define' on 'CustomElementRegistry': "mgt-DoneReports-flyout" is not a valid custom element name when loading. Changed to customElementHelper.withDisambiguation('done-reports'); and it is good now.

In the docs they suggest using the solution name which is all lowercase.

Thanks again

[gavinbarron]

Oh, I never even thought about the lower case requirement when calling customElemtents.define. we can absolutely add code that automatically changes the supplied string to lower case.

[gavinbarron]

Added #2897 to track automatic lowercase conversion