Skip to content

Error mounting content in Tab App #2804

Open
@shayans-sklscrvn-dev

Description

@shayans-sklscrvn-dev

I am working to publish a b2b SaaS app specifically in teams as a tab application. The tab application fails to mount the b2b app into iframe as shown in the screenshot below, but I am not seeing any relevant errors in chrome devtools (both network and console).

Image

I am using the following CSP headers -

const nextConfig = {
  reactStrictMode: true,
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value:
              'frame-ancestors https://teams.microsoft.com https://*.teams.microsoft.com https://*.office.com https://*.cloud.microsoft;'
          }
        ]
      }
    ];
  }
};

module.exports = nextConfig;

Also, I have created a custom component to initialise the app from teams js sdk and used it in the root page (note: I am not seeing any of the console logs in Chrome Devtools console) -

'use client';

import { useEffect } from 'react';

const TeamsInit = () => {
  useEffect(() => {
    if (
      typeof window !== 'undefined' &&
      window.navigator.userAgent.includes('Teams')
    ) {
      import('@microsoft/teams-js')
        .then(({ app }) => {
          app
            .initialize()
            .then(() => console.log('✅ Teams SDK initialized'))
            .catch((err) => console.error('❌ Teams SDK init failed', err));
        })
        .catch((err) =>
          console.error('❌ Failed to dynamically import Teams SDK', err)
        );
    }
  }, []);

  return null; // No UI
};

export default TeamsInit;

And used the custom component in the root page like this -

import dynamic from 'next/dynamic';

const TeamsInit = dynamic(() => import('../components/ms-teams/TeamsInit'), {
  ssr: false
});
<Provider store={store}>
        <ThemeProvider theme={theme}>
          <TeamsInit />
          <Layout {...pageProps}>
            <Component {...pageProps} />
          </Layout>
        </ThemeProvider>
      </Provider>

Any idea why this wouldn't be working?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions