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

npm outdated

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,

  1. Uninstall webpack and es6-promise
  2. Uninstall chai and mocha types
  3. Install SPFX core modules of latest version 1.12.1
  4. Install SPFX webpart & build modules of latest version 1.12.1 and webpart & es6-promise
  5. Remove .editorconfig file
  6. Update ./config/copy-assets.json ( Package folder path is changed )
  7. Update ./config/deploy-azure-storage.json ( Package folder path is changed )
  8. Update ./.yo-rx.json ( Update the version to 1.12.1 )
  9. Update ./.gitignore
  10. Update ./tsconfig.json
  11. Update ./gulpfile.js
  12. Update ./tslint.json
  13. Update ./package.json
  14. 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.