Article
0 comment

Disable IE 11 support for SharePoint Framework Projects

Suppose you have great customers like I have that do not rely on IE 11 anymore. There is no time to wait to make the web parts and extension only work in true modern browsers.
The switch you have to make it simple and in seconds, even for older projects. When you created a new project and run the first build, the code output in your lib folder would look similar to this.

Default TypeScript compiled web part code

The TypeScript configuration in your SharePoint Framework project is responsible for going the extra mile to make sure your code works on IE11. To drop the support for this Browser, all needed is a slight change of the tsconfig.json file.

{
  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.7/includes/tsconfig-web.json",
  "compilerOptions": {
    "target": "es5",
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "outDir": "lib",
    "inlineSources": false,
    "..."
}

This source code is how the regular ‘tsconfig.json’ look at the root of your project. The important piece here is the target. You can change it from target: "es5" to be “es6”, aka ECMAScript 2015 (ES6) or “esnext” for the latest version of JavaScript.

{
  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.7/includes/tsconfig-web.json",
  "compilerOptions": {
    "target": "esnext",
    "..."
}

Now the transpiled code looks like this.

R.I.P IE11 compiled code

TypeScript will still perform the type checking, but the “compilation” or “transpilation” might be faster. Especially no extra legacy junk is in your web parts, at least in the case of code anymore. While the web part still renders in the same way.

RIP IE11 rendered web part

Let’s give it a try and let me know what you think.

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.