search

OfficeDev / teams-toolkit

Developer tools for building Teams apps
Other
453 stars 185 forks source link

Can't debug OOTB TTK SPFx project template in Teams #12437

Open JonoSuave opened 4 days ago

JonoSuave commented 4 days ago

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

Screenshot 2024-09-23 at 8 52 48 AM
JonoSuave commented 3 days ago

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 commented 3 days ago

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 commented 3 days ago

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.

Screenshot 2024-09-24 at 10 11 56 AM
andrewconnell commented 3 days ago

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 commented 2 days ago

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