The intention was to create an SPFx app that would work in SharePoint as WebPart as well as in Teams as Teamstab. So I got to work, opened my command prompt and started Yeoman with the @microsoft/sharepoint generator. For completeness, for this project I used the latest SPFx version at the moment, which is 1.16.

Once the solution was set up with the default code, html and css styling I immediately created the package without changing anything, all I did was check if “TeamsTab” was indeed among the supportedHosts in the web part manifest .

The package was created and ready to upload to the SharePoint app catalog. When uploading, I made sure that the web part was added to all sites so that I could also add the web part to Teams.

So far so good, now all I had to do was add the app as a tab. To my great surprise, I got the error message “This app cannot be found.”
I didn’t quite understand it at first, but when I took a closer look at the problem through the developer tools console, I saw the error message “Cannot read properties of undefined (reading ‘validDomains’)”.

ValidDomains is a parameter in the manifest file used to add the app to the Teams app catalog. And what went wrong here was that when you press the “Add to Teams” button in the SharePoint app catalog, this manifest file for the Teams app catalog is created dynamically and apparently something can go wrong in this process.

Now you have 2 options:

1. Or you remove the app from the Teams app catalog and you try to add the app back to Teams from the SharePoint app catalog and hope that the process is done correctly.
2. Or you take matters into your own hands and provide a valid manifest file.

{
    "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.8/MicrosoftTeams.schema.json",
    "manifestVersion": "1.8",
    "packageName": "[packageName]",
    "id": "[id]",
    "version": "2.0",
    "developer": {
        "name": "John Doe",
        "websiteUrl": "https://www.contoso.com",
        "privacyUrl": "https://www.example.com/termofuse",
        "termsOfUseUrl": "https://www.example.com/privacy"
    },
    "name": {
      "short": "[name]"
    },
    "description": {
      "short": "[descriptionShort]",
      "full": "[descriptionFull]"
    },
    "icons": {
      "outline": "[id]_outline.png",
      "color": "[id]_color.png"
    },
    "accentColor": "#004578",
    "configurableTabs": [
      {
        "configurationUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26componentId={{SPFX_COMPONENT_ID}}",
        "canUpdateConfiguration": false,
        "scopes": [
          "team",
          "groupchat"
        ],
        "context": [
          "channelTab",
          "privateChatTab",
          "meetingSidePanel",
          "meetingDetailsTab",
          "meetingChatTab"
        ]
      }
    ],
    "validDomains": [
      "*.login.microsoftonline.com",
      "*.sharepoint.com",
      "resourceseng.blob.core.windows.net"
    ],
    "webApplicationInfo": {
      "resource": "https://{teamSiteDomain}",
      "id": "00000003-0000-0ff1-ce00-000000000000"
    }
  }

A word of explanation about the manifest file:

• replace [id] with the id parameter of your webpart manifest file
• replace [packageName] with the name of your package
• Replace [name] with the name of your app
• For the description parameter give a clear value for short & full
• Enter the values ​​of the developer as desired.

You place this manifest file in the teams folder of your solution. Put the files in the teams folder in a zip and give this zip the exact name “TeamsSPFxApp.zip”.

Now when you build and package the solution, you will see that when you change the sppkg file to a zip file, TeamsSPFxApp.zip is included in the ClientSideAssets folder of your zip file.

You can then upload your sppkg file back to SharePoint Appcatalog and when you press “Add to Teams”, the underlying manifest file for Teams will not be generated dynamically when the zip file TeamsSPFxApp is found.