Upgrading sp-pnp-js to 1.0.5

You have already working SharePoint project which is using SharePoint PnP JavaScript Core Component library. (https://github.com/SharePoint/PnP-JS-Core). You want to update it or you accidently updated it from earlier version to 1.0.5.

I have used in this example Patrick Rodgers’ Yeoman sample project (https://www.npmjs.com/package/generator-sp-pnp-js-sample).

Before you will do anyting everything works fine and if you execute gulp build you will get successful build.


Updating sp-pnp-js

Before we can update to new version of the sp-pnp-js package, we need to check how it’s installed to the project. This can be done by checking the project.json file. It has two sections for external packages (dependencies and devDependencies).


We will execute

npm install sp-pnp-js@latest --save

to update sp-pnp-js to latest version. Note that you need to use –save parameter instead of –save-dev, because sp-pnp-js is in dependencies section instead of devDepencencies.


You can see that we have now the 1.0.5 version which we were looking for. Now if we will try to build our project, we notice that it will fail. At first everything seems to go fine.


but then we can see only red error lines and lots of those.


Updating Typescript

Now it’s time to read the manual or something like that. In our case explanation comes from GitHub commit comments. “Updates to TypeScript 2.0”. Ok. What this means? What version we have? It’s easy to find out. You can see it right after gulp build has started. It says that our version is 1.8.10.



npm install typescript@latest --save-dev

Note that now you need to use –save-dev, because typescript is in devDependencies section.


Now everything should work as we have updated TypeScript to required version.


Wait!! Why we get all those errors even though we have correct TypeScript version?


Removing extra typings

It seems that we have duplicate type definitions for all those typescript files. Previously sp-pnp-js required several external typings before it worked. Now those require typings have been added inside the package.


We need to remove external typings. Extra typings can be found from project\typings\ folder.

Execute following commands

typings uninstall whatwg-fetch --global
typings uninstall es6-promise --global


Now you can execute

gulp build

Everything works now.


Leave a Reply

Your email address will not be published. Required fields are marked *