[SPFx 1.22.0] - Uncaught runtime errors

[Tanddant]

Target SharePoint environment

SharePoint Online

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

💥 SharePoint Framework

Developer environment

None

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

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

Additional environment details

• Edge Version 143.0.3650.75 (Official build) (64-bit)
• SPFx 1.22.0
• Node.js version: v22.17.1
• Heft @rushstack/heft@1.1.7

Describe the bug / error

Playing around with the new SPFx 1.22.0 release, everything looks good, except I'm seeing these errors with a just simply the React template, no code changes

I realize this issue might not actually have to with the SPFx release, but rather the updated toolchain suddenly flagging errors that previously were just silently failing in the background

Steps to reproduce

1. Create a web part with SPFx 1.22
2. Run Heft start
3. Enter the debug URL, and insert the web part onto an empty SharePoint page
4. Verify that everything works as expected
5. Toggle the Show in mobile and email view setting, off and then back on

6. Reload the page
7. Profit? 🤷 - You'll now be getting run Uncaught runtime errors, if you reload the page WHILE the web parts property pane is open
8. If you close the property pane, and publish, the issues go away, but reappear if you close the property pane again.

Expected behavior

I mean ... expected behavior would be that issues I'm not at fault for wouldn't show up in my stack

[nick-pape]

Interesting.

So far I have not been able to reproduce, but I do periodically get a different error:

It doesn't seem to be related to the webpart, which still functions correctly. We'll investigate further the cause of this unhandled error.

[kbeverforden]

I got the same error in an SPFx 1.22 solution that has a single SPFx application customizer in it. I got the error when clicking the plus button to add a web part (nothing to do with mobile). My solution doesn't have any web parts so I didn't intend to add one to the page but knew someone posted the same error in here so I wanted to provide another scenario. The pop up with available web parts opens and a second later it shows this error. This also happens on a new 1.22 application customizer project that hasn't been touched.

[nick-pape]

We were able to reproduce the issue. Some pages appear to have unhandled promise rejections. Webpack deveserver client is picking these up and displaying them -- this is not an issue in your webpart/extension. You can close these using the "X" in the upper right and ignore them for now.

Another workaround is to add a webpack patch file to disable the overlay or runtimeErrors checking:

module.exports = function(webpackConfig) {
  if (webpackConfig?.devServer?.client !== undefined) {
    webpackConfig.devServer.client.overlay = false;
 
    // OR:
    // webpackConfig.devServer.client.overlay = { runtimeErrors: false };
  }
  return webpackConfig;
};

https://learn.microsoft.com/en-us/sharepoint/dev/spfx/toolchain/customize-heft-toolchain-customize-webpack-config

We'll be publishing a fix for this shortly.

[Tanddant]

@nick-pape, Sounds good 🤗 - Honestly I prefer this style or error handeling, to silent console.errors ... but only when it's my errors 😂

Like I said to @VesaJuvonen, thank you for the great work, this has been one of the coolest releases in a long time, really looking forward to what the future hold for SPFx - AMAZING JOB GUYS 🙌

[ejazhussain]

@nick-pape

Thanks for sharing the workaround. It worked like a charm. Totally agree with @Tanddant, one of the amazing releases. Looking forward to exploring the SPFx extensibility with different scenarios.

Great stuff

[VesaJuvonen]

Thanks for reporting this one - we just rolled out SPFx 1.22.1 to address this specific issue, so closing this as fixed.

[Tanddant]

Confirming that this is resolved - Great job team 🙌