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

Question

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

Vignesh Ganesan · Answer

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 Swaminathan · Answer

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 Mishra · Answer

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 Singh · Answer

Bundle webparts JS files and then add

Vikas Mishra · Answer

Issue is still there.

Raghavendar Swaminathan · Answer

Hi Vikas, Just add the below code snippet will resolve this issue. import "@pnp/polyfill-ie11";