SPFx - Upgrading To Latest Version (1.9.1)

Introduction

While working on a SharePoint Framework (SPFx) project, it was required to upgrade to the latest SPFx version. We all know that the latest SPFx version is 1.9.1 and below are the main highlights of this version.

Introduction of Library Component Type in General Availability
Tooling move from WebPack 3 to WebPack 4
Removal of GraphHttpClient from the API.

Explanation

In this article, I will explain the issues which I faced while upgrading the existing SPFx project (built with version 1.0.0) to the latest version. So, let’s get started!

NOTE
In my system, NodeJS version 10.16.3 is installed and the npm version is 6.9.0, as shown in the below image.

SPFx - Upgrading To Latest Version (1.9.1) - Issues And Solutions

Issue 1 – npm update check failed

Solution – Delete the .config folder from the location in your system – C -> Users -> Username

Issue 2 – JSON validation failed

Solution – Check for outdated packages in your solution by running the command – npm outdated. This will list all the packages which are outdated in your current project and which need to be updated. Use the below command for upgradation.

npm install mypackage@newversion –save

E.g. - npm install @microsoft/[email protected] --save

NOTE
All the SharePoint Framework packages start with @microsoft/sp-

Issue 3 – rush-stack compiler error

Solution – Update rush stack compiler using the command npm i @microsoft/rush-stack-compiler-3.2

Issue 4 - config upgrade, you are using an old version of config.json file

Solution – Run the command – gulp build --upgrade

Issue 5 – Issues with the contents of tsconfig.json and tslint.json files

Solution – To solve this issue, please refer to the contents which need to be added to these two files. In other words, replace the content of these two files with the below content.

tsconfig.json

{
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.2/includes/tsconfig-web.json",
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"jsx": "react",
"declaration": true,
"sourceMap": true,
"experimentalDecorators": true,
"skipLibCheck": true,
"outDir": "lib",
"inlineSources": false,
"strictNullChecks": false,
"noUnusedLocals": false,
"typeRoots": [
"./node_modules/@types",
"./node_modules/@microsoft"
],
"types": [
"es6-promise",
"webpack-env"
],
"lib": [
"es5",
"dom",
"es2015.collection"
]
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules",
"lib"
]
}

tslint.json

{
"extends": "@microsoft/sp-tslint-rules/base-tslint.json",
"rules": {
"class-name": false,
"export-name": false,
"forin": false,
"label-position": false,
"member-access": true,
"no-arg": false,
"no-console": false,
"no-construct": false,
"no-duplicate-variable": true,
"no-eval": false,
"no-function-expression": true,
"no-internal-module": true,
"no-shadowed-variable": true,
"no-switch-case-fall-through": true,
"no-unnecessary-semicolons": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-with-statement": true,
"semicolon": true,
"trailing-comma": false,
"typedef": false,
"typedef-whitespace": false,
"use-named-parameter": true,
"variable-name": false,
"whitespace": false
}
}

After implementing all the above solutions, I was able to build and run the SPFx web part with the latest version, as shown in the below screenshot (successful gulp build).

After upgrade, the package.json file will look similar to the image shown below.

Useful Commands

gulp clean
gulp build
gulp serve
Update SharePoint generator to its latest version - npm install @microsoft/generator-sharepoint@latest –g
Identify globally deployed packages - npm ls -g --depth=0
npm install @microsoft/sp-core-library@latest –save OR npm install @microsoft/[email protected] –save
npm list -g @microsoft/generator-sharepoint
npm install --save @types/es6-collections

General Tips

Take a backup of your existing project before upgrading to the latest version.
Delete node_modules folder and install again using – npm install
Remove the tslint.json file from the config folder and add it to the root folder of your solution.
Update package.json and change all the references from previous version packages and have them reference to 1.9.1.

Summary

In this article, I explained some issues and their solutions while upgrading your solution/project to the latest SPFx version i.e. 1.9.1. Hope this article will be useful for many developers.