How To Upgrade SPFx Solutions To 1.9.0

Siddharth Vaghasia
Jul 30, 2019

26.3k
0
2
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

SharePoint Framework 1.9 version has been released! This includes general availability of the Library Components, tooling updates and other improvements.

For more details on changes and release notes refer to this link. In this article, we will learn how to upgrade your old version SPFx solution to 1.9.0.

For showing demo on this article, we will use a Hello world SPFx solution which was created with SPFx 1.7.0. You can follow same steps from any version to directly upgrade it to 1.9.0.

Note

There is an Office365CLI command which we can run against the SPFx solution. This command provides a set of instructions required to perform to upgrade to the targeted version. We still have to follow the steps manually, it will only provide instructions. We can read more about it at this blog by Nandeep.

First let us check what is the current version of packages installed globally, for our case we would merely focus on yeoman generator and its version.

Go to node js command prompt and run the below command,

npm outdated –global

Below is the output which I got based on my enviorment.

If you look at the above output, @microsoft/generator-sharepoint current version is 1.8.2 and Latest is 1.9.0

Note

We have used — global parameter to find versions of all global packages.

The next step is to check outdated packages in current SPFx solution.

Go to your SPFx solution directory in nodejs command prompt
Run the below command (we won't use -global parameter here)

npm outdated

From below you can see, that my current SPFx solution version is 1.7.0 and the latest is 1.9.0.

Note

This means though my global yoeman generator version is 1.8.2, my current solution is built using SPFx 1.7.0. This is because when this solution was scaffolded, yeoman generator was 1.7.0. Yeoman generator was globally upgraded to 1.8.2 after this solution was created. It means if you upgrade your yeoman genarator, all your old solutions will still remain in the older version. It has to be manually upgraded to the latest one using the steps below.

Now let us migrate this particular solution to 1.9.0.

Step 1

Open your solution code in your favourite editor and find package.json. Mine looks something like below

{
"name": "sp-fx-hello-world",
"version": "0.0.1",
"private": true,
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
},
"dependencies": {
"@microsoft/sp-core-library": "1.7.0",
"@microsoft/sp-webpart-base": "1.7.0",
"@microsoft/sp-lodash-subset": "1.7.0",
"@microsoft/sp-office-ui-fabric-core": "1.7.0",
"@types/webpack-env": "1.13.1",
"@types/es6-promise": "0.0.33"
},
"devDependencies": {
"@microsoft/sp-build-web": "1.7.0",
"@microsoft/sp-tslint-rules": "1.7.0",
"@microsoft/sp-module-interfaces": "1.7.0",
"@microsoft/sp-webpart-workbench": "1.7.0",
"gulp": "~3.9.1",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "~5.2.2"
}
}

Step 2

Update all references of package versions from 1.7.0 to 1.9.0

After modifying, package.json should look like below. Please note for this example we are only updating microsoft packages which are related to SPFx.

{
"name": "sp-fx-hello-world",
"version": "0.0.1",
"private": true,
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
},
"dependencies": {
"@microsoft/sp-core-library": "1.9.0",
"@microsoft/sp-webpart-base": "1.9.0",
"@microsoft/sp-lodash-subset": "1.9.0",
"@microsoft/sp-office-ui-fabric-core": "1.9.0",
"@types/webpack-env": "1.13.1",
"@types/es6-promise": "0.0.33"
},
"devDependencies": {
"@microsoft/sp-build-web": "1.9.0",
"@microsoft/sp-tslint-rules": "1.9.0",
"@microsoft/sp-module-interfaces": "1.9.0",
"@microsoft/sp-webpart-workbench": "1.9.0",
"gulp": "~3.9.1",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "~5.2.2"
}
}

Before moving to next step, please make sure you have backed up your solution with all folders (including node_modules)

Step 3

Delete your node_modules folder. The path of this folder should be below

\SPFx-HelloWorld1.9\node_modules

Please note though these are not compulsory steps, but they are recommended so that we make sure that all the latest packages and dependecies are downloaded correctly and referred accordingly.

Step 4

Once your node_modules is deleted, run the below command to install all the packages. Package version would be referred from package.json

npm install

We will see a similar kind of output, it will take some time to execute this command. Get a tea or cofee :)

Once completed, we should get the below message.

Findings in my case,

While executing npm install, my internet stopped working for a couple of minutes. I started getting errors in installation, terminated the process and ran the command again but started getting weird issues.
I deleted node_modules folder again, ran 'npm cache clean --force'/
Ran npm install, it was now sucessfully installed.

Step 5

Test the webpart, run

gulp serve

If you are lucky, It should open local workbench and you should be able to add the webpart to the page.

I was not lucky :), I got the below error,

Error – [tslint] Error: Cannot find module ‘@microsoft/rush-stack-compiler-3.2’
Error – ‘tslint’ sub task errored after 6.62 ms
Cannot find module ‘@microsoft/rush-stack-compiler-3.2’
Error – [tsc] Error: Cannot find module ‘@microsoft/rush-stack-compiler-3.2’
Error – ‘tsc’ sub task errored after 3.21 ms
Cannot find module ‘@microsoft/rush-stack-compiler-3.2’