SPFx – Using PnPjs version 3 : Resolving error – Error – [tsc] node_modules/@pnp/queryable/queryable.d.ts(10,115): error TS1005: ‘,’ expected.

Hi All,

Greetings for the day ! New issue and solution !! Exploring SPFx continues !

Background / Details :

• I am exploring / implementing SPFx component, using PnPjs version 3
• As discussed in last article – SPFX : Resolving error – Module “@pnp/sp” has no exported member ‘sp’.ts(2305) , In PnPjs version 3 we are using SPFI member from module “@pnp/sp” module as

import { spfi, SPFx } from "@pnp/sp";

• But as I build the project using gulp command, getting an error

gulp build

Error / Issue :

Error – [tsc] node_modules/@pnp/queryable/queryable.d.ts(10,115): error TS1005: ‘,’ expected. #2126

Error – [tsc] node_modules/@pnp/queryable/queryable.d.ts(10,155): error TS1005: ‘;’ expected

Error – [tsc] node_modules/@pnp/queryable/queryable.d.ts(10,156): error TS1131: Property or signature expected.

Solution / Cause:

• This error is caused since current version of @microsoft/generator-sharepoint defaults to TypeScript 3.7
• Because of this when we use newer version of PnPjs it breaks the build and shows the respective above errors
• To solve this issue we need upgrade the Microsoft rush stack compiler with latest version and update tsconfig file

• Upgrading Microsoft rush stack compiler : As shown in above fig, in tsconfig.json file – old version of “Microsoft rush stack compiler” is mentioned – 3.9, we need to upgrade it to latest version 4.2 as

npm uninstall @microsoft/rush-stack-compiler-3.9

npm i @microsoft/rush-stack-compiler-4.2

• Once we have latest version of “Microsoft rush stack compiler” we need to update our tsconfig.json file to use it as

Try to build again. Build will be successful.

Thanks for reading! Please feel free to discuss in case any issue / suggestions / thoughts

HAVE A GREAT TIME AHEAD!