Unable to debug webpart with mgt-spfx

[michaelmaillot]

Hello,

I have issues when running webparts which involve Microsoft Graph Toolkit for SPFx.

When requesting a context, using the following code:

import { Providers, SharePointProvider } from "@microsoft/mgt-spfx";
// ...
export default class HellowpWebPart extends BaseClientSideWebPart<IHellowpWebPartProps> {
// ...

protected onInit(): Promise<void> {
    if (!Providers.globalProvider) {
      Providers.globalProvider = new SharePointProvider(this.context);
    }
    return this._getEnvironmentMessage().then(message => {
      this._environmentMessage = message;
    });
  }
}

I have this error displayed:

We currently have the same issue when running server for PnP SPFx React Controls, especially a control called MyTeams which refers to mgt-spfx:

import { Providers, SharePointProvider } from "@microsoft/mgt-spfx";
// ...
export const MyTeams: React.FunctionComponent<IMyTeamsProps> = (
  props: React.PropsWithChildren<IMyTeamsProps>
) => {
// ...

Providers.globalProvider = React.useMemo(() => {
    if (!Providers.globalProvider) {
      return new SharePointProvider(webPartContext);
    }
    return;
  }, [props.webPartContext]);

// ...
};

The error is the following:

In both cases, we don't have any issue when running native gulp serve. Both are SPFx solutions version 1.20.0 and spfx-fast-serve-helpers version 1.20.2.

Is this something anyone can repro?

[s-KaiNet]

Hi,
have you added needed config as in the sample here?

[michaelmaillot]

Hi @s-KaiNet,

Thanks for this config file, I didn't know you provided a full sample, good to know. However, when trying to use it with both use cases mentioned above, I still have the same issue. But it works if I upgrade MGT to 4.2.1 in my SPFx project sample (meaning getting rid of mgt-spfx).

To better understand, I tried to run the advanced sample locally but I'm facing the following issue (version of Node 18.20.6):

[16:11:57] Starting gulp
[16:11:57] Starting subtask 'pre-copy'...
[16:11:58] Finished subtask 'pre-copy' after 104 ms
[16:11:58] Starting subtask 'copy-static-assets'...
[16:11:58] Starting subtask 'sass'...
[16:11:59] Finished subtask 'sass' after 1.01 s
[16:11:59] Starting subtask 'lint'...
[16:11:59] [lint] eslint version: 8.7.0
[16:11:59] Starting subtask 'tsc'...
[16:11:59] [tsc] typescript version: 4.7.4
[16:11:59] Finished subtask 'copy-static-assets' after 1.11 s
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(134,27): error TS1139: Type parameter declaration expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(134,35): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(134,56): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(134,66): error TS1109: Expression expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(134,92): error TS1109: Expression expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(135,27): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(136,18): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(137,21): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(138,23): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(139,20): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(140,18): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(141,20): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(142,20): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(143,30): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(144,25): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(145,22): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(146,20): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(153,37): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(161,5): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(161,34): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(162,33): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(163,27): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(165,5): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(166,5): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(167,5): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(168,5): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(168,21): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(178,25): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(208,5): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(214,5): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(221,5): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(222,5): error TS1005: ',' expected.
[16:12:04] Error - [tsc] node_modules/@lit/task/task.d.ts(223,5): error TS1005: ',' expected.
[16:12:04] Error - 'tsc' sub task errored after 5.79 s
 exited with code 2
[16:12:04] 'build' errored after 6.96 s

[s-KaiNet]

mgt-spfx was deprecated a year ago, thus my recommendation is to upgrade. When it comes to the sample strange that it fails even to gulp bundle, worked fine half a year ago. Curious what have changed, but I have to look and may be upgrade to the latest versions of packages and SPFx.

[michaelmaillot]

I know about package's depreaction, just wanted to know if I was the only one here to have this issue and optionally get a lead regarding webpack missing config.

We'll see for upgrading the PnP Controls dependencies regarding mgt-spfx, to align with supported MGT solutions.

Thanks for your quick feedback!

[s-KaiNet]

Ok the error

Error - [tsc] node_modules/@lit/task/task.d.ts(134,27): error TS1139: Type parameter declaration expected.

actually is mgt issue

[s-KaiNet]

I updated advanced sample and fixed mgt problems. The things is, that there are two issue in mgt repo which I was able to workaround, but they should be fixed by mgt team. The version I included in the sample is 4.4.0 because in this version we don't need any webpack modifications, it just works.

[michaelmaillot]

Thanks for the link and the update! Indeed, it's good as a workaround but not as a long term solution.

Let's keep an eye on MGT repo for a fix.

I'll close this, as spfx-fast-serve is configured to run with modern MGT package and not mgt-spfx deprecated one. Thanks for the investigation.

And thanks for this amazing command which saves us a lot of time for debugging solutions! 👏