Cannot access 'debug' before initialization

[canturan]

I am trying to use live-share-sdk in a SPFx solution which would run in a Teams meeting (side panel or meeting stage).

I did not get any error messages installing the live-share package version 1.0.0-preview.4. SPFx version is 1.16.1. SPFx solutions are already including the teams-js, which is version 2.4.2. This version does not have the LiveShareHost. Because of that I have installed the teams-js 2.50 explicitly with an alias.

I can use the LiveShareHost without any problem

await app.initialize();
const host = LiveShareHost.create();

but as soon as I add the line:

const client = new LiveShareClient(host);

the solution does not load at all and I am getting the error message: Cannot access 'debug' before initialization:

Does anyone have an idea, what the issue can be? Any help would be appreciated.

Thank you!

[corinagum]

Hi @canturan, apologies for the late response. Are you still having this issue? It seems like LiveShareHost.create() may be firing before initialization has completed successfully.

The current samples recommendation (for teams-js) is to have a try-catch with app.initialize, like so:

(Ignore the useEffect - I'm convinced it's unnecessary code and needs to be updated)

Maybe the catch could console other errors that might be more helpful. If this doesn't help, could you share more of your code and I can take a closer look?

[canturan]

Hi @corinagum , I will try the sample as soon as possible and will inform you, if it helped. Thank you very much for your response!

[canturan]

Hi @corinagum,

I have tried the try/catch block as you recommended but my web part crashes even before the web part is initialized. As I mentioned before, I am using SPFx in teams. There is a teams assembly from MS, which builds and loads the my code in teams environment. As soon as I have the const client = new LiveShareClient(host); part in my cod, teams assembly can't load and build the web part. When I uncomment that part, everything works perfectly.

If you would like to test it by yourself, it is pretty straight forward. Just create a new web part with SPFx generator, install the live share SDK packages, deploy the web part to teams and SharePoint as documented and add the standard LiveShare initialization code.

My code looks like that: `import * as React from 'react'; import styles from './Teams116.module.scss'; import { ITeams116Props } from './ITeams116Props'; import { escape } from '@microsoft/sp-lodash-subset'; import { LiveShareHost, app } from 'teams-js-v2.5'; import { LiveShareClient } from '@microsoft/live-share'; import { SharedMap } from "fluid-framework";

const meetingMinutesFluidKey = "meetingMinutes";

const containerSchema = { initialObjects: { meetingMinutesMap: SharedMap }, };

const onContainerFirstCreated = (container:any) => { // Set initial state of the rolled dice to 1. container.initialObjects.meetingMinutesMap.set(meetingMinutesFluidKey, 1); };

export default class Teams116 extends React.Component<ITeams116Props, {}> {

public async componentDidMount() { if (!!this.props.context.sdks.microsoftTeams) { try { await app.initialize(); } catch (error) { console.log(error?.message); }

  const frameContext = await app.getFrameContext();

  if (frameContext === "meetingStage"){
    const host = LiveShareHost.create();
    console.log(host);
    // Create client
    const client = new LiveShareClient(host);
    const container = await client.joinContainer(containerSchema, onContainerFirstCreated);
    console.log(container);
  }
}

}

public render(): React.ReactElement { const { description, isDarkTheme, environmentMessage, hasTeamsContext, userDisplayName } = this.props;

return (
  <section className={`${styles.teams116} ${hasTeamsContext ? styles.teams : ''}`}>
    <div className={styles.welcome}>
      <img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />
      <h2>Well done, {escape(userDisplayName)}!</h2>
      <div>{environmentMessage}</div>
      <div>Web part property value: <strong>{escape(description)}</strong></div>
    </div>
    <div>
      <h3>Welcome to SharePoint Framework!</h3>
      <p>
        The SharePoint Framework (SPFx) is a extensibility model for Microsoft Viva, Microsoft Teams and SharePoint. It&#39;s the easiest way to extend Microsoft 365 with automatic Single Sign On, automatic hosting and industry standard tooling.
      </p>
      <h4>Learn more about SPFx development:</h4>
      <ul className={styles.links}>
        <li><a href="https://aka.ms/spfx" target="_blank" rel="noreferrer">SharePoint Framework Overview</a></li>
        <li><a href="https://aka.ms/spfx-yeoman-graph" target="_blank" rel="noreferrer">Use Microsoft Graph in your solution</a></li>
        <li><a href="https://aka.ms/spfx-yeoman-teams" target="_blank" rel="noreferrer">Build for Microsoft Teams using SharePoint Framework</a></li>
        <li><a href="https://aka.ms/spfx-yeoman-viva" target="_blank" rel="noreferrer">Build for Microsoft Viva Connections using SharePoint Framework</a></li>
        <li><a href="https://aka.ms/spfx-yeoman-store" target="_blank" rel="noreferrer">Publish SharePoint Framework applications to the marketplace</a></li>
        <li><a href="https://aka.ms/spfx-yeoman-api" target="_blank" rel="noreferrer">SharePoint Framework API reference</a></li>
        <li><a href="https://aka.ms/m365pnp" target="_blank" rel="noreferrer">Microsoft 365 Developer Community</a></li>
      </ul>
    </div>
  </section>
);

} }`

And the error message I get from the teams assembly is exactly that:

I am using the latest version of the SPFx.

As I mentioned on the issue at the beginning. SPFx context initializes already an Teams JS version 2.4.2, which does not have the LiveShare SDK support. Because of that, I have installed also the Teams JS 2.5.

If I don't have the LiveShareClient line in my code, initializing the Teams JS is working without any problem.

I hope, I could give you enough information. If not, please just tell me..

Thank you!

[ryanbliss]

Hey @canturan, the way that teams-js works is pretty much incompatible with having multiple versions installed at once. If you call app.initialize() from v2.4.2 first, it will assign a message ID of 0 for that first message (teams-js maintains this ID). If you then try and initialize 2.5.0, that will also assign a message ID of 0. The end result of that is that initialize for the second version of teams-js should timeout. If you don't call app.initialize in 2.5.0, then you will also get an error, since it will think that the SDK is not yet initialized.

If you were to call app.initialize in 2.5.0 but not 2.4.2 when in Live Share mode, that should technically work. From what you provided, it looks like that might be the case...but it's possible there are other issues along this same grain.

Will need to debug further. Thanks for reporting this!

[canturan]

Hi @ryanbliss, thank you for the detailed explanation. It makes much more sense now, why the LiveShare is not working in a SPFx solution. The component loader of the SPFx, which we can't interfere anyways initializes the teams-js during the load process, which is version v2.4.2. This version does not have the needed LiveShareHost and other methods. That means, the SharePoint Framework team should upgrade the teams-js to the version 2.5.0 so that we can use LiveShare in a SPFx solution.

Can you able to report this to SPFx team internally or should I try to push it forward?

Thank you again!!

[ryanbliss]

Sure thing @canturan! I can't guarantee this is the exact cause, but I know it has caused similar issues in the past. Because you mentioned that commenting out the LiveShareHost.create() method seemed to resolve your issue, it's possible something else is going on with how SPFx / Live Share work together.

Either way, we want SPFx to upgrade. I will find the right folks on the SPFx team and get back to you 😊

[ryanbliss]

@canturan I've been told that this might not be an issue anymore. Have you had a chance to test it recently?

[ryanbliss]

Going to close this for now, but do let me know if this is still an issue. Last I heard this is no longer a blocker.

[canturan]

Sorry @ryanbliss, I wasn't around last week. In the new version of SPFx, we have the newest TeamsJs version. I could not test the LiveShare SDK directly but I think, there shouldn't be a blocker right now, as you also mentioned. Thank you for your support!!!