Error in SPFX webpart in IE browser but its working in Edge

Vikas Mishra

Hi There,

I have a SharePoint clasic page and in that i have added some SPFX webparts which is working fine in Chrome and Edge but its not loading in IE browser .

When we try to open in IE its giving below error

Something went wrong

If the problem persists, contact the site administrator and give them the information in Technical Details.

[SPLoaderError.loadComponentError]:

***Failed to load component "ff816a51-daba-41ac-9ec7-e7e1f0829353" (LeadershipWebPart).

Original error: ***Failed to load entry point from component "ff816a51-daba-41ac-9ec7-e7e1f0829353" (WebPart).

Original error: Error loading https://component-id.invalid/ff816a51-daba-41ac-9ec7-e7e1f0829353_0.0.1

Out of stack space

Kindly let us know if any other input required.

Kindly suggest some workaround to get rid of this issue.

Thanks in advance!!

Regards,

Vikas Mishra

6 Replies

Know the answer? Post it — somebody with the same question will find it here.

Vignesh Ganesan7y ago
Add the below code in your WebPart as Polyfills.ts file

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/weak-map';
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'classlist.js';
import '@webcomponents/custom-elements/src/native-shim';
// Check for native support of Map vs Polyfill
if(Map.toString().indexOf('function Map()') === -1)
{
Map = undefined;
}
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/reflect';
export class Polyfills {
}

1. Run the below command
npm install core-js

2.Import the Polyfills file in your WebPart.ts file.

3.Import the below code in WebPart.ts file.
import 'core-js/es7/reflect';

4.Paste the below code in the render part of the WebPart.ts file

window['polyfills'] = Polyfills;
+1
Raghavendar Swaminathan7y ago
Hi Vikas,

Could you please delete the exisitng webpart which you added to the page & can you recheck it once. Try clearing the cache & open the same thing inprivate browsing.

If still facing the issue we need to analyse.

Thanks
Raghav
+1
Vikas Mishra7y ago
Hi Manpreet/Raghavendar,

Thanks for your suggestion but could you please eloborate it more.

I have added this import "@pnp/polyfill-ie11 in webpart.ts page and run following cmd
gulp clean
gulp build
gulp bundle --ship
gulp package-solution --ship

Then uploaded package file in App catalog and uploaded js resorces on siteassets from Dist/temp file.

But after apply this its not working for chrome also (for that webpart).

Kindly let me know if i am doing anything wrong ..

Note : Previously it was working fine but approx. one month back its stoped on IE but working fine in Chrome and firefox. Webpart is using angular 2.

Thanks!!
+1
Manpreet Singh7y ago
Bundle webparts JS files and then add
+1
Vikas Mishra7y ago
Issue is still there.
+1
Raghavendar Swaminathan7y ago
Hi Vikas,

Just add the below code snippet will resolve this issue.

import "@pnp/polyfill-ie11";
+1