In today's world, we have many browsers available. When a new functionality is deployed, we want to make sure it is tested and working in the browsers. This is a very challenging task indeed. Browsers such as IE pose a challenge on rendering the functionality. In this blog, we are going to see one of the ways of making it work.
There can be many ways for resolving browser specific issues. We have to try to use the best one. I had my functionality up and running in Chrome Browser. But it was not working in IE. After analysis, I found out that there was a dependent library whose specific feature was not supported by the browser. I resolved this issue, by using polyfills.
A polyfill is a piece of code used to provide modern functionality on older browsers that do not natively support it. It provides the technology that we expect the browser to provide natively.
Let’s take an example of the below error.
Error Message
Object doesn't support property or method 'findIndex'
Environment
IE Browser, SharePoint, SPFx solution
findIndex() method is not supported by the IE browser. The method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed.
To resolve the issue, create a Polyfill.js file and add the findIndex function, refer the polyfill.js in the main tsx file.
Another alternative is to install the package in the solution using the below command and import it the main tsx file.
npm install --save @pnp/polyfill-ie11
import "@pnp/polyfill-ie11";
Test the functionality and see if it is getting rendered in the browser.