Why your SPFx is not loaded on your page in IE 11?

I’m a big fan of the SharePoint Framework and especially when it comes to custom development within SharePoint Online. SPFx (abbreviation of SharePoint Framework) allows you to develop some great applications in no time. With the available libraries, snippets and code examples the development time will be become shorter.

Sometimes we have some unpleasant problems when you are working with SPFx and IE. One of the problems that I had, with my customer today, is that the SPFx not loaded on the page in the IE browser. The customer’s employees are working with IE because it still has the best compatibility with other Office client applications. But for my SPFx it was not a good match, because my webpart was not working for them.

This is a major issue for my customer, because certain functionalities of the solution will not work in IE. So the portal that we build was at this point not ready to use.

From problem to solution!

After some research on the world wide web I found some articles that say this

“Some libraries in the newest versions of SPFx has functionalities that are not supported within older browsers”

This means that my SPFx will not work with IE 11. After searching for more information about this problem I came with a solution with the name Polyfills.

What is Polyfill?

A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, as a developer, would expect the browser to provide natively. Flattening the API landscape if you will.

Solution?

There are two solutions for this problem:

1. Embed the following script on your page the following script-tags in the head of the HTML page (Page lay-out) or in the script editor on the page.
   <script src="https://cdn.polyfill.io/v2/polyfill.min.js?callback=stuffisloaded&features=es6,fetch,Map&flags=always,gated"></script>
2. Add the following imports to your main.ts in the SPFx solution.
   import “core-js/es6/array”;
   import “es6-map/implement”;
   import “core-js/modules/es6.array.find”;

Conclusion

Think about which browsers have to be supported by your webpart and ask the customer what the commonly used browser is in the organization.

Then, if they would like to support older or not updated browsers, you must make sure that you use pollyfils in your solution to make sure your webpart will work in the older browsers.