SPFx 1.22.0-rc.0 - Community Feedback

[nick-pape]

Please use this post as an aggregated discussion place for ideas and feedback that don't necessarily warrant an Issue ticket.

Changes in the RC

• We bring back the lib-commonjs build output, and switch the lib/ back to ESM (to support webpack chunking). The lib-commonjs exists as a target for jest tests.
• Fixes an issue where typescript version is overwritten during eject.
• Fixes incorrect @rushstack/heft peer dependency issue.

Other notes

• We are aware that ESLint 8 is deprecated. We've upgraded our internal repository to use ESLint 9. SPFx 1.23 with Heft will include the ESLint 9 upgrade; however, the current plan is that the Gulp-based toolchain will remain on ESLint 8.
• SASS Sourcemaps are not currently supported by Heft SASS plugin at this time. We will work to get this added to Heft, and it will be included in 1.23 release.

Prior feedback posts:

• 1.22.0-beta.5
• 1.22.0-beta.4
• 1.22.0-beta.3

[andrewconnell]

TL;DR: Move eslint config ▶ spfx-web-build-rig

Since we now have a build configuration refactored into a rig, with its own configurations for things like:

• ./tsconfig.json extending ▶ *./node_modules/@microsoft/spfx-web-build-rig/profiles/default/tsconfig-base.json
• ./config/sass.json extending ▶ @microsoft/spfx-web-build-rig/profiles/default/config/sass.json**
• ./config/typescript.json extending ▶ @microsoft/spfx-web-build-rig/profiles/default/config/typescript.json

... how about new SPFx projects use the same approach for ./.eslintrc.js?

proposal ▶ move ESLint config to SPFx rig

1. copy ./.eslintrc.js ▶ *./node_modules/@microsoft/spfx-web-build-rig/profiles/default/.eslintrc.js

   not very important, but it could go in the config subfolder with other heft plugin configurations...

2. update existing ./.eslintrc.js config to extend from rig's config so it only contains:

   require('@rushstack/eslint-config/patch/modern-module-resolution');
   module.exports = {
     extends: [./node_modules/@microsoft/spfx-web-build-rig/profiles/default/.eslintrc.js],
     parserOptions: { tsconfigRootDir: __dirname }
   };

benefits

• future updates to the rig package update the ESLint rules without requiring someone to update the actual rules in their existing projects
• customers can apply their own overrides array property to the existing rules...
• ... and future rig updates won't impact their overrides

Inspired by my original article: How to set up reusable ESLint configs for SharePoint Framework (SPFx) projects