Fix IE 11 polyfill on Sharepoint

Winter Wang -

While integrating a ReactJS Web App into Sharepoint Web Parts, I got this error on IE 11 after deployment.

***Failed to load URL '***_6300b22557108fe7b4c5e8f8cdc77706.js' for resource '***' in component '7b578ed0-1ea1-4466-961d-069c6562c8d3' (***). There was a network problem. This may be a problem with a HTTPS certificate. Make sure you have the right certificate.
***CALLSTACK:
Error
   at t._generateErrorStackForIE (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-10-18.027/isolated-web-part-application-assembly_default_2807221fbe52cb2f0546994ec592e3ef.js:2:53807)
   at t (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-10-18.027/isolated-web-part-application-assembly_default_2807221fbe52cb2f0546994ec592e3ef.js:2:53343)
   at t (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-10-18.027/isolated-web-part-application-assembly_default_2807221fbe52cb2f0546994ec592e3ef.js:18:101850)
   at e.buildErrorWithVerboseLog (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-10-18.027/isolated-web-part-application-assembly_default_2807221fbe52cb2f0546994ec592e3ef.js:18:111543)
   at e.buildLoadComponentError (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-10-18.027/isolated-web-part-application-assembly_default_2807221fbe52cb2f0546994ec592e3ef.js:18:107568)
   at Anonymous function (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-10-18.027/isolated-web-part-application-assembly_default_2807221fbe52cb2f0546994ec592e3ef.js:18:98062)
   at Anonymous function (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-10-18.027/isolated-web-part-application-assembly_default_2807221fbe52cb2f0546994ec592e3ef.js:1:16179)
   at F (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-10-18.027/isolated-web-part-application-assembly_default_2807221fbe52cb2f0546994ec592e3ef.js:1:16155)
   at C (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-10-18.027/isolated-web-part-application-assembly_default_2807221fbe52cb2f0546994ec592e3ef.js:1:16000)
   at B (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-10-18.027/isolated-web-part-application-assembly_default_2807221fbe52cb2f0546994ec592e3ef.js:1:15588)

The error message is confusing and related to many different issues.Because I hadn't setup my Windows development enviroment, I had to debug line by line and deploy numerous times to find out what's wrong.

After hours' debugging, it turns out that I have to replace react-app-polyfill with @pnp/polyfill-ie11[1]. Previously I added react-app-polyfill to fix issues on IE 11. It seems it clashes with @pnp/polyfill-ie11.

Now my Windows dev enviroment was setup, I just tried to reproduce this with the hosted workbench[2], in the hope that I can get more usefull error message, here is what I got:

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

[SPLoaderError.loadComponentError]:
***Failed to load component "7b578ed0-1ea1-4466-961d-069c6562c8d3" (***). Original error: ***Failed to load entry point from component "7b578ed0-1ea1-4466-961d-069c6562c8d3" (***). Original error: Error loading https://component-id.invalid/7b578ed0-1ea1-4466-961d-069c6562c8d3_0.0.1
 Cannot redefine non-configurable property 'startsWith'

***INNERERROR:
***Failed to load entry point from component "7b578ed0-1ea1-4466-961d-069c6562c8d3" (***). Original error: Error loading https://component-id.invalid/7b578ed0-1ea1-4466-961d-069c6562c8d3_0.0.1
 Cannot redefine non-configurable property 'startsWith'
***CALLSTACK:
Error
   at t._generateErrorStackForIE (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-10-18.027/sp-webpart-workbench-assembly_en-us_4a8aa8bc51f92bb9f7fe88b4c9c6ca37.js:4:53807)
   at t (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-10-18.027/sp-webpart-workbench-assembly_en-us_4a8aa8bc51f92bb9f7fe88b4c9c6ca37.js:4:53343)
   at t (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-10-18.027/sp-webpart-workbench-assembly_en-us_4a8aa8bc51f92bb9f7fe88b4c9c6ca37.js:20:103060)
   at e.buildErrorWithVerboseLog (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-10-18.027/sp-webpart-workbench-assembly_en-us_4a8aa8bc51f92bb9f7fe88b4c9c6ca37.js:20:112753)
   at e.buildLoadComponentError (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-10-18.027/sp-webpart-workbench-assembly_en-us_4a8aa8bc51f92bb9f7fe88b4c9c6ca37.js:20:108778)
   at Anonymous function (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-10-18.027/sp-webpart-workbench-assembly_en-us_4a8aa8bc51f92bb9f7fe88b4c9c6ca37.js:20:99272)
   at Anonymous function (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-10-18.027/sp-webpart-workbench-assembly_en-us_4a8aa8bc51f92bb9f7fe88b4c9c6ca37.js:1:16168)
   at F (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-10-18.027/sp-webpart-workbench-assembly_en-us_4a8aa8bc51f92bb9f7fe88b4c9c6ca37.js:1:16144)
   at C (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-10-18.027/sp-webpart-workbench-assembly_en-us_4a8aa8bc51f92bb9f7fe88b4c9c6ca37.js:1:15989)
   at B (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-10-18.027/sp-webpart-workbench-assembly_en-us_4a8aa8bc51f92bb9f7fe88b4c9c6ca37.js:1:15577)

  1. https://social.technet.microsoft.com/wiki/contents/articles/53266.sharepoint-framework-ie-11-polyfilling-with-pnp.aspx ↩︎

  2. https://docs.microsoft.com/en-us/sharepoint/dev/spfx/debug-in-vscode#debug-solution-using-hosted-workbench ↩︎