Can't debug OOTB TTK SPFx project template in Teams

[JonoSuave]

Describe the bug
When I go to debug the SPFx generated template from TTK I get the following cert error in the console:

To Reproduce
Steps to reproduce the behavior:

1. Create a spfx personal tab solution using the Teams Toolkit template
2. Click the Debug in Teams (Edge)
3. Allow debug scripts (I didn't receive a certification message)
4. You'll get the following error: "Error: Script error for "https://localhost:4321/temp/manifests.js" https://requirejs.org/docs/errors.html#scripterror". See also error in console: "Failed to load resource: net::ERR_CERT_DATE_INVALID"
5. Untrust and retrust the dev cert by running gulp trust-dev-cert --untrust and then gulp trust-dev-cert from within the src folder
6. Try to debug and get the same issue

Expected behavior
To be able to debug the spfx app in launched browser (Edge or Chrome). Here's a recording: https://www.loom.com/share/6ff6daef8f754f109f5aaab7ec0e7be9?sid=222589ac-3495-44f6-94ab-0ee99883bdd4

Screenshots

[JonoSuave]

For a temporary workaround, I went to edge://flags and search for insecure and enable Allow invalid certificates for resources loaded from localhost.

[HuihuiWu-Microsoft]

Hi @JonoSuave, does this issue happen for the first time or you never succeeded to debug SPFx projects before? Do you have the same issue if you debug in hosted workbench directly with gulp serve under src folder?

[JonoSuave]

That was a good question. Previously, I was able to do a gulp serve --nobrowser and launch a debug in chrome and edge, but now when I try to debug I get the following message on the workbench page: Your web part will not appear in the toolbox. Please make sure "gulp serve" is running in a web part project. Please refresh the page once "gulp serve" is running.

[andrewconnell]

Not sure if this is related, but might be as I worked a bit with @JonoSuave & saw his original error (that implied it was an expired cert).

Out of the blue today, in creating a non-SPFx project with TTK (Tab > React w/ Fluent UI), when I went to debug it the first time, I was prompted with a dialog to install a cert (forgot to grab a screenshot, but I understood it as the typical "You need to trust a local dev cert in your local Trusted Root Authority"). After I did that, all worked.

[HuihuiWu-Microsoft]

Thanks @andrewconnell and @JonoSuave. Seems this is a known issue on macOS/Linux, check here for more details on how to remediate.

[HuihuiWu-Microsoft]

I'll close this issue since it's a known issue on macOS/Linux. Please feel free to reopen or open another one if you have other problems.