I would like to share my experience on upgrading my old SPFX webpart developed in SPFX v1.10.x to SPFX V1.12.1. Microsoft Team is kept on adding lot of features to SharePoint Framework package and so the version is changes in timely manner. So I had decided to migrate my SPFX project to newer version.
I have followed the below steps carefully and this ensures my project get successfully updated to newer version.
Install the latest Microsoft SharePoint Framework Generator package globally
npm install @microsoft/generator-sharepoint@latest -g
To view the outdated versions from your package, run the below command
If you see any package outdated other then SharePoint modules, run the below commands
npm un -S <package name>
npm I -SE <package name>
I have used below Microsoft 365 CLI command to get the steps for upgrading SPFX project
m365 spfx project upgrade
This command list out the below steps of uninstall old packages, install new packages, and also it lists the changed needed in the project files,
The summary of above steps are as follows,
- Uninstall webpack and es6-promise
- Uninstall chai and mocha types
- Install SPFX core modules of latest version 1.12.1
- Install SPFX webpart & build modules of latest version 1.12.1 and webpart & es6-promise
- Remove .editorconfig file
- Update ./config/copy-assets.json ( Package folder path is changed )
- Update ./config/deploy-azure-storage.json ( Package folder path is changed )
- Update ./.yo-rx.json ( Update the version to 1.12.1 )
- Update ./.gitignore
- Update ./tsconfig.json
- Update ./gulpfile.js
- Update ./tslint.json
- Update ./package.json
- Update ./config/package-solution.json
Once all the changes are updated / modified, run the gulp serve command in SPFX Project path to validate the migrated project is working fine.
If you face any issue, Ensure all the migration steps are completed and another options is to delete the node_modules folder and run npm install.
Hope the steps will work for all the SPFX migration and please put in the box, if you have faced any challenges in migrating the project.