Debugging field customizer not working in "new" SPO lists

[diabhoil]

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
• [ ] 💥 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 127.0.2651.86
• SPFx version 1.19.0
• Node.js version 18.20.1
• Using WSL 2 on Windows 11

Describe the bug / error

On my dev tenant I got a new SharePoint list design.

I can not debug my SPFx Field Customizer with this new design. The component is loading (I checked with CTRL+F12 in SPO and I can see the manifest and js files loading in the terminal) but it is never executed.

On my live environment with the old list design everything is working as expected.

Steps to reproduce

1. Create an SPFx solution with a Field Customizer
2. Change the serve.json to the correct field name (in my case its "Percent")
3. Run it on a Tenant with this new list design

Expected behavior

The list should render the field like this:

[diabhoil]

Any news on this?

If I deploy the solution and set ClientSideComponentId of the field to the ID of the field customizer component I am able to debug. But that is not really a solution because it forces me to install a solution to the tenant which is not ready.

I have seen the issue #9873 but the workaround mentioned there - using the display name of the field in the url - is not working in my case.