SPFx 1.22.0-beta.5 - Community Feedback

[Nick Pape (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 this beta

• For projects generated with the Heft toolchain, upgrade TypeScript to ~5.8.0
  • Any version >4.4.0 resolves the infinite build loop on Mac OS issue.
• Adds support for --serve-config for extensions (renamed from --config)
• Fixes issues with incorrect debugging query string for extensions, causing them to not be loaded.
• Fixes issue with module.scss in Heft. These should now be treated correctly.
• Cleanup to SPFx API documentation (this will be visible in SPFx API documentation site shortly).

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.4
• 1.22.0-beta.3

[Nick Pape (nick-pape)]

There appears to be an issue with code splitting not occurring: #10448 (comment)

This can be resolved by adding

  "compilerOptions": {
    "module": "esnext"
  }

to the tsconfig.json.

We'll get the base config updated in next release.

[Tautvydas Duda (ltdu)]

Very low priority, but if tsconfig-base.json will be updated, please remove importsNotUsedAsValues compiler option.
It is already deprecated and prevents tsgo (future TypeScript 7) compiler from working:

[Nick Pape (nick-pape)]

We will consider this for the next release. Fair warning, it may be some time before SPFx officially supports tsgo.

[Andrew Connell (andrewconnell)]

When upgrading dependencies on an existing SPFx v1.21.1 project, unable to get TypeScript updated to v5.8.0 (to match a v1.22-beta.5 new project's deps).

context

• macos v26.1 (Tahoe)
• node v22.19.0

repro steps

1. ✅ create new SPFx v1.21.1 project (Web Part ▶ React)

2. ✅ uninstasll gulp toolchain

   npm uninstall @microsoft/sp-build-web ajv gulp
   
   # NOTE: uninstall any version of rush-stack-compiler present
   #  ... in v1.21.1 projects, that's v5-3
   npm uninstall @microsoft/rush-stack-compiler-5.3 

3. ✅ install heft toolchain

   # 1-line
   npm install @microsoft/spfx-web-build-rig@1.22.0-beta.5 @microsoft/spfx-heft-plugins@1.22.0-beta.5 @microsoft/eslint-config-spfx@1.22.0-beta.5 @microsoft/eslint-plugin-spfx@1.22.0-beta.5 @microsoft/sp-module-interfaces@1.22.0-beta.5 @rushstack/eslint-config@4.5.2 @rushstack/heft@1.1.2 @types/heft-jest@1.0.2 @typescript-eslint/parser css-loader@~7.1.2 --force
   
   # expanded multi-line
   npm install @microsoft/spfx-web-build-rig@1.22.0-beta.5 \
               @microsoft/spfx-heft-plugins@1.22.0-beta.5 \
               @microsoft/eslint-config-spfx@1.22.0-beta.5 \
               @microsoft/eslint-plugin-spfx@1.22.0-beta.5 \
               @microsoft/sp-module-interfaces@1.22.0-beta.5 \
               @rushstack/eslint-config@4.5.2 \
               @rushstack/heft@1.1.2 \
               @types/heft-jest@1.0.2 \
               @typescript-eslint/parser \
               css-loader@~7.1.2 \
               --force

   [!NOTE]
   only able to get these to install with --force due to lots of peer dep warnings & errors looking for older pre-v1 heft such as @microsoft/spfx-heft-plugins@1.22.0-beta.5:

   npm error peer @rushstack/heft@"^0.73.5" from @microsoft/spfx-heft-plugins@1.22.0-beta.5

4. ✅ manually add npm overrides to package.json for heft version

   {
     ..
     "overrides": { "@rushstack/heft": "1.1.2" }
     ..
   }

5. ❌ upgrade typescript

   fails due to peer dep on @rushstack/eslint-config@4.5.2

   npm i typescript@5.8.0 -DE

   error:

   npm error peer typescript@">=4.7.0" from @rushstack/eslint-config@4.5.2

[Nick Pape (nick-pape)]

Looks like the Heft peerDependencies weren't bumped in the beta packages. We'll get that fixed.

Not sure why you are getting an error on typescript with @rushstack/eslint-config@4.5.2. ~5.8.0 should be satisfying >=4.7.0.

[Andrew Connell (andrewconnell)]

Agreed... that's confusing to me as well... ¯_(ツ)_/¯

[Andrew Connell (andrewconnell)]

I know it's not recommended, but I noticed the eject-webpack command downgrades the version of TypeScript... is this intentional?

    "css-loader": "~7.1.2",
    "eslint": "8.57.1",
--  "typescript": "~5.8.0",
++  "typescript": "5.3.3",
    "@types/react": "17.0.45",
    "@types/react-dom": "17.0.17",
    "eslint-plugin-react-hooks": "4.3.0",

[Nick Pape (nick-pape)]

Interesting. Yes, the eject command tries to match dependencies of @microsoft/spfx-heft-plugins (the package that contains the eject command). That package itself is built with 5.3.3.

We'll get that fixed as well.

[Stefan Bauer (StfBauer)]

Should beta.5 have still deprecated pacakges?

npm warn config dev Please use --include=dev instead.
npm warn ERESOLVE overriding peer dependency
npm warn deprecated debuglog@1.0.1: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm warn deprecated readdir-scoped-modules@1.1.0: This functionality has been moved to @npmcli/fs
npm warn deprecated osenv@0.1.5: This package is no longer supported.
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated read-package-tree@5.1.6: The functionality that this package provided is now in @npmcli/arborist
npm warn deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm warn deprecated read-package-json@2.1.2: This package is no longer supported. Please use @npmcli/package-json instead.
npm warn deprecated @humanwhocodes/config-array@0.13.0: Use @eslint/config-array instead
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm warn deprecated domexception@4.0.0: Use your platform's native DOMException instead
npm warn deprecated adal-angular@1.0.16: This package is no longer supported. Please migrate to @azure/msal-angular.
npm warn deprecated eslint@8.57.1: This version is no longer supported. Please see https://eslint.org/version-support for other options.
npm warn deprecated @microsoft/teams-js@2.32.0: Package no longer supported. Use at your own risk

added 1567 packages, and audited 1568 packages in 55s

276 packages are looking for funding
  run `npm fund` for details

17 moderate severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

[Vesa Juvonen (VesaJuvonen)]

Stefan Bauer (@StfBauer) can you share details on what were the actions you did to get this output. We can't get the matching 17 moderate severity issues reported in the baseline testing, so would love to know how to get to the same status as you are showing here. Thx.

[Saurabh Tripathi (Saurabh7019)]

Is it intentional that heft eject-webpack removes config.json? Wouldn't this break the ability to add new components?

The toolchain documentation mentions that config.json 'has been eliminated' for external library configuration, but doesn't mention the impact on component scaffolding.

[Nick Pape (nick-pape)]

In the non-ejected toolchain the config.json drives the Heft plugins that create the webpack configuration. In ejected mode, (most) of that logic lives directly in the webpack config file. In there, you can find similar entries (i.e. bundles and localization variables) that would need to be edited to add new components.

[Nick Pape (nick-pape)]

We should make this clearer in the documentation Andrew Connell (@andrewconnell) Vesa Juvonen (@VesaJuvonen)

[Andrew Connell (andrewconnell)]

Nick Pape (@nick-pape) When the OP submitted this, the eject docs weren't avail... but they are now (not on the live site, but they were merged from the PR opened after the OP posted this question).

I believe the docs already address this, specifically in these parts:

• https://github.com/SharePoint/sp-dev-docs/blob/main/docs/spfx/toolchain/customize-heft-toolchain-eject-webpack.md?plain=1#L35-L39
• https://github.com/SharePoint/sp-dev-docs/blob/main/docs/spfx/toolchain/customize-heft-toolchain-eject-webpack.md?plain=1#L108-L130

But... if there's disagreement, I can add something more explicit. Thoughts (inc Saurabh Tripathi (@Saurabh7019))?

[Nick Pape (nick-pape)]

Please see #10490 for more discussion now that we've released 1.22.0-rc.0.