SPFX WebPart exposed as teams app not visible in New MS Teams version

[mdissel]

Target SharePoint environment

SharePoint Online

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

💥 SharePoint Framework

Developer environment

None

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

• [ ] 💥 Internet Explorer
• [ ] 💥 Microsoft Edge
• [ ] 💥 Google Chrome
• [ ] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [X] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

• SPFx version 1.16.1
• MS Teams manifest version schema v1.16
• MS Teams Windows Desktop version 23231.412.2343.5284
• App is loaded via context "personalTab" and https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=....id...%26forceLocale={locale}%26theme={theme}"

Describe the bug / error

The webpart is loaded without any issues in the normale Teams version, but not in the "New" version. The loading indicator is shown for 1 second and after that a blank page.

Current manifest.json validdomains:

"validDomains": [ "{teamsitedomain}", "cdn.XXXXXX.com", (our own cdn) ".login.microsoftonline.com", "statica.akamai.odsp.cdn.office.net", ".sharepoint.com", "*.office.com", "spoprod-a.akamaihd.net", "resourceseng.blob.core.windows.net" ],

Steps to reproduce

Expected behavior

Load the webpart from the sharepoint hosted webpage.

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[nick-pape]

Thank you for filing a report. As this is definitely a potential bug, I've filed a ticket for the Product Group to take a further look at this.

[nick-pape]

@mdissel

Can you provide specific repro steps and/or a link to a repro repository?

Does this occur with a web part generated with yeoman and no other changes?

Additionally, do you have a custom Teams manifest? And if so, what is listed in webApplicationInfo?

[mdissel]

Can you provide specific repro steps and/or a link to a repro repository?

Currently not

Does this occur with a web part generated with yeoman and no other changes? Additionally, do you have a custom Teams manifest? And if so, what is listed in webApplicationInfo?

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.16/MicrosoftTeams.schema.json",
  "manifestVersion": "1.16",
  "packageName": "XX",
  "id": "XXX",
  "version": "2023.2.1",
  "developer": {
    "name": "XXX",
    "websiteUrl": "XXX",
    "privacyUrl": "XXXX",
    "termsOfUseUrl": "XXXX"
  },
  "name": {
    "short": "XXXX",
    "full": "XXXXX"
  },
  "description": {
    "short": "XXX",
    "full": "XXXX"
  },
  "icons": {
    "outline": "XXXX_outline.png",
    "color": "XXXX_color.png"
  },
  "accentColor": "#004578",
  "showLoadingIndicator": false,
  "isFullScreen": true,
  "staticTabs": [
    {
      "entityId": "XXX",
      "name": "XXX",
      "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=XXXXXX%26forceLocale={locale}%26theme={theme}",
      "scopes": [
        "personal",
        "team"
      ],
      "context": [
        "personalTab",
        "channelTab"
      ]
    }
  ],
  "configurableTabs": [
    {
      "configurationUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId=XXXXX%26forceLocale={locale}%26theme={theme}",
      "canUpdateConfiguration": true,
      "scopes": [
        "team"
      ],
      "context": [
        "channelTab",
        "personalTab"
      ],
      "supportedSharePointHosts": [
        "sharePointFullPage",
        "sharePointWebPart"
      ]
    }
  ],
  "defaultInstallScope": "team",
  "validDomains": [
    "{teamsitedomain}",
    "cdn.XXXXX.com",
    "*.login.microsoftonline.com",
    "spoppe-a.akamaihd.net",
    "spoprod-a.akamaihd.net",
    "resourceseng.blob.core.windows.net",
    "msft.spoppe.com"
  ],
  "webApplicationInfo": {
    "resource": "https://{teamSiteDomain}",
    "id": "00000003-0000-0ff1-ce00-000000000000"
  }
}

[AJIXuMuK]

@mdissel - are you using context.app.host.name in your code and throwing an error if it's unknown host (similarly to how it's done in the default scaffolded solution)? If yes - Teams introduced new host name 'TeamsModern' which is valid one and specifies the app is running in "new" Teams. Could you please modify your code to take it into consideration and check if that fixes the issue?

Thanks!

[mdissel]

Thanks! We will upgrade to 1.18 and let you know the results.

If yes - Teams introduced new host name 'TeamsModern'

We're are doing some other stuff based in context.app.host.name so we will add 'TeamsModern' as an alternative name for MS Teams.

[mdissel]

Thanks! The fullscreen app in the modern Teams app is working after upgrading SPFX to 1.18

[doxic012]

Any update on this bug? We have the same issue (mentioned in the dupe that is closed) and are on spfx 1.14 and cannot upgrade so easily because some of react component dependencies.

[kandharithirumalreddy]

Hi Any update on this bug? We have the same issue and are on SPFx version 1.15.2.

[kandharithirumalreddy]

Hi Any update on this bug? We have the same issue and are on SPFx version 1.15.2.

[Undefined-None]

maybe this helps someone: It seems that somewhere around spfx 1.15 or 1.16 they introduced a default/scaffolded function called _getEnvironmentMessage(). This function holds a switch statement wich throws "unkown host" when in new Teams because only "Teams" but not "TeamsModern" is checked. in my case i just added a additional TeamsModern-Case-Statement and it worked in New Teams.

But additionally an "old" Bug presists, you can't change the webparts settings once it is added as Teams Tab.

[mdissel]

@nick-pape We are experiencing the same problem in the Microsoft Outlook 365 MSO (Version 2401 Build 16.0.17231.20194) 64-bit It does work correctly in Outlook Web Access.

The first time we dock an app to the left panel, the app is loaded without any problem. But when you close and open Outlook and click on the docked app, the {teamSiteDomain} is not replaced, resulting in a white/empty browser page.

Using spfx version 18.0

[Undefined-None]

@nick-pape We are experiencing the same problem in the Microsoft Outlook 365 MSO (Version 2401 Build 16.0.17231.20194) 64-bit It does work correctly in Outlook Web Access.

The first time we dock an app to the left panel, the app is loaded without any problem. But when you close and open Outlook and click on the docked app, the {teamSiteDomain} is not replaced, resulting in a white/empty browser page.

Using spfx version 18.0

I can confirm the behavior described by @mdissel, using Microsoft Outlook Microsoft 365 MSO (Version 2401 Build 16.0.17231.20236) 64 Bit. But the same is true when using the app as "M365 App" it works when using the SPFx-App directly in the browser but crashes when using the desktop "Microsoft 365 (office)"-App. Unable to test it in new outlook as the apps are not listed there.

Clearly there is something wrong with the URL replacement

I also noticed that now we can change webpart settings in new teams - but it seems that everytime you edit the webpart settings (of a existing tab) technically a new tab will be generated (because the tab-url is not available anymore).

I'm using spfx 1.18.1

[cardinalpipkin]

maybe this helps someone: It seems that somewhere around spfx 1.15 or 1.16 they introduced a default/scaffolded function called _getEnvironmentMessage(). This function holds a switch statement wich throws "unkown host" when in new Teams because only "Teams" but not "TeamsModern" is checked. in my case i just added a additional TeamsModern-Case-Statement and it worked in New Teams.

But additionally an "old" Bug presists, you can't change the webparts settings once it is added as Teams Tab.

Can you show me what files were edited and how please? I'm getting this issue even when updating to 1.18

[Undefined-None]

you show me what files were edited and how please? I'm getting this issue even when updating to 1.18

in your *WebPart.ts in src\webparts\{webpartname} you should find a method called _getEnvironmentMessage this method contains a switch statement, where the last clause is case 'Teams', in default-clause the unkown host exception is thrown. Now simply add case 'TeamsModern' just below case 'Teams' like so:

private _getEnvironmentMessage(): Promise<string> {
    if (!!this.context.sdks.microsoftTeams) { // running in Teams, office.com or Outlook
      return this.context.sdks.microsoftTeams.teamsJs.app.getContext()
        .then(context => {
          let environmentMessage: string = '';
          switch (context.app.host.name) {
            case 'Office': // running in Office
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOffice : strings.AppOfficeEnvironment;
              break;
            case 'Outlook': // running in Outlook
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOutlook : strings.AppOutlookEnvironment;
              break;
            case 'Teams': // running in Teams
            case 'TeamsModern':
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
              break;
            default:
              environmentMessage = strings.UnknownEnvironment;
          }

          return environmentMessage;
        });
    }

Please note, in this example I have removed the exception - instead only a string will be returned. If you do not need this info about the current environment as string, i think you can remove the entire method.

[Undefined-None]

I also noticed that spfx webparts suddenly started working (again) in outlook

@nick-pape We are experiencing the same problem in the Microsoft Outlook 365 MSO (Version 2401 Build 16.0.17231.20194) 64-bit It does work correctly in Outlook Web Access. The first time we dock an app to the left panel, the app is loaded without any problem. But when you close and open Outlook and click on the docked app, the {teamSiteDomain} is not replaced, resulting in a white/empty browser page. Using spfx version 18.0

I can confirm the behavior described by @mdissel, using Microsoft Outlook Microsoft 365 MSO (Version 2401 Build 16.0.17231.20236) 64 Bit. But the same is true when using the app as "M365 App" it works when using the SPFx-App directly in the browser but crashes when using the desktop "Microsoft 365 (office)"-App. Unable to test it in new outlook as the apps are not listed there.

Clearly there is something wrong with the URL replacement

I also noticed that now we can change webpart settings in new teams - but it seems that everytime you edit the webpart settings (of a existing tab) technically a new tab will be generated (because the tab-url is not available anymore).

I'm using spfx 1.18.1

[cardinalpipkin]

you show me what files were edited and how please? I'm getting this issue even when updating to 1.18

in your *WebPart.ts in src\webparts\{webpartname} you should find a method called _getEnvironmentMessage this method contains a switch statement, where the last clause is case 'Teams', in default-clause the unkown host exception is thrown. Now simply add case 'TeamsModern' just below case 'Teams' like so:

private _getEnvironmentMessage(): Promise<string> {
    if (!!this.context.sdks.microsoftTeams) { // running in Teams, office.com or Outlook
      return this.context.sdks.microsoftTeams.teamsJs.app.getContext()
        .then(context => {
          let environmentMessage: string = '';
          switch (context.app.host.name) {
            case 'Office': // running in Office
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOffice : strings.AppOfficeEnvironment;
              break;
            case 'Outlook': // running in Outlook
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOutlook : strings.AppOutlookEnvironment;
              break;
            case 'Teams': // running in Teams
            case 'TeamsModern':
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
              break;
            default:
              environmentMessage = strings.UnknownEnvironment;
          }

          return environmentMessage;
        });
    }

Please note, in this example I have removed the exception - instead only a string will be returned. If you do not need this info about the current environment as string, i think you can remove the entire method.

Hi - I've modified the function like this:

private _getEnvironmentMessage(): Promise<string> {
    if (!!this.context.sdks.microsoftTeams) { // running in Teams, office.com or Outlook
      return this.context.sdks.microsoftTeams.teamsJs.app.getContext()
        .then(context => {
          let environmentMessage: string = '';
          switch (context.app.host.name) {
            case 'Office': // running in Office
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOffice : strings.AppOfficeEnvironment;
              break;
            case 'Outlook': // running in Outlook
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOutlook : strings.AppOutlookEnvironment;
              break;
            case 'Teams': // running in Teams
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
              break;
            case 'TeamsModern':
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
              break;
            default:
              environmentMessage = strings.UnknownEnvironment;
              //throw new Error('Unknown host');
          }

          return environmentMessage;
        });
    }

and added an UnknownEnvironment string to the myStrings.d.ts file:

declare interface IMyAppWebPartStrings {
  PropertyPaneDescription: string;
  BasicGroupName: string;
  DescriptionFieldLabel: string;
  AppLocalEnvironmentSharePoint: string;
  AppLocalEnvironmentTeams: string;
  AppLocalEnvironmentOffice: string;
  AppLocalEnvironmentOutlook: string;
  AppSharePointEnvironment: string;
  AppTeamsTabEnvironment: string;
  AppOfficeEnvironment: string;
  AppOutlookEnvironment: string;
  UnknownEnvironment: string;
}

When I switch the browser to new Teams, then run the project using Teams Toolkit, the browser loads, but shows "Can't find that app".

[cardinalpipkin]

I just sent this through to SP admin and they tested on new Teams and they report it has worked. Thank you to Undefined-none.

[github-actions[bot]]

Thank you for taking the time to file an issue. We periodically archive older or inactive issues as part of our issue management process, which automatically closes them once they are archived.

If you’d like to understand more about why and how we handle archived (closed) issues, please see Our approach to closed issues.

We appreciate your contribution and if this is still an active issue with the latest SPFx versions, please do resubmit the details. We needed to perform a cleanup, so that we can start with a clean table with a new process. We apologize for the inconvenience this might cause.