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

SPFx component - error while using spfi member from module "@pnp/sp" from PnPjs version 3
SPFx component - error while using spfi member from module "@pnp/sp" from PnPjs version 3

Hi All,

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

Background / Details :

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.

SPFx component - error while using spfi member from module "@pnp/sp" version 3
fig : SPFx component – error while using spfi member from module “@pnp/sp” from PnPjs version 3

SPFx component - error while using spfi member from module "@pnp/sp" from PnPjs version 3
fig : SPFx component – error while using spfi member from module “@pnp/sp” from PnPjs version 3

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
fig : SPFx component – tsconfig.json file – old version of “rush stack compiler” referred
  • 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

SPFx component - removing / uninstalling old version of "rush stack compiler"
fig : SPFx component – removing / uninstalling old version of “rush stack compiler”

SPFx component - installing updated version of "rush stack compiler" - 4.2
fig : SPFx component – installing updated version of “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
SPFx component - Updated tsconfig.json file for referring latest "Microsoft rush stack compiler"
fig : SPFx component – Updated tsconfig.json file for referring latest “Microsoft rush stack compiler”

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!

Prasham Sabadra

LIFE IS VERY BEAUTIFUL :) ENJOY THE WHOLE JOURNEY :) Founder of Knowledge Junction and live-beautiful-life.com, Author, Learner, Passionate Techie, avid reader. Certified Professional Workshop Facilitator / Public Speaker. Scrum Foundation Professional certificated. Motivational, Behavioral , Technical speaker. Speaks in various events including SharePoint Saturdays, Boot camps, Collages / Schools, local chapter. Can reach me for Microsoft 365, Azure, DevOps, SharePoint, Teams, Power Platform, JavaScript.

You may also like...

1 Response

  1. April 9, 2022

    […] one of our SPFx last article – SPFx – Using PnPjs version 3 : Resolving error – Error – [tsc] node_modules/@pnp/query… we discussed about Microsoft rush stack compiler and updated the latest version of […]

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: