Introduction:
Recently working with Modern SPFx web part, we were facing issue specific to only IE11 browser and the same web-part is rendered correctly in Chrome, Firefox, Edge, and Safari browsers.
Error:
We were getting error - “Something went wrong” only in IE11 browser.
We tried to debug the written code using console and have addressed multiple errors like “undefined” and “syntax errors” by adding polyfill JS and fixed those issues, but still getting the same issue in IE 11.
After detailed analysis of the code, we have found that SPFx generates class in backend JS (ES6) as you can see in the below screenshot.
What is ES6?
ES6 refers to version 6 of the ECMA (European Computer Manufacturers Association) Script programming language. ECMA Script is the standardized name for JavaScript, and version 6 is the next version after version 5, which was released in 2011. It is a major enhancement to the JavaScript language, and adds many more features intended to make large-scale software development easier.
ECMAScript, or ES6, was published in June 2015. It was subsequently renamed to ECMAScript 2015. Web browser support for the full language is not yet completed, though major portions are supported. So, All major web browsers support some features of ES6. However, it is possible to use software known as a transpire to convert ES6 code into ES5, which has better supported on mostly all browsers.
Root cause:
This Modern SPFx web part generates ES6 features keyword like class, arrows, Destructuring, Unicode, promises, let, const, etc. Those ES6 features do not support in IE11 browser.
Solution:
In our SPFx web-part solution, we have “tsconfig.json” file and In that file, we have “target” property in “compilerOptions” object. We have set value “es6” in the “target” property. Thus, SPFx generates class, arrows, unicode, const, etc. keywords according to ES6 feature and those are not supported in IE 11 browser.
To resolve this issue, we need to downgrade “target” property from “es6” to “es5” value in “complierOptions” object.
After doing this change in “tsconfig.json” file, rebuild the web-part and deploy latest package on App catalog. SPFx webpart will be working in IE 11 browser.
Below table shows which browser supports which ECMAScript feature.
Browser | ES5 (Browser Version) | ES6 (Browser Version) | ES7 (Browser Version) |
Chrome | Yes (23) | Yes (23) | Yes (68) |
Firefox | Yes (21) | Yes (54) | No |
IE | Yes (9*) | No | No |
Edge | Yes (10) | Yes (14) | No |
Safari | Yes (6) | Yes (10) | No |
Opera | Yes (15) | Yes (38) | Yes (55) |
No comments:
Post a Comment