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;
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
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!!
Manpreet Singh7y ago
Bundle webparts JS files and then add
Vikas Mishra7y ago
Issue is still there.
Raghavendar Swaminathan7y ago
Hi Vikas,

Just add the below code snippet will resolve this issue.

import "@pnp/polyfill-ie11";