Sp-dev-docs: SPFX Teams Personal App Pop out app feature blank screen

[Rtoribiog]

Category

• [x] Bug

Describe the bug

We created a spfx teams static app , using the following url. "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId={{SPFX_COMPONENT_ID}}%26forceLocale={locale}" it´s working ok in teams desktop app , when the user click in pop out app , new window is opened but blank screen appears. It works if it´s a sharepoint page but not spfx webpart.

https://windowsreport.com/teams-pop-out-apps/

Steps to reproduce

• Provide steps to reproduce the behavior:

1. Go to Teams Desktop
2. Right click in Teams personal app in the left bar
3. Select Pop out app
4. Teams app is not loaded , blank screen

Expected behavior

Teams app needs to be loaded the same than in desktop app

Environment details (development & target environment)

• Complete the following (if ignored you'll be prompted for it before we can address your issue... save the time and provide it in your initial submission).

• Developer Environment : Windows 10
• Target Environment: SharePoint Online
• Framework : Node.js v10.13
• Browser(s): Teams Desktop
• Tooling: SPFx v1.11

Additional context

• Provide any other context about the problem.

Thanks for your contribution! Sharing is caring.

Submission guidelines

Dear @VesaJuvonen

[msftbot[bot]]

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

[mrzyko]

Yup, I can confirm this bug.
It also appears with our personal app, using spfx.

[andrewconnell]

Have you tried using the latest version of SPFx, v1.11? The version you're using is ~12mo old... that's the first thing MSFT will ask you to do is to validate this against the latest version.

[zakwht]

I can confirm this appears with our personal app using SPFx 1.11

[Rtoribiog]

updated spfx to version 1.11 and it´s still happening the same. Thanks

[andrewconnell]

In your OP you say you're using Node.js v12... SPFx is only supported with Node.js v10 at this time. Although I suspect it's a typo as you should get all sorts of build errors if you try to use Node.js v12.

[Rtoribiog]

In your OP you say you're using Node.js v12... SPFx is only supported with Node.js v10 at this time. Although I suspect it's a typo as you should get all sorts of build errors if you try to use Node.js v12.

corrected it´s v10.13

[RoelVB]

I thought some technical information could be useful.

The embedded and pop-out window both load an iframe with a URL like:
https://contoso.sharepoint.com/_layouts/15/teamshostedapp.aspx?teams&personal&componentId=00000000-0000-0000-0000-000000000000&env=TeamsPageWebView

The only difference I noticed is that the content of the embedded iframe contains a <div class="SPPageChrome isFluent"> (which contains the webpart) in the body, but the pop-out window is missing this div.

[praveenpudi329]

Hi All,

Any updates. we are facing the same issue, no difference in fiddler trace for embedded & pop out