SPFx 1.20.0 Upgrade: [object Object] Error Persists Despite applying the suggested fix

[ejazhussain]

Target SharePoint environment

SharePoint Online

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

💥 SharePoint Framework

Developer environment

Windows

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

• SPFx 1.20.0
• Node.js version - 18.20.5

Describe the bug / error

Issue Summary

I upgraded my SPFx solution from 1.18.2 to 1.20.0. While the build and bundle processes completed successfully, I am still encountering the [object Object] error on the page.

Steps Taken

I followed the recommended guidelines but have not been able to resolve the issue.

Fix for [object|object] Issue

As part of the transition to Webpack 5 in SPFx 1.19, exception details were impacted, as noted in Issue #9834.

This issue is resolved by default for new projects created with the SPFx Yeoman generator 1.20. However, for existing projects, the following updates are required:

1. Update SPFx tools packages to version 1.20.2.
2. Upgrade @rushstack/eslint-config from 2.5.1 to 4.0.1.
3. (Optional) Address new lint errors, such as @typescript-eslint/no-unsafe-function-type rule is not found, by modifying .eslintrc.js.
4. (Optional) Resolve additional lint rule errors related to your codebase.

Screenshot

Steps to reproduce

1. Upgrade the SPFx solution from 1.18.2 to 1.20.0
2. Build
3. Bundle
4. Gulp serve and test the web part. You will get the following error
   

Expected behavior

Upgrading the existing project to the latest SPFx version 1.20.0 should display the web parts