Error: Attempting to access the 'tokenType' property of an undefined object is not allowed

We encountered an error while attempting to embed a report using 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 code snippet illustrates how we are embedding 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 investigating the stacktrace within Power BI Embedded JS files (which are not under our control), we identified the root cause of the issue. A specific function requires a config parameter to be passed:

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

The error occurs because the code does not pass the necessary config information as expected.

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

While there may be issues on our side, it seems like a bug in Microsoft's implementation. Simply passing the config parameter correctly should resolve the problem.

Could our setup be causing this issue? Unfortunately, the Power BI Embedded JS files are not open for inspection.

Answer №1

The problem has been successfully resolved by the Microsoft team. Check it out here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

tRPC asynchronous mutation does not have a return value

Attempting to utilize tRPC for the first time here. I have created a mutation called "add" that takes a URL as input and returns a hardcoded slug. Router export const entryRouter = router({ add: publicProcedure .input(input) .output(output) ...

Validation in Sync with Angular 2's Latest Version

Encountering the error 'Expected validator to return Promise or Observable' when trying to implement a custom synchronous validator using FormControl and FormGroup classes for validation. The transition from beta to final release has been baffli ...

Invalidity of types occurs when dispatching data to redux

My reducer code is as follows: import { profileAPI } from '../api/api' import shortid from 'shortid' const ADD_POST = 'profile/ADD-POST' const SET_USER_PROFILE = 'profile/SET_USER_PROFILE' const SET_STATUS = 'p ...

Exploring the depths of Angular's nested formGroups

I am facing a challenge in updating my form with data. There is a nested formGroup within another formGroup, and despite receiving the data, the form does not update; it remains empty. The data is visible in the logs, indicating an issue with the form&apos ...

Experiencing a problem in AngularJS 2 after including 'routing' in the imports section of app.module.ts

An issue arises when I include 'routing' in the imports section of app.module.ts app/app.routing.ts(18,23): error TS2304: Cannot find name 'ModuleWithProvider'. [0] app/app.routing.ts(18,65): error TS2304: Cannot find name 'AppRou ...

Exploring Angular Performance: Template Functions vs. Properties. Which Method Reigns Supreme in Speed?

When dealing with multiple input controls that need to display a message when touched and invalid, I created a function for re-use in my form. The form contains numerous controls, so re-usability is important. isInvalid = (control: AbstractControl): boole ...

Leveraging Global Variables for Validation in Angular (Angular 10)

I am currently creating a form in Angular 10 which involves the use of validators. Specifically, I have been utilizing the Validators.min() method within my form... Instead of manually inputting the value '100' in the Validators.min('100&ap ...

Creating a table with a horizontal layout using Angular Material's mat-table

I am currently utilizing angular material 8.2.3 for my website. However, I have encountered a seemingly simple issue that has me stuck. I am looking to display a table horizontally instead of vertically. In my table, I only have two columns. Below is the ...

ng2-toastr in conjunction with akveo/ng2-admin - Styles not being applied

I recently integrated ng2-toastr into my akveo/ng2-admin dashboard, utilizing the latest version with Angular 4. Following the provided installation documentation, I imported the necessary CSS in the index.html file and declared ToastModule in the app.modu ...

Access the most up-to-date information through the API URL

Objective: Whenever the 'Test' Button is clicked, new data must be fetched from the backend using the API link and displayed on the modal form. Issue: If text in the input box is changed or deleted, then the modal is closed and the 'Tes ...

Is there a way to keep this table fixed in place as the user scrolls?

Is there an alternative way to fix the content on the header so that it remains visible on the screen until the next table, even when scrolling? I've tried using position: sticky and top: 0, but the header still scrolls past. I have checked for any ov ...

I am facing an issue with the PrimeNG time picker as it is not letting me modify the selected time

Currently utilizing PrimeNG for its calendar functionalities, I have been experiencing difficulty in getting the time picker to function properly. Despite my attempts, the time selector does not allow me to make any changes. Below is the code snippet from ...

Guide on uploading an image to Azure Blob Storage using v10 SDK

Currently, I am attempting to upload an image to the Blob Storage in Microsoft Azure using SDK V10 within an Angular framework. The code snippet below demonstrates how I establish a connection to the Storage and retrieve the names of all containers: // E ...

Arranging the output of a Typescript project

I'm currently advocating for Typescript to be implemented in our web application. Can anyone provide insight on the best method for structuring Javascript output files? Should they be excluded from source control? And when it comes to testing, is it p ...

Automatically choosing a radio button in a carousel using Angular

My Angular application includes the npm-hm-carousel. I am looking to automatically select the item in the center of the carousel, similar to the image provided. However, I also need to bind one of the ids to the selected item as I scroll through the carous ...

The default value is not displayed in the Angular dropdown menu

When using regular html select menus, if you create an option element with selected and disabled attributes and provide text for that option, the text will be displayed by default in the select menu. Below is a basic example of HTML code: <select name= ...

Developing an Angular 8 web application with seamless integration of ADFS 2.0 for

Looking for guidance on implementing authentication using ADFS 2.0 in my Angular 8 application. Any tips or sample applications would be greatly appreciated! ...

When running `npm test`, Mocha TS tests encounter failure, but the issue does not arise when executing them

When running tests in my Typescript nodejs project, I use the following command: mocha --compilers ts:ts-node/register,tsx:ts-node/register The tests run successfully with this command. However, when I try to run them using npm test, I encounter the foll ...

I am looking to extract only the alphanumeric string that represents the Id from a MongoDB query

Working with mongoDB, mongoose, and typescript, I am facing an issue where I need to preserve the document ids when querying. However, all I can retrieve is the type _id: new ObjectId("62aa4bddae588fb13e8df552"). What I really require is just the string ...

Angular 4 enum string mapping reversed

Here is an example of a string enum: export enum TokenLength { SIX = '6', EIGHT = '8', } I am trying to retrieve the string value 'SIX' or 'EIGHT' by reverse mapping this enum. I have attempted various methods: ...