[SOLVED] TypeError: Cannot read properties of undefined (reading 'tokenType')

TypeError: Cannot read properties of undefined (reading 'tokenType')

We're getting the following error when trying to embed a report with the Power BI Angular library.

TypeError: Cannot read properties of undefined (reading 'tokenType')
    at isSaaSEmbedWithAADToken (reportEmbed?navContentPaneEnabled=false&uid=ame7c8:586:38)
    at getModelsAndExploration (reportEmbed?navContentPaneEnabled=false&uid=ame7c8:696:17)
    at getModelsAndExplorationAndConceptualSchema (reportEmbed?navContentPaneEnabled=false&uid=ame7c8:840:9)
    at xhr.onreadystatechange (reportEmbed?navContentPaneEnabled=false&uid=ame7c8:505:37)

This is code which we are using to embed the report.

this.msalService.initialize().subscribe(() => {
      this.msalService.acquireTokenSilent({
        scopes: environment.powerBiConfig.scopes,
        account: this.authService.getUser()
      }).subscribe(async (result) => {
        const embedConfig: pbi.service.IComponentEmbedConfiguration = {
          type: 'report',
          id: this.report.identifier,
          accessToken: result.accessToken,
          tokenType: models.TokenType.Aad,
          embedUrl: 'https://app.powerbi.com/reportEmbed?navContentPaneEnabled=false',
          settings: {
            panes: {
              filters: {
                visible: false,
              }
            }
          }
        };
        const defaultFilters = this.createDefaultFilters();
        const powerBiReport: any = this.powerBiService.embed(this.reportContainer.nativeElement, embedConfig);
        powerBiReport.on('loaded', async () => {
          await powerBiReport.setFilters(defaultFilters);
        });
      });
    });

After following the stacktrace into Power BI Embedded JS files (which we have no control of), we were able to determine what's causing the issue. The following function expects a config to be passed:

function isSaaSEmbedWithAADToken(config) {
    // Default token type is Aad (0)
    const tokenType = config.tokenType || 0;
    return (window.isSaasOrPaasEmbed === true) && (tokenType === 0);
}

However the piece of code that's causing the error is not actually passing the config.

if (isSaaSEmbedWithAADToken() && config.settings && config.settings.personalBookmarksEnabled) {
    url += "&defaultBookmarkEnabled=true";
}

Even if we're doing something wrong on our end, this is a bug at Microsoft's end. The fix is simply passing the config like other parts of the code are already doing.

Is there something wrong in our setup which is causing this issue? The Power BI Embedded JS files seem to be closed source.

Solution