Pnpjs: Build errors in Typescript project

[unnieayilliath]

Category

• [ ] Enhancement
• [ ] Bug
• [x] Question
• [ ] Documentation gap/issue

Version

Please specify what version of the library you are using: [ 1.2.5 ]

Please specify what version(s) of SharePoint you are targeting: [ Sp 2013 ]

Observed Behavior

I am using pnp packages in a typescript project (SP hosted app) running against SP 2013. I have installed the latest package from npm and imported it into a module. But when I build I get multiple errors for files inside the pnp package.

Severity Code Description Project File Line Suppression State
Error TS2314 Generic type 'SharePointQueryableCollection' requires 2 type argument(s). OSD.SharePointHostedApp (tsconfig project) C:\Repo\SharePoint\OSD.SharePointHostedApp\OSD.SharePointHostedApp\node_modules\@pnp\sp\src\webs.d.ts 281 Active

Severity Code Description Project File Line Suppression State
Error Build:Cannot find name 'Response'. OSD.SharePointHostedApp C:\Repo\SharePoint\OSD.SharePointHostedApp\OSD.SharePointHostedApp\node_modules\@pnp\common\src\adalclient.d.ts 43

Severity Code Description Project File Line Suppression State
Error Build:',' expected. OSD.SharePointHostedApp C:\Repo\SharePoint\OSD.SharePointHostedApp\OSD.SharePointHostedApp\node_modules\@pnp\common\src\util.d.ts 66

Steps to Reproduce

Typescript version: 3.1.6

import pnp from '@pnp/pnpjs';

Tsconfig below:

{
  "compileOnSave": true,
  "compilerOptions": {
    "types": [],
    "sourceMap": true,
    "module": "amd",
    "target": "es5",
    "lib": [ "es6" ],
    "noEmitOnError": true,
    "outDir": "./dist",
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "jquery": [ "node_modules/jquery/dist/jquery" ],
      "@pnp/pnpjs": [ "node_modules/@pnp/pnpjs/dist/pnpjs" ]
    }
  },
  "exclude": [
    "node_modules",
    "obj",
    "bin"
  ]
}

[koltyakov]

Hi @unnieayilliath,

"skipLibCheck": true option in tsconfig.json/compilerOptions might help in avoiding local TypeScript setting differences.

[unnieayilliath]

@koltyakov Thanks "skipLibCheck": true fixed some of the build errors but it still shows around 73 errors mainly related to TS1005 TypeScript ',' expected. on util.d.ts , sharepointqueryable.d.ts

[patrick-rodgers]

Do you have a minimal reproduction we can clone and look at? This is likely settings in your project affecting the build. We use the d.ts files as they are produced by tsc so they should be formatted properly. Perhaps you have turned on stricter settings than we used. But skip lib check should avoid any issues in included code.

[unnieayilliath]

Hi @patrick-rodgers , I have uploaded a minimal reproduction here https://github.com/unnieayilliath/SampleSPApp

[patrick-rodgers]

Hi @unnieayilliath - I just had a chance to clone the project and I am unable to duplicate what happened for you. So I think this is one of two things:

1. You are using an older version of TypeScript, can you ensure you are running at least 2.8? For the record I was prompted to install 2.8 when I built the project for the first time. The two options I have are 2.8 or latest and it works with both choices. There is a tab for this in settings panel.
2. I am using a newer version of the pnpjs library (I just did an npm install when I cloned and I got @pnp/[email protected]. So perhaps we changed something)

My best guess is 1 is the issue.

[patrick-rodgers]

Going to close this one due to inactivity. Please _reopen_ if you need to continue the conversation. Thanks!

[unnieayilliath]

Thanks @patrick-rodgers I guess as you said it is bcoz of some reference to older version of typescript. I completely removed all typescript version on my PC and started fresh. Things are working now. Thanks for your help!

[Nagarajan1605]

[email protected] D:\Demo
-- @microsoft/[email protected] -- @microsoft/[email protected]
+-- @microsoft/[email protected]
| -- [email protected] -- [email protected]

Warning - tslint - src\webparts\demoPnpwp\components\DemoPnpwp.tsx(7,22): error whitespace: missing whitespace
Warning - tslint - src\webparts\demoPnpwp\components\DemoPnpwp.tsx(17,13): error whitespace: missing whitespace
Error - typescript - node_modules\@pnp\common\src\util.d.ts(66,56): error TS1005: ',' expected.
Error - typescript - node_modules\@pnp\common\src\util.d.ts(66,88): error TS1005: ',' expected.
Error - typescript - node_modules\@pnp\odata\src\parsers.d.ts(44,36): error TS1005: ',' expected.
Error - typescript - node_modules\@pnp\odata\src\queryable.d.ts(88,24): error TS1005: ',' expected.
Error - typescript - node_modules\@pnp\odata\src\queryable.d.ts(89,25): error TS1005: ',' expected.
Error - typescript - node_modules\@pnp\odata\src\queryable.d.ts(90,26): error TS1005: ',' expected.
Error - typescript - node_modules\@pnp\odata\src\queryable.d.ts(91,27): error TS1005: ',' expected.
Error - typescript - node_modules\@pnp\odata\src\queryable.d.ts(92,24): error TS1005: ',' expected.
Error - typescript - node_modules\@pnp\odata\src\queryable.d.ts(132,83): error TS1005: ',' expected.
Error - typescript - node_modules\@pnp\odata\src\queryable.d.ts(165,10): error TS1005: ',' expected.
Error - typescript - node_modules\@pnp\odata\src\queryable.d.ts(166,24): error TS1005: ',' expected.
Error - typescript - node_modules\@pnp\odata\src\queryable.d.ts(167,25): error TS1005: ',' expected.
Error - typescript - node_modules\@pnp\odata\src\queryable.d.ts(168,26): error TS1005: ',' expected.
Error - typescript - node_modules\@pnp\odata\src\queryable.d.ts(169,27): error TS1005: ',' expected.

Please let me know how to solve this issue