Issues showing SPFX webpart in teams tab

Question

I am trying to build a Teams tab using an SPFx web part for a demo.

On my inital app the Sync to teams button in the app catalog was failing with this console error being returned...

https://{TENANT}/sites/AppCatalog/_api/web/tenantappcatalog/SyncSolutionToTeams 400

After running into this problem I started again and this time followed the below tutorial step by step but on my tenant the Sync to Teams button is disabled (This step is near in the end in the Making the web part available in Microsoft Teams section)

https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab

I then tried to follow the alternative method of side-loading the app by creating a manifest manually using this tutorial...

https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/creating-team-manifest-manually-for-webpart

This resuted in the installation succeeding as far as the setup tab screen (this provides a preview of your tab in a model popup before adding the tab to a channel)

The result was "Sorry, something went wrong" (This was the end result of side-loading both my customised web part another freshly yo sharepoint generated scaffold.

Really stuck on whether there's a tenant issue or maybe some node package or SPFx version issue.

Any thoughts would be greatly appreciated.

Answer 1

In my case this error occurs when I changed title in webpart manifest file (webpart.manifest.json). When I rejected the change, it works. Probably there was some inconsistency in project files.

Answer 2

The error occurs if the app is still in the Teams catalog. It doesn't override it and instead throws the error. This is a known bug and we will look to fix it in the future. For now, please try either manually updating the app from Teams (not from the SharePoint app catalog) or to delete the Teams app and then to resync from SharePoint.

Answer 3

I received a same error from console which led me to this article.

In this case, the app was already synced to Teams store. If that's the case, you should find and remove it by opening Teams -> Apps -> Built for [tenantname]. After removing it here, I am able to successfully sync my app once more.

Answer 4

I'm using SPFx 1.8.1 version and added TeamsTab in supportedHosts manifest file. Deployed in tenant app catalog and tried to Sync to Teams. Then I'm getting same issue of SyncSolutionToTeams with 400 error. Please find the attached screenshot from console windwow.