SPFx PnP Controls depends on MGT

[siata13]

Category

[x] Enhancement

[x] Bug

[ ] Question

Version

PnP controls in version 3.1

Observed Behavior

PnP Controls package has a dependency on @microsoft/mgt (Graph Toolkit) which causes problems in case 2 web parts using controls are loaded on the page:

Expected / Desired Behavior / Question

The solution could be to switch to mgt-spfx (https://www.npmjs.com/package/@microsoft/mgt-spfx), but it brings additional problems to always install the latest version of the solution of relaying on PnP controls along with mgt-spfx.sppkg to provide all the functionalities.

Could the controls relaying on mgt be moved to separate project??

Thanks!

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

[aaclage]

@joelfmrodrigues @AJIXuMuK

I think this issue was fixed with "@microsoft/mgt": "^2.2.0".
with incorporation of npm install @microsoft/mgt-spfx
mgt-spfx

[AJIXuMuK]

I'll check that later. We've already have v2.2 in beta.

[joelfmrodrigues]

@siata13 just to double-check if this is not a scenario similar to what I experienced this week at work, are you using the PnP controls package directly in your web part solution, or via a SPFx library component solution?

[AJIXuMuK]

I was able to repro it on beta version as well. But only if you use mat-dependent control (MyTeams).
If you use any other control from the library - everything works fine.

I will check what's the best approach here. Maybe the best thing is to remove mgt dependency at all.

[siata13]

@joelfmrodrigues I use it in web part solutions.
@AJIXuMuK I am not using MyTeams control. If needed I can try to get deep understanding why it happens on my end.

But I believe that moving control relying on MGT to separate library would make it much easier.

Thanks a lot for checking!

[AJIXuMuK]

@siata13 please check why it's happening.
My only assumption is non direct import from library.
Like import { WebPartTitle } from @pnp/spfx-react-controls instead of import { WebPartTitle } from @pnp/spfx-react-controls/lib/WebPartTitle

[siata13]

@AJIXuMuK I have found the problematic part of the code which wasn't related to pnp controls as I initially thought.
The import strategy you suggested would be sufficient to avoid the problem, but nevertheless I think mgt-spfx is the only way to go.

Thanks for your time and support!

[joelfmrodrigues]

Just pushed some changes originally done by @joaojmendes on a PR that should fix this issue by using mgt-spfx.
I have also updated the documentation of MyTeams (the control that uses mgt) to include the instruction for installing the mgt-spfx library. Tested on my tenant and the error was resolved after the changes were applied.

Please note this is relevant for the MyTeams control. For anything else, use direct imports as suggested by @AJIXuMuK
import { WebPartTitle } from @pnp/spfx-react-controls/lib/WebPartTitle