Can not add SPFx WebPart as Teams Tab in Shared Channels

[casvaniersel]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

macOS

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 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

• MacOS 15.1.1
• Edge Version 131.0.2903.63 (Official build) (arm64)
• SPFx version 1.20.0
• Node.js version 16.20.1
• Teams web client (V2) (https://teams.microsoft.com/v2/)

Describe the bug / error

I've created an SPFx WebPart that is supposed to serve as a Teams Tab in Shared Channels given the environment details above and used https://dev.teams.microsoft.com to create a manifest file with schema version 1.17 (for complete manifest see below). When testing my Tab, as an Admin I can add it to a General Channel and a Private Channel but not to a Shared Channel. The message Teams is giving me is "App isn't supported in Shared Channels. Select another channel"

When adding the Tab to a General or Private channel I can see that our code is working fine.

I also came across this blogpost: https://pnp.github.io/blog/post/how-to-add-preconfigured-spfx-teams-tab from which I learned that one specific feature that is required, is not activated in Shared Channels. After activating this Feature, I'm still not able to add the Tab.

Manifest:

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.17/MicrosoftTeams.schema.json",
  "version": "1.0.1",
  "manifestVersion": "1.17",
  "id": "700b1dc2-5a2e-49f1-a35e-c332d097b60a",
  "name": { "short": "DocFlow", "full": "" },
  "developer": {
    "name": "Rapid Circle",
    "mpnId": "",
    "websiteUrl": "https://rapidcircle.com",
    "privacyUrl": "https://rapidcircle.com/privacy",
    "termsOfUseUrl": "https://rapidcircle.com/terms"
  },
  "description": { "short": "Omschrijving", "full": "Lange omschrijving" },
  "icons": { "outline": "outline.png", "color": "color.png" },
  "accentColor": "#FFFFFF",
  "configurableTabs": [
    {
      "configurationUrl": "https://{teamSiteDomain}{teamSitePath}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId=1b7476b1-06b5-412f-8365-a7c221cc4b3e",
      "canUpdateConfiguration": true,
      "scopes": ["team"],
      "context": ["channelTab"],
      "supportedSharePointHosts": ["sharePointFullPage", "sharePointWebPart"]
    }
  ],
  "validDomains": ["{teamsitedomain}{teamsitepath}", "*.sharepoint.com"],
  "webApplicationInfo": {
    "id": "5e3081de-8370-4f0d-9d52-1f98beb10d7e",
    "resource": ""
  },
  "defaultGroupCapability": {},
  "supportedChannelTypes": ["sharedChannels", "privateChannels"]
}

Steps to reproduce

1. Install SPFx package to org apps store
2. Install Teams App manifest
3. Add App to Shared Channel

Expected behavior

Based on the fact that our Tab is working for General and Private Channels, I would expect it to work for Shared Channels too.

[casvaniersel]

Hey @lucabandMSFT and @patmill do you know if there is a restriction here or am I doing something wrong? Couldn't find anything about this issue at all.

[lucabandMSFT]

hey @casvaniersel, I'm confused: you say you are trying to add an SPFx app to a Teams channel but then I see this in the manifest above that should be the opposite (meaning: add a Teams app to a SharePoint page)
"supportedSharePointHosts": ["sharePointFullPage", "sharePointWebPart"]

Can you try to remove that from the manifest and see if it fixes the issue?

[casvaniersel]

hey @lucabandMSFT, to my understanding these options make it possible to use the Teams tab webpart in SharePoint as well as in Teams. I just tested turning them off, but it has no effect. I'm still not able to add the Tab to a shared channel.