Wednesday, October 17, 2018

Using pnpjs v1.2+ with Internet Explorer 11

man and woman lit the two lighters they are holding

When pnpjs v1.2 was released the PnP team made a wise decision to remove support for IE11. The decision to drop support for IE11 means some of the functions will fail if you use pnpjs in for example a SharePoint Framework component, and the user is using Internet Explorer 11.

The direction is wise in my opinion because IE11 is 5(!) years old, and from a programmers perspective it lacks features you would expect on a modern browser. As an example, how old is your phone? Most likely the browser on your phone is a lot better than IE11. In this day and age 5 years is an eternity.

The issue comes down to several points:

  • Older windows versions have IE11 as the default browser
  • Your IT department might not want to support a 3rd party browser
  • If you are running Windows 10 (now 3 years old), IT might have kept IE11 as the default browser because it’s there
  • You have some legacy plugins or LOB application only working with IE11

All of these might be valid points, but if you have clout, push IT to rid themselves of IE11, and switch it out with Edge, Chrome, Firefox or some other browser.

Unfortunately, reality is that companies will continue to use IE11 as long as it’s shipped with Windows, so come on Microsoft – kill it already!

So how do you backwards proof your application if you are using pnpjs and IE11 is a requirement? Take a look at the updated official documentation https://pnp.github.io/pnpjs/documentation/polyfill/.

Previously you would have to add manual polyfills as mentioned in this github issue, but this is now made easier.

Add a reference to @pnp/polyfill-ie11 with install --save @pnp/polyfill-ie11, and anywhere in your code where you import pnpjs, add

import "@pnp/polyfill-ie11";

If using SearchQueryBuilder, then you need and additional import statement – but read the docs and you’ll be fine.

Photo by Element5 Digital at Unsplash.