Upgrades – Webpart and Environment

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;


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/

This will give you your environment version:

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

44 responses to “Upgrades – Webpart and Environment”

  1. Oralia Rush Avatar

    Thanks for your help and for posting this. It’s been great.


  2. Curso Design de Estampas Estampaweb Marco Lang Avatar

    Thanks for another informative blog. Where else could I get that type of information written in such a perfect way? I have a project that I am just now working on, and I have been on the look out for such info.


  3. Milda Paliotta Avatar

    Thanks for your post, it helped me a lot. It helped me in my situation and hopefully it can help others too.


  4. Ward Godbolt Avatar

    You helped me a lot by posting this article and I love what I’m learning.


  5. Brigitte Caravalho Avatar

    Thanks for your help and for writing this post. It’s been great.


  6. fabcouture Avatar

    I have been surfing online more than 3 hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. Personally, if all website owners and bloggers made good content as you did, the internet will be much more useful than ever before.


  7. despedidasgranada.es Avatar

    I think other web site proprietors should take this site as an model, very clean and excellent user friendly style and design, as well as the content. You’re an expert in this topic!


  8. Rosalia Tuccillo Avatar

    Thanks for your help and for posting this. It’s been great.


  9. zoritoler imol Avatar

    I am lucky that I noticed this weblog, precisely the right information that I was searching for! .


  10. online medicine tablets shopping Avatar

    My spouse and I stumbled over here from a different page and thought I should check things out.
    I like what I see so now i am following you. Look forward
    to looking over your web page yet again.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: