Working with PNP JS Core on IE

If you have followed some of my previous posts, then you might already know that I am a big fan of Pnp for SharePoint. The utilization of JavaScript within SharePoint has become increasingly important throughout the past several years, which led me to make the conversion to the new ES6 syntax over time.

Once you start using ES6 and the PNP JS Core Library, your development time can be considerably reduced. This is because there are some great methods and shortcuts that are a result of combining both technologies

One time saver that I often end up re-using is the arrow functions from ES6 and the Promise style calls from the PNP Core.

A typical and simple call using ES6 and PNP core JS library

These work great on Chrome, Firefox, and Edge, but for backward compatibility onIE11, we will need to add a few more libraries and make additional changes.

The Elephant in the Room

As you probably know, arrow functions are not supported by IE, so if we want to use the same code on this browser, we have two options:

1. We rewrite all those arrow functions into the previous function() method, which works but is counter-productive
2. We use Babel to compile our ES6 code into valid functions/methods understood by IE11

I prefer the second option as it does not require any rewriting of our main code. So, if you previously had something like this in your code:

<script type=”text/javascript” src=”scripts.js” />

Then you will need to transform it to the following:

<script type=”https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js” />

<script type=”text/babel” src=”scripts.js” />

Note that we are using the STANDALONE version of Babel as we don’t need the other dependencies while working in SharePoint. Moreover, note that we changed the type “text/javascript” to “text/label” from our main JS resource.

I Still Get Errors

The second part of the fix is a bit easier because it requires bringing together three JS libraries that will help IE cope with Promise features from the PNP Core JS. Simply add the below:

<script src=”https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.0.0/es6-promise.min.js"></script>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.4/fetch.min.js"></script>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/js-polyfills/0.1.42/polyfill.min.js"></script>

It Works in IE

Great, you should now be able to see your script working on IE! But what about the other browsers? Well, we are going to need to optimize the call of the scripts so that we don’t call all of the resources we don’t need.

In order to do that, we are going to write a conditional statement to check the navigator and detect IE11. If the browser is indeed IE11, then we will get the Babel standalone script, the Promise script, poyfill, fetch, and our script.js in the Babel type.

If the browser is not IE, then we simply need to get the regular script.js loaded.

Here is how the code would look:

Or copy from here:

<! — Load jquery and pnp →

<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/3.0.10/pnp.min.js"></script>

<script type=”text/javascript”>

if(navigator.userAgent.match(/Trident\/7\./)) {

$.getScript(‘https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js');

$.getScript(‘https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.0.0/es6-promise.min.js');

$.getScript(‘https://cdnjs.cloudflare.com/ajax/libs/js-polyfills/0.1.42/polyfill.min.js')

$.getScript(‘https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.4/fetch.min.js')

document.write(‘<script type=”text/babel” src=”script.js” />’)

} else {

$.getScript(‘script.js’);

***

Here at NIFTIT, from Office 365 consulting to SharePoint solutions, we can handle projects of any size and difficulty. We follow industry standards and best practices to build world-class solutions. learn more about our office 365 support here!