Solving Common TypeScript Errors with @lit/task in SharePoint Framework (SPFx)

In this blog, we will discuss

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

Recently, I was working on one solution that was simple, not complicated. In that solution. I need to use @microsoft/mgt-react, this library, to add users' profiles and all things from their tenant.

So, let me clear the versions of environments so it will be easy for you to recognize.

"@microsoft/sp-core-library": "1.20.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"typescript": "4.7.4"
"eslint": "8.57.0",
"@microsoft/mgt-element": "^4.2.5",
"@microsoft/mgt-react": "^4.2.5",
"@microsoft/mgt-sharepoint-provider": "^4.2.5",
"@microsoft/mgt-spfx-utils": "^4.2.5",

• These are the main libraries that I am using with Node 18. There are other libraries also, but we are facing an error, it is about typescript, so the most important libraries that could be associated with it are these libraries.

First, when I searched on Google each time and everywhere, it showed errors like there was a mismatch in the typescript version. I checked the SharePoint Environment Compatibility. But I got frustrated knowing that I am using all compatible versions, even though it is showing this error. Which is strange and exciting too, to find a solution? So let's discuss what scenarios I have used but didn't work, but possibly could work in your case. Also, a solution that I use.

Scenarios

1. Typically, it is an error regarding the typescript version, so first check that you are using a compatible version with SPFx and React, and check Sharepoint Environment Compatibility.
2. Try to put skipLibCheck: True in your tsconfig.json in the compilerOptions file; it works in some cases, but in my case, it didn't work.
3. Sometimes this error arises because there is a mismatch between the typescript version and the syntax, which is used in type declaration files in dependencies. I thought this happened in my case.
4. You can remove node_modules and the package-lock.json file, and reinstall. Sometimes this works too.

Now, in the above we have seen some scenarios where this error could be. In my case, I was using @microsoft/mgt-react, a library to fetch users from the tenant and to render on a UI like a profile with all details on hover. But when I added this library, it started showing me an error like Error - [tsc] node_modules/@lit/task/task.d.ts(134,35): error TS1005: ',' expected. This.

I saw many solutions and tried, but they didn't work, except one, which is given below:

I made the following changes in the Package-lock.json file, where all dependencies are located.

"node_modules/@lit/reactive-element": {
     "version": "2.1.0",
     "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.1.0.tgz",
     "integrity": "sha512-L2qyoZSQClcBmq0qajBVbhYEcG6iK0XfLn66ifLe/RfC0/ihpc+pl0Wdn8bJ8o+hj38cG0fGXRgSS20MuXn7qA==",
     "license": "BSD-3-Clause",
     "dependencies": {
       "@lit-labs/ssr-dom-shim": "^1.2.0"
     }
   },
   "node_modules/@lit/task": {
     "version": "1.0.2",
     "resolved": "https://registry.npmjs.org/@lit/task/-/task-1.0.2.tgz",
     "integrity": "sha512-ofj/fahKhhS1SpbPSC57OMo2BXMxHG/y4sxH/ahWzXT5dh1kxjex7WqbL8ammb6zIlqbFCj6z2aGFYOh/qCQ+g==",
     "license": "BSD-3-Clause",
     "dependencies": {
       "@lit/reactive-element": "^1.0.0 || ^2.0.0"
     }
   },

I just replaced the above code with the below, and it works for me.

 "node_modules/@lit/reactive-element": {
     "version": "2.1.0",
     "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.1.0.tgz",
     "integrity": "sha512-L2qyoZSQClcBmq0qajBVbhYEcG6iK0XfLn66ifLe/RfC0/ihpc+pl0Wdn8bJ8o+hj38cG0fGXRgSS20MuXn7qA==",
     "dependencies": {
       "@lit-labs/ssr-dom-shim": "^1.2.0"
     }
   },
   "node_modules/@lit/task": {
     "version": "1.0.1",
     "resolved": "https://registry.npmjs.org/@lit/task/-/task-1.0.1.tgz",
     "integrity": "sha512-fVLDtmwCau8NywnFIXaJxsCZjzaIxnVq+cFRKYC1Y4tA4/0rMTvF6DLZZ2JE51BwzOluaKtgJX8x1QDsQtAaIw==",
     "dependencies": {
       "@lit/reactive-element": "^1.0.0 || ^2.0.0"
     }
   },

Hope you find this blog helpful, I will recommend that if you face this kind of error and use this blog for a solution please compare all libraries versions first because it works for me with provided versions but it could be that there is a different version in your solution so there may be another solution available.