SPFx 1.20 Form Customizer Extension [object Object] Error

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 version - 1.20.0
• Node.js version - 18.20.8, 18.18.2
• React version - 17.0.1
• Typescript version - 4.7.4
  package.json contents:

{
  "name": "test-form-4",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=18.17.1 <19.0.0"
  },
  "main": "lib/index.js",
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@fluentui/react": "^8.106.4",
    "@microsoft/decorators": "1.20.0",
    "@microsoft/sp-core-library": "1.20.0",
    "@microsoft/sp-listview-extensibility": "1.20.0",
    "@microsoft/sp-lodash-subset": "1.20.0",
    "@microsoft/sp-office-ui-fabric-core": "1.20.0",
    "@pnp/graph": "^4.11.0",
    "@pnp/sp": "^4.11.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "tslib": "2.3.1"
  },
  "devDependencies": {
    "@microsoft/eslint-config-spfx": "1.20.2",
    "@microsoft/eslint-plugin-spfx": "1.20.2",
    "@microsoft/rush-stack-compiler-4.7": "0.1.0",
    "@microsoft/sp-build-web": "^1.20.2",
    "@microsoft/sp-module-interfaces": "1.20.2",
    "@rushstack/eslint-config": "4.0.1",
    "@types/react": "17.0.45",
    "@types/react-dom": "17.0.17",
    "@types/webpack-env": "~1.15.2",
    "ajv": "^6.12.5",
    "eslint": "8.57.0",
    "eslint-plugin-react-hooks": "4.3.0",
    "gulp": "4.0.2",
    "typescript": "4.7.4"
  }
}

Describe the bug / error

After creating a new SPFx Form Customizer project and running gulp serve command, the SPListForm..aspx page shows Sorry, something went wrong error page.

The dev tools console window shows the following error.

Steps to reproduce

1. Run npm install -g yo @microsoft/generator-sharepoint
2. Run npm install -g gulp-cli
3. Create new Form Customizer Extension project following the prompts of yo @microsoft/sharepoint
4. Update the serve.json file with the tenantdomain and listrootfolder values
5. Run gulp serve

Expected behavior

Should load the form customizer without any errors and print the form content.