[BUG] Error - [tsc] node_modules/@lit/task/task.d.ts(165,5): error TS1005: ',' expected.

[mr-layco]

Describe the bug
I have followed the guide here to the letter to create an SPFX webpart using MGT.
Unfortunately whenever i try to gulp serve or build i get alot of the above errors in the terminal output.
As soon as i remove the imports

import { Providers, customElementHelper } from "@microsoft/mgt-element";  
import { SharePointProvider } from "@microsoft/mgt-sharepoint-provider";  
import { registerMgtPersonComponent } from "@microsoft/mgt-components";

and the associated code pertaining to those from my webpart.ts file the error goes away.

To Reproduce
Steps to reproduce the behavior:
Follow the guide here and then try to serve or build the project

Expected behavior
The webpart project would compile correctly and i would be able to use the toolkit as per the documentation

Environment (please complete the following information):

• OS: Windows 10
• Browser: Edge
• Framework none
• Context SharePoint
• Version SPFX 1.20
• Provider SharePoint Provider

Additional context
Here is a copy of my package.json file and webpart.ts file

I am new to SPFX development and TypeScript, so if i have missed something obvious please accept my apologies. I have had a look on the internet for any similar issues but unable to find anything that matches my issue specifically.

  "name": "mgt-test",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=18.17.1 <19.0.0"
  },
  "main": "lib/index.js",
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@microsoft/mgt-components": "^4.4.0",
    "@microsoft/mgt-element": "^4.4.0",
    "@microsoft/mgt-sharepoint-provider": "^4.4.0",
    "@microsoft/sp-component-base": "1.20.0",
    "@microsoft/sp-core-library": "1.20.0",
    "@microsoft/sp-lodash-subset": "1.20.0",
    "@microsoft/sp-office-ui-fabric-core": "1.20.0",
    "@microsoft/sp-property-pane": "1.20.0",
    "@microsoft/sp-webpart-base": "1.20.0",
    "tslib": "2.3.1"
  },
  "devDependencies": {
    "@fluentui/react": "^8.106.4",
    "@microsoft/eslint-config-spfx": "1.20.2",
    "@microsoft/eslint-plugin-spfx": "1.20.2",
    "@microsoft/rush-stack-compiler-4.7": "0.1.0",
    "@microsoft/sp-build-web": "1.20.2",
    "@microsoft/sp-module-interfaces": "1.20.2",
    "@rushstack/eslint-config": "4.0.1",
    "@types/webpack-env": "~1.15.2",
    "ajv": "^6.12.5",
    "eslint": "8.57.0",
    "gulp": "4.0.2",
    "typescript": "4.7.4"
  }
}

import { Version } from "@microsoft/sp-core-library";
import {
  type IPropertyPaneConfiguration,
  PropertyPaneTextField,
} from "@microsoft/sp-property-pane";
import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";

import { Providers, customElementHelper } from "@microsoft/mgt-element";
import { SharePointProvider } from "@microsoft/mgt-sharepoint-provider";
import { registerMgtPersonComponent } from "@microsoft/mgt-components";

import styles from "./MgtTestWebPart.module.scss";
import * as strings from "MgtTestWebPartStrings";

export interface IMgtTestWebPartProps {
  description: string;
}

export default class MgtTestWebPart extends BaseClientSideWebPart<IMgtTestWebPartProps> {
  protected async onInit() {
    if (!Providers.globalProvider) {
      Providers.globalProvider = new SharePointProvider(this.context);
    }
    customElementHelper.withDisambiguation("contoso-hr-solution");
    registerMgtPersonComponent();
  }
  public render(): void {
    this.domElement.innerHTML = `
    <section class="${styles.mgtTest} ${
      !!this.context.sdks.microsoftTeams ? styles.teams : ""
    }">
      <mgt-contoso-hr-solution-person person-query="me" view="twolines"></mgt-person>
    </section>`;
  }

  protected get dataVersion(): Version {
    return Version.parse("1.0");
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription,
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField("description", {
                  label: strings.DescriptionFieldLabel,
                }),
              ],
            },
          ],
        },
      ],
    };
  }
}

[Abiel7]

Hei

I'm also experiencing the same issue as described.

[s-KaiNet]

As a workaround, remove package-lock.json, delete node_modules, update package.json and add @lit/task: 1.0.1 to the dependencies. Then install dependencies npm i. Seems @lit/task@.1.0.2 (released month ago) has some problems when compiling with typescript 4 (which is still default in SPFx). mgt- related packages install the latest patch version 1.0.2 which has problems.

[mr-layco]

Hi @s-KaiNet , thanks for the suggestion. I can now serve the webpart but i just get the below error now, which is not any help either. Nothing in the dev tools or anywhere else as far as i can see to help debug this issue.

[s-KaiNet]

@mr-layco Actually I also tracked down to this problem. The interesting thing is, that in one simple solution the same code with mgt works, in another one I see the same error as yours. I managed to set "pause on exception" and found error details, still it's not clear why it happens:

"Cannot find manifest for 32b9363b-09ff-4959-929a-cab2663fb223_3.0.7. Store had [3.0.2]. Service worker version: (none); App version: (unknown); Next app version: (unknown)"

The id "32b9363b-09ff-4959-929a-cab2663fb223" is the id of @microsoft/microsoft-graph-client library, the minimal supported version in SPFx is 3.0.2, but requested version is 3.0.7, thus the error. @microsoft/microsoft-graph-client is a dependency for some mgt- libraries:

The only thing I don't understand how it works in another solution, where there is also 3.0.7 version.

[mr-layco]

Good work finding that out. So do you know what is the best way of temporarily fixing the issue until the mgt toolkit creators can fix the issue? Do I need to downgrade to a previous version of the toolkit?

[s-KaiNet]

Yeah, I found how it works in my other solution. In my other project, thankfully to package-lock.json, the dependency @microsoft/microsoft-graph-client@3.0.2 was in the root dependency tree. So the fix would be just as with @lit/task - to install explicitly the needed version, i.e. npm i @microsoft/microsoft-graph-client@3.0.2 -SE should fix the error.

Though I don't know if there are any consequences or another cases where this error could be reproduced, because technically mgt- packages still have 3.0.7 version in dependency tree. I checked in my current solution and we use @microsoft/mgt-@4.3.0 packages (people picker), with graph client 3.0.7 and we don't have any issues with that, so looks like this trick should work fine.
Anyway it's an issue from SPFx+MGT integration side, which needs to be resolved. We don't need to use any workarounds, it should "just work".

[s-KaiNet]

@mr-layco alternatively, if you don't need any features or fixes from 4.4, you can use 4.2.5, which depends on graph client 3.0.2

[s-KaiNet]

Added related #3403

[mr-layco]

@s-KaiNet Thanks so much for your help. Seems to be working now with those changes you suggested.
I'll leave the issue open until someone takes a proper look at it 👍