🙏 SPFx v1.15 - please change default config to at least compile TS to ES6+

[andrewconnell]

What type of issue is this?

Question

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Target SharePoint environment

SharePoint Online

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [ ] 💥 Microsoft Edge
• [ ] 💥 Google Chrome
• [ ] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [X] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

• browser n/a
• SPFx v1.15
• Node.js v16

Issue description

SPFx v1.15 projects transpile TypeScript => ES5 (from 2009!). This is only necessary to support older browsers that don't support ES6. Since SPFx v1.15 only works in SPO, and since M365 no longer supports IE11, there's no need for this extra bloat in our generated bundles.

ES6 is supported on all M365 supported browsers.

Proposed change

Modify the existing ./tsconfig.json from...

{
  "extends": "./node_modules/@microsoft/rush-stack-compiler-4.5/includes/tsconfig-web.json",
  "compilerOptions": {
    "target": "es5",
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    ...
  }
}

... to the following:

{
  "extends": "./node_modules/@microsoft/rush-stack-compiler-4.5/includes/tsconfig-web.json",
  "compilerOptions": {
    "target": "es6",
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    ...
  }
}

BTW, this has no impact on my other issue about the ESLint rule for async/await (ref #8260)

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[AJIXuMuK]

Thanks @andrewconnell for bringing this up! We have some internal dependencies that slow down this kind of upgrade. But we're actively working on it.

[andrewconnell]

If you’re actively working on it, then why was this issue closed?

[mikevasiloff]

@AJIXuMuK / @VesaJuvonen, do these "internal dependencies" still exist such that this cannot be completed?

[AJIXuMuK]

@mikevasiloff - yes, they still exist. Unfortunately, for now there is no ETA for the update to ES6

[Tanddant]

@AJIXuMuK Are there any known issues from me just upgrading my project manually?

We're reviewing some internal best practices, and we've always said "leave the target as is" - but is there any reason I shouldn't bump it?

[AJIXuMuK]

@Tanddant - you can go and experiment with that. We don't list it as supported, meaning if anything goes wrong with your app - we're not responsible for the issues in that case.

[pyromad13]

Hi @AJIXuMuK is there any update around supporting ES6 on SPFX ? thanks legend @andrewconnell for bringing this up.

[anthonywhite]

I would like to register my interest in this question posed by @andrewconnell and the others above.

Is there any substantial reason/risk not to change to es6 target? Is this still being "actively" worked on 18 months later?

[ynot3363]

+1 would love to see support for es6.

[parekhs-deshaw]

+1 here, we're nearing the 2 year anniversary of this issue. Will this be released in 2024?

[SharePickle]

+1, please consider upgrading SPFx

[StfBauer]

Just change it to this today. I don't like to live that old in the past. Still will extensively test it on on of the upcoming pnp projects.

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

    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@microsoft"
    ],
    "types": [
      "webpack-env"
    ],
    "lib": [
      "esnext",
      "dom"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ]
}

[SharePickle]

Just change it to this today. I don't like to live that old in the past. Still will extensively test it on on of the upcoming pnp projects.

I can't make it work with localization files. Having two web parts using same localization file from a library breaks one of them. Localization doesn't load and I'm getting undefined instead.

[StfBauer]

@SharePickle Thanks for the hint - I will use it as and will take a close look at it.