SPFx 1.19.0 - custom dialog

[stevedDev]

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
• [X] 💥 Microsoft Edge
• [X] 💥 Google Chrome
• [ ] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

• browser version
  • Chrome 127.0.6533.120 (Official Build) (64-bit)
• SPFx version
  • 1.19.0
• Node.js version
  • 18.20.4
• react
  • 17.0.1

Describe the bug / error

I was getting the exact same problem as reported in issue #8895 i.e. the , but applying the "fix" of limiting the project to react 17.0.1 (I did notice that it had included 17.0.2 by default): npm i react@17.0.1 react-dom@17.0.1 @types/react@17.0.45 @types/react-dom@17.0.17 --save-exact

That went away but is now replaced by a somewhat bigger issue of: when running under gulp serve, which seems to prevent the loading of the component entirely.

If I actually package the solution up and drop it into appcatalog, which is actioned without error, I actually get an error trying to add the app onto my SharePoint site:

I replicated the exact same issue creating a fresh SPFx 1.19 project and added the ColorPickerDialog.tsx custom dialog as per the Microsoft Learn page (just running the save-exact install of react 17.0.1 etc manually).

Steps to reproduce

1. Create new SPFx 1.19.0 app
2. Fix to use react-17.0.1
3. Add ColorPickerDialog code from Learn site
4. Deploy via gulp serve against a library

Expected behavior

Button shown on library and dialog shown when clicked.

[stevedDev]

Actually looks like its been raised in #9776 as well