Working with PNP JS Core on IE

Image Title

posted by Khoa Quach
on Oct 18, 2018

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.

PNP JS 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 JS Core. 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.

PNP JS Core

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:

PNP JS Core

 

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’);

***

[Read more: Using PowerShell and PnP with Azure Automation]

NIFTIT is a development and design agency in New York, Vietnam & Hong Kong. We are dedicated to empowering businesses of all sizes and non-profit organizations through nifty solutions. Our team develops customized solutions according to the best business practices in the industry. In our weekly blog, we provide the latest news and useful technical blogs about SharePoint, Office 365 and Power BI. Don’t hesitate to subscribe to our newsletter!