Upgrade Your Webpart

There’s a difference between upgrading your webpart and upgrading your environment; You can upgrade your environment and every webpart you create after that will be that version, or you only upgrade one at a time and keep your current version the same.

If you don’t want to use a certain version but want to upgrade a specific webpart to it, upgrading your webpart is the right route for you. However, if you find yourself upgrading your webpart often, it may be time to upgrade your environment to spare you the time of upgrades. This blog will guide you on the steps on how to do either option.

There are a couple steps to a successful web part upgrade – Let’s start!

1. The first step is to go into your package.json file. Find and replace instances of your current version with the new version ( 1.10.0 to 1.12.1 )

Make sure to go to your dependencies section and devDependencies section as I found that I had the versioning listed there.

2. Delete your node_modules folder and your package-lock.json file.

These are both based off of your package.json file and use information from it to craft the structure of your webpart- in other words parts of your webpart would be outdated, some new and would overall crash it.

Replace the contents of your gulpfile.js file with this:

'use strict';

const build = require('@microsoft/sp-build-web');

build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
  var result = getTasks.call(build.rig);

  result.set('serve', result.get('serve-deprecated'));

  return result;
};

build.initialize(require('gulp'));

3. Run the ‘Npm I’ command to scaffold your project and re-create the two files you deleted with the new changes

Node Package Manager (Npm) i (install) installs the node modules and dependencies needed for your project.

4. Run the ‘gulp trust-dev-cert’ command in your terminal.

Congratulations, you’ve upgraded your webpart! Have fun using the new features of 1.12.1!

Upgrade Your Environment

If you want to stay on the latest updates and

1. Find which version of SPFx Yeoman generator you’re on

1.a Open Node.js command prompt and enter:

npm ls -g --depth=0 @microsoft/generator-sharepoint

Find out more here: https://tahoeninjas.blog/2019/07/09/how-to-tell-what-version-of-the-spfx-yeoman-generator-is-installed/

And what we want to do is take the SPFx package name ( which is generator-sharepoint in my case ) and upgrade the version with it.

2. You need to uninstall your current version using your SPFx package name and version. Here is the command:

npm uninstall @microsoft/{spfx-package-name}@1.11.0

For example, I filled in my SPFx package name and correct version like so:

( This will be the response you got when getting the version pared with npm uninstall )

npm uninstall @microsoft/generator-sharepoint@1.9.1

3. Next, we need to install the 1.12.1 version with the below command:

npm install @microsoft/{spfx-package-name}@1.12.1 --save --save-exact

Congrats, you’ve upgraded your environment! Now when you create a webpart it will be on the newest SharePoint version. Go ahead and use some PnP React controls such as the SitePicker or Accordion on the latest versions!

Find more in the SharePoint documentation: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/release-1.12.1