Every product goes under the upgrade cycle and SharePoint Framework(SPFx) is no exception to it. It gets updated on a regular basis. With each update, the SPFx provides more functionalities and bug fixes.
SharePoint client-side development tools use the npm package manager to manage dependencies and other required JavaScript helpers. npm is typically included as part of Node.js setup. Node.js is frequently updated and available on multiple platforms including macOS, Windows, and Linux.
Latest SharePoint Framework (v1.15) was released on 29/06/2022 and supports Node.js v16.15.0+ (Gallium).
When you create a new client-side solution, the Yeoman generator for SharePoint fetches the latest SharePoint Framework packages required for your client-side project. But, how do you upgrade your current solution.
Do not just run “npm version”. It will only bump the package version in package.json file, giving you a lot of errors.
Uninstall current Node.js from Windows Control Panel->Programs and Features.
Remove “npm” and “npm-cache” folders in below path.
C:\Users{username}\AppData\Roaming
Download and install the matching Node.js version for the SPFx framework.
| SPFx Version | Node.js (LTS) | NPM | TypeScript |
| 1.15 | v12, v14, v16 | v5, v6, v7, v8 | v4.5 |
| 1.14 | v12, v14 | v5, v6 | v3.9 |
| 1.13.1 | v12, v14 | v5, v6 | v3.9 |
| 1.13.0 | v12, v14 | v5, v6 | v3.9 |
SPFx development environment compatibility
Remember to not install the latest Node.js version available. Find the matching/compatible Node version in Node.js > Downloads > Previous Releases
Install Latest Released Framework Globally
“npm install @microsoft/generator-sharepoint@latest –global”
This version will be included in the new projects from now on.
Upgrade the Current Projects
In the project’s package.json file, identify all SPFx old packages(starts with “@microsoft/sp”). For each SPFx package;
“npm uninstall @microsoft/{spfx-package-name}@version”
“npm install @microsoft/{spfx-package-name}@latest –save –save-exact”
Now we will update the supporting project packages. When updating packages to newer versions, you should always use your package manager (npm or Yarn). You shouldn’t edit the package.json file manually.
Run “npm outdated” to find out the outdated packages of the current solution.
Uninstall each package by using “npm uninstall {package name@version}
Install the wanted package by using “npm install {package name@wanted version} –save
Node: Do not try to install the “Latest” available version. Install the “Wanted” version by the project. It might not always be possible for you to use the latest version of the given package because it might be incompatible with other SharePoint Framework dependencies, such as TypeScript.
After the packages are upgraded, execute the below command to clean up any old build artifacts:
“gulp clean”
It’s recommended to delete all old packages by deleting the node_modules folder and download (ie: reinstall) all dependencies with the updated package.json. Without this step, old versions may conflict with the newer versions the next time you build the project.
“npm install”