Using Polyfills for IE11 in SharePoint Framework (SPFx) Solutions with PnPjs

I see a lot of people getting stuck on this. There are many posts in many forums saying something like:

Hi,
[some code] not working in IE11. In chrome& Edge its working fine below is my code:

…

This is most often in the context of using PnPjs, but sometimes in other cases.

If you find that your code is running in every browser except IE, you most likely need polyfills to make your code work. If you are NOT targeting IE11, then you do not need these polyfills.

Better yet, switch to a more modern browser. But I know that isn’t always possible.

Polyfills are a fairly well-known JavaScript method of “filling in” capabilities your current browser doesn’t have that your code needs. We’ve been using them for many years – especially with IE – for browser versions which don’t yet have a capability we’d like to use. If you’re a server side dev getting rolling with SPFx, you might not be as familiar with the idea.

Note: There’s a great site called Can I Use ________? where you can check to see if a capability exists in particular browsers.

In web development, a polyfill is code that implements a feature on web browsers that do not support the feature. Most often, it refers to a JavaScriptlibrary that implements an HTML5web standard, either an established standard (supported by some browsers) on older browsers, or a proposed standard (not supported by any browsers) on existing browsers. Formally, “a polyfill is a shim for a browser API“.^[1]

https://en.wikipedia.org/wiki/Polyfill_(programming)

If your code is not working – but only in IE – head over to the Polyfill page at PnPjs for the instructions.

Here’s the Cliffs Notes version:

Install

npm install --save @pnp/polyfill-ie11

Use

import "@pnp/polyfill-ie11";
import { sp } from "@pnp/sp";

sp.web.lists.getByTitle("BigList").items.filter(`ID gt 6000`).get().then(r => {
  this.domElement.innerHTML += r.map(l => `${l.Title}<br />`);
});