How to Upgrade SPFx Solution to Latest Version

SharePoint framework is getting popular and being used by many developers to build SharePoint customization solutions. SPFx being open source, there are many features being added on time basis and hence new version of framework is released frequently. We might have developed our SPFx solution in older version and it might be required to upgrade to latest version to take advantage of latest version. Please note it is not compulsory to upgrade your solution, but it is recommended. I personal advise – Only upgrade if you want to add new feature to existing solution because upgrading is not simple task. You also might run in to issues where existing functionality might break because of some latest changes in dependent library.

If you are still interested, go ahead to know how we can upgrade it.

I have generated a scenario where my current SharePoint Framework version(Yeoman generator) is 1.7.0 and as of writing this article current latest version is 1.8.2.

How to Current version and Latest version of global packages.

To find current version and latest version of Yeoman generator we can use below command.

npm outdated –global

Below would be output of same.

If you see above, @microsoft/generator-sharepoint current version is 1.7.0 and Latest is 1.8.2

Please note we have used — global parameter to find versions of all global packages.

How to find current and latest version of libraries used in your Project.

I have created a SPfx webpart on version 1.7.0, let us find out what all libraries are out dated for this particular solution

Go to project directory , run below command

npm outdated

Upgrade solution

As scope of this article, we will only upgrade this particular project/solution to latest version, global package would still be 1.7.0…

To upgrade solution, we need to install all the packages with required version.

npm install <Package Name>@<version> –save

Example of some of commands w.r.t above project.

npm install @microsoft/sp-build-web@1.8.2
npm install @microsoft/sp-core-library@1.8.2
npm install @types/chai@4.1.7
npm install ajv@latest
npm install @microsoft/sp-webpart-workbench@1.8.2

Note – I would suggest to use the wanted version rather than latest version, latest version are sometime in buggy and tend to break something.

Upgrade all the packages one by one to wanted version. Once upgraded, open package.json to check if it reflects wanted version of packages as per report above.

Let us run again ‘npm outdated’ to check if we have any outdated package, Below is post upgrading screenshot of my solution. If you see all the @microsoft package is removed from report.

Clean and Build project again

gulp build

gulp serve

If you are lucky, local work bench would open and you would be able to test your webpart.

I was not lucky, I got below error in gulp build.

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’

Fixing cannot find module rush-stack compiler issue.

• Rename your package.json to package_bkp.json and package-lock.json to package-lock_bkp.json
• Delete node_modules folder.
• Create new package.json file, run ‘npm init -y’ at root level of your project directory.
• Now Add dependencies and devDependencies attributes from backup package_bkp.json to newly created package.json file.
• Why do we need to  delete node_modules and re-install ? – To make sure all correct version of modules are installed based on package.json
• Run ‘npm install’ 

Tried gulp build again but same error  ‘Cannot find module ‘@microsoft/rush-stack-compiler-3.2’

• So now I manually installed ‘npm i @microsoft/rush-stack-compiler-3.2’
• Tried gulp build again and wola !

• Run gulp serve and check if you webpart is available on local workbench. It was available for me and working as usual. Please refer screenshot below

 

That’s it – We successfully upgrade SPfx solution to latest version without globally upgrading Yeoman generator version. Please note that though you would have upgraded Yeoman generator to latest version, you would still need to manually upgrade every solution.  Feel free to add in comment is you faced any other issues.

Hope this helps.. Happy coding!!!