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.

update_sp-pnp-js_before_update

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).

update_sp-pnp-js_pnpversion_100

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.

update_sp-pnp-js_update_sp-pnp-js

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.

update_sp-pnp-js_build_fails1

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

update_sp-pnp-js_build_fails2

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.

update_sp-pnp-js_typescript_version_1_8

Execute

npm install typescript@latest --save-dev

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

update_sp-pnp-js_typescript_update

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

update_sp-pnp-js_build_fails3

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

update_sp-pnp-js_build_fails4

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.

update_sp-pnp-js_typings

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

update_sp-pnp-js_typings_uninstall

Now you can execute

gulp build

Everything works now.

update_sp-pnp-js_build_succeeds

Leave a Reply

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

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