Update Challenges With npm Packages For SharePoint Framework

Overview

 

SharePoint Framework (SPFx) supports modern development toolchain, which utilizes various npm packages to build the solution. Updating the npm packages to the latest version is important to get benefits of the latest and greatest features offered by that npm package.

 

This article is not only specific to the npm package update with SharePoint Framework scenario but can be used generically.

 

Need for npm package update

 

The npm packages get updated by the vendor based on user feedback and issues raised at times. Also, to start using newer capabilities and functionalities offered by npm package, it is important to update ourselves to the newer npm package version.

 

One common scenario for needing an npm package update is the updates to SharePoint Framework version itself. Microsoft releases a new version of SharePoint Framework with new capabilities, bug fixes, etc. The updates are not too frequent always, but they get released at regular intervals, which is a good thing. Eventually, we have to move towards using a new SharePoint Framework version.

 

One point to note here is that not all the package versions are compatible with each other. Therefore it is important to understand the npm package dependencies and then plan the update accordingly.

 

NPM package Update

 

To find out the outdated npm packages, run the below command.

 

npm outdated --global

 

This will list the packages which need an update. To update the individual package, run the below command.

 

npm update -g <package-name>

 

This is an ideal scenario. However, in the real case, we may face challenges getting the outdated npm packages.

 

Challenges with npm update

 

There have been a few challenges recently with npm to find out the outdated packages. The npm outdated command fails to get the outdated packages. The error will say: Cannot read property 'length' of undefined.

 

 

The complete error log is available at the mentioned location under AppData\Roaming\npm-cache\_logs. However, it does not help to clearly understand the exact cause of the issue and its resolution.

 

 

Although npm fails to list out the outdated packages, if you know the name of the npm package to update, you can still use “npm update” command to update that specific npm package.

 

Option 1: Update npm

 

The easy and first option is to update the npm. Run the below command to update the npm.

 

npm i -g npm

 

Option 2: Reinstall Node

 

If updating the npm does not work, the second option is to uninstall and reinstall Node. Please install node version 8.x since SharePoint Framework only supports Node version 8.x.

 

Option 3: Edit npm configuration

• The npm packages installed globally are available at “C:\Users\<user-name>\AppData\Roaming\npm\node_modules\”. 
• Manually edit the "lib/outdated.js" file located at the "npm/node_modules/npm" path. (E.g. C:\Users\nachanan\AppData\Roaming\npm\node_modules\npm\lib\outdated.js)
• Update makePretty function as highlighted below.

 

Run the “npm outdated” command again to see the outdated packages.

 

 

Summary

 

It is important to update ourselves to newer npm package version to get the benefits of new enhancements, and bug fixes available as part of newer packages. Listing the outdated npm packages command might not work sometimes. This can be resolved by following any of the options mentioned in this article.