One of the common challenges I encounter when working with SPFx components is that the app doesn’t work with IE11 as expected even though it works fine with other browsers. This has delayed many of my projects and puts a lot of risk on production releases. Hence in this blog, I will try to call out some of the challenges that we might run into when deploying complex SPFx components in IE11 and other older browsers, and some workarounds/rectifications for the same.
Limitations and Challenges
To start with, lets’ start with some of the limitations for the complex components in older browsers.
- SPFx webparts are heavily dependant on client browsers and run in an isolated environment, so need to plan effectively for heavier data loads. For example, if you are retrieving 1000s of records from a SharePoint list, it would be recommended to page them in smaller datasets while rendering them, so the browser memory can handle it.
- SPFx webparts with React mostly use Promises and Async/Await functionality when used with third-party libraries such as PnPJS. The async/await are a great feature and compatible with ES6 and above. The older browsers such as IE11 cannot work through this delegation.
- The older browsers cannot handle promise chaining effectively which sometimes drops the delegate calls in progress. Hence the easier approach for planning the Promises call is to use them in sequence and not chaining for more than three levels. A brief example is below.
- Memory management in IE 11 and some older browsers are not effective for large and complex operations (click here). Hence the effective way would be to use light weight classes and paging to pull data when required. For large datasets use paging to get the data in batches.
How to make it work with IE11?
In order for the solution work on IE11, below are few workarounds and recommendations for the same.
1. Use of IE 11 polyfill for PnPJS library. The polyfill allows to load the missing libraries before calling the dependant calls. However there could be risks as the polyfill library loads the scripts which are not included as part of PnPJS library. More details could be found here.
2. Use SPHttpClient and HttpClient. The SPHttpClient and HttpClient are core libraries of SPFx and will work fine on IE 11. Elio Struf has a quick blog on the same which talks about the both methods. Also below are quick examples of each call and usage with payload handling for request and response.
Get Operation
Add Operation
3. Avoid using Async/Await calls to minimal usage. Use ‘then’ calls and resolve calls using the response as shown above.
4. Use Ajax calls for data change calls with success and failure handlers. This is an old way of doing this but works fine with old browsers.
5. Beware when using data intensive calls such as Search and Taxonomy models with PnPJs. Use SharePoint REST calls and handle the Response JSON. We will look at it in another blog.
Conclusion
The older browsers will always create challenges with data modelling and solution development if not planned ahead of time. The golden rule is to consider browser compatibility requirements for the solution before starting any development. This will help and save lot of pain later.