Sp-dev-docs: spfx webpart does not work on ie11

Created on 31 Aug 2018 · 14Comments · Source: SharePoint/sp-dev-docs

Most helpful comment

You need to use Pollyfills for the web part to work in IE11. This is down to the newer pnp libraries which use JS functions not supported by IE11. If you add the below imports to your main .ts file it should correct the issue on IE.
//Polyfills to fix IE11 compatibility issues

import "core-js/es6/array";

import "es6-map/implement";

import "core-js/modules/es6.array.find";

mag210 on 18 Oct 2018

👍5

All 14 comments

I think the method 'requestAnimationFrame' is from a JS or component. You must refer it through by following ways. The first one is bundle the JS or component code to your code. the second way is refering it from CDN. it is difficut to debug this problem using IE Browser, because any js error will stop code running, chrome will be helpful to debug it.

Alex-Ji on 31 Aug 2018

Thanks Alex for the reply.

There is no error showing up in chrome or other browsers.

I have tried using CDN and without referring CDN. Also tried bundling the JS but nothing worked.

Even a simple helloworld webpart without any JS does not show up on ie.

I am using ie 11.

I can open workbench in ie and view the webpart. But after deploying the solution it shows the error.

NishaJose on 3 Sep 2018

@NishaJose I have the same problem with a webpart I've built using spfx 1.6. An older webpart (using 1.3) does not have this issues. The webpart works fine on all other browsers I have tested (chrome, FF, Edge) but on IE 11 it will not fetch data (pnp call). Also when you try and edit the web part in the property pane, you find that many of the options just do not work.

mag210 on 25 Sep 2018

Hi, I upgraded a webpart from 1.4. to 1.6. Works fine in chrome, but in IE 11 it wont even load in the workbench. Is anyone working on this, or should I revert to 1.4?

russgove on 17 Oct 2018

import "core-js/es6/array";

import "es6-map/implement";

import "core-js/modules/es6.array.find";

mag210 on 18 Oct 2018

👍5

Workbench won't load in IE11. It shows blank screen.
When you load workbench with developertools, it shows an error on handleFailure (object does not exist).
Importing the above mentioned polyfills won't work (they will work for pnpjs implementations).

Newly generated SPFx without added code is just broken for IE11 in the local workbench. It does work if you use the workbench in O365 (/layouts/workbench.aspx)

Issue is in sp-loader-assembly_default.js

if (!preloadedData || !preloadedData.spPageContextInfo) {
var error = new Error(SPLoader_resx["a" /* default /].invalidPreloadedDataError);
handleFailure({
error: error,
message: SPLoader_resx["a" / default */].loaderUserFriendlyError,
operationName: 'InvalidPreloadedData'
});
return Promise.reject(error);
}

ErnstWolthaus on 30 Nov 2018

@NishaJose
A customer of mine was having this exact issue when loading their SPFx webpart in IE11.

When looking at the MDN browser compatibility table for 'window.requestAnimationFrame', it shows full support for IE10+.

My customer was running IE11 with the document mode set to 8. This was their issue. You can check your document mode in the IE dev tools under the emulation tab. Additionally, you can type 'window.requestAnimationFrame' in the console to see if the Function is returned. If it's not returned, that's an indicator that your DocMode is below 10.

Going further, these IE settings are generally set at an organization level to provide backwards compatibility for legacy web tech. Leveraging the Enterprise Mode Site List in IE11 will let IE know that it always needs to render pages in Document Mode 11 for SharePoint, if configured correctly.

zakbelmaachi on 13 Dec 2018

You need to use Pollyfills for the web part to work in IE11. This is down to the newer pnp libraries which use JS functions not supported by IE11. If you add the below imports to your main .ts file it should correct the issue on IE.
//Polyfills to fix IE11 compatibility issues

import "core-js/es6/array";

import "es6-map/implement";

import "core-js/modules/es6.array.find";

This is worked for me. Thank you

amolkhedekar01 on 11 Apr 2019

You need to use Pollyfills for the web part to work in IE11. This is down to the newer pnp libraries which use JS functions not supported by IE11. If you add the below imports to your main .ts file it should correct the issue on IE.
//Polyfills to fix IE11 compatibility issues
import "core-js/es6/array";
import "es6-map/implement";
import "core-js/modules/es6.array.find";

This is worked for me. Thank you

Where is the .ts file?

jduboi on 17 May 2019

You need to use Pollyfills for the web part to work in IE11. This is down to the newer pnp libraries which use JS functions not supported by IE11. If you add the below imports to your main .ts file it should correct the issue on IE.
//Polyfills to fix IE11 compatibility issues
import "core-js/es6/array";
import "es6-map/implement";
import "core-js/modules/es6.array.find";

This is worked for me. Thank you

Where is the .ts file?

You can just add that to the main webpart .ts file.
On the other hand, I had the same issue. You can just following the official polyfill described here. It should work and fix the >IE11 compatibility issue.

holylander on 27 May 2019

First, please refer to the recently published browsers supported doc for IE11 here: https://support.office.com/en-us/article/Which-Browsers-Work-With-Office-Online-AD1303E0-A318-47AA-B409-D3A5EB44E452

After reviewing, if you are still having an issue, seems it's an issue with how IE11 implements the RAF function. There are lots of posts about this not specific to SPO/SPFx, and as mentioned in this thread, a polyfill may be needed.

andrewconnell on 9 Aug 2019

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within next 7 days of this comment. Thank you for your contributions to SharePoint Developer activities.

msft-github-bot on 16 Aug 2019

Closing issue due no response from original author. If this issue is still occurring, please open a new issue with additional details. Notice that if you have included another related issue as additional comment on this, please open that also as separate issue, so that we can track it independently.

msft-github-bot on 24 Aug 2019

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues

msft-github-bot on 26 Jan 2020

Was this page helpful?

0 / 5 - 0 ratings