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

In this article, you will learn the process of upgrading SPFx to the latest version, i.e., 1.9.1 and the issues in the process along with their solutions.

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
 
SPFx - Upgrading To Latest Version (1.9.1) - Issues And Solutions 
 
Solution – Delete the .config folder from the location in your system – C -> Users -> Username
 
SPFx - Upgrading To Latest Version (1.9.1) - Issues And Solutions 
 
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/sp-tslint-rules@1.9.1 --save
 
SPFx - Upgrading To Latest Version (1.9.1) - Issues And Solutions 
 
NOTE
All the SharePoint Framework packages start with @microsoft/sp-
 
Issue 3 – rush-stack compiler error
 
SPFx - Upgrading To Latest Version (1.9.1) - Issues And Solutions 
 
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
  1. {  
  2.   "extends""./node_modules/@microsoft/rush-stack-compiler-3.2/includes/tsconfig-web.json",  
  3.   "compilerOptions": {  
  4.     "target""es5",  
  5.     "forceConsistentCasingInFileNames"true,  
  6.     "module""esnext",  
  7.     "moduleResolution""node",  
  8.     "jsx""react",  
  9.     "declaration"true,  
  10.     "sourceMap"true,  
  11.     "experimentalDecorators"true,  
  12.     "skipLibCheck"true,  
  13.     "outDir""lib",  
  14.     "inlineSources"false,  
  15.     "strictNullChecks"false,  
  16.     "noUnusedLocals"false,  
  17.     "typeRoots": [  
  18.       "./node_modules/@types",  
  19.       "./node_modules/@microsoft"  
  20.     ],  
  21.     "types": [  
  22.       "es6-promise",  
  23.       "webpack-env"  
  24.     ],  
  25.     "lib": [  
  26.       "es5",  
  27.       "dom",  
  28.       "es2015.collection"  
  29.     ]  
  30.   },  
  31.   "include": [  
  32.     "src/**/*.ts"  
  33.   ],  
  34.   "exclude": [  
  35.     "node_modules",  
  36.     "lib"  
  37.   ]  
  38. }  
tslint.json
  1. {  
  2.   "extends""@microsoft/sp-tslint-rules/base-tslint.json",  
  3.   "rules": {  
  4.     "class-name"false,  
  5.     "export-name"false,  
  6.     "forin"false,  
  7.     "label-position"false,  
  8.     "member-access"true,  
  9.     "no-arg"false,  
  10.     "no-console"false,  
  11.     "no-construct"false,  
  12.     "no-duplicate-variable"true,  
  13.     "no-eval"false,  
  14.     "no-function-expression"true,  
  15.     "no-internal-module"true,  
  16.     "no-shadowed-variable"true,  
  17.     "no-switch-case-fall-through"true,  
  18.     "no-unnecessary-semicolons"true,  
  19.     "no-unused-expression"true,  
  20.     "no-use-before-declare"true,  
  21.     "no-with-statement"true,  
  22.     "semicolon"true,  
  23.     "trailing-comma"false,  
  24.     "typedef"false,  
  25.     "typedef-whitespace"false,  
  26.     "use-named-parameter"true,  
  27.     "variable-name"false,  
  28.     "whitespace"false  
  29.   }  
  30. }  
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).
 
SPFx - Upgrading To Latest Version (1.9.1) - Issues And Solutions 
 
After upgrade, the package.json file will look similar to the image shown below.
 
SPFx - Upgrading To Latest Version (1.9.1) - Issues And Solutions 
 
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

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

  • npm install @microsoft/sp-core-library@latest –save OR npm install @microsoft/sp-core-library@1.9.1 –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.