embedDashboard - TypeError: Cannot read properties of undefined (reading 'contextId')

[aikeda]

Hi, guys. I tried to debug, read the source code, but i still didn't figure it out how to solve it.

Locally it works fine. But running on dev environment (cloudfront) I get this error while initializing my dashboard experience:

TypeError: Cannot read properties of undefined (reading 'contextId') at r.buildExperienceUrl (quicksight-embedding-js-sdk.min.js:2180:1) at new r (quicksight-embedding-js-sdk.min.js:2186:10) at e.initializeFrame (quicksight-embedding-js-sdk.min.js:2221:1) at new e (quicksight-embedding-js-sdk.min.js:2261:8) at e.buildControlOptions (quicksight-embedding-js-sdk.min.js:2418:1) at quicksight-embedding-js-sdk.min.js:2331:73 at d (quicksight-embedding-js-sdk.min.js:77:1) at Generator.<anonymous> (quicksight-embedding-js-sdk.min.js:165:1) at Generator.next (quicksight-embedding-js-sdk.min.js:106:1) at i (quicksight-embedding-js-sdk.min.js:351:1)

my context object is set:

{ contextId: "7c18f2d5-8e98-4274-8dae-e9b6726d7fdf", ... }

error happens when I call:

embedContext.embedDashboard({ url: resp.data.url, container: "#dashboardContainer", height: '100%' }).then(...

resp.data.url returns "https://us-east-1.quicksight.aws.amazon.com/embed/200163899a104d4fba243c390aca839e/dashboards/a2fh0144-ab3c-47f2-959a-e2b3g4378c92?code=AYXBeFLXU2...&identityprovider=quicksight&isauthcode=true"

I'm on "amazon-quicksight-embedding-sdk": "2.5.0"

[sonals-amazon]

Hello,

Could you please share your code snippet for how you are initializing embedContext until you call embeddingContext.embedDashboard(frameOptions, contentOptions);

[yradchen]

Found this issue occurs when using the repo in package.json and using a compiler, like react-scripts, to compile the code.

Can repro the issue by using older versions of react-scripts. Upgrading to 5.0.1 fixes the issue.

Another solution is to load the package through the script tag rather than through node_modules/package.json as seen in the readme example <script src="https://unpkg.com/[email protected]/dist/quicksight-embedding-js-sdk.min.js"></script>

[tcths]

Hi, wondering if there can be any more definitive resolution here.

I have tried two ways. I am loading the package with the <Script> tag in NextJS. Both ways I get the error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'addActions')

Way 1 (as in docs here):

  const onMessage = async (messageEvent: any) => {
    const { eventName, message } = messageEvent;
    switch (eventName) {
      case "CONTENT_LOADED":
        await embeddedVisual!.addActions([
          {
            CustomActionId: "console-log-action",
            Name: "log to console",
            Trigger: "DATA_POINT_CLICK",
            Status: "ENABLED",
            ActionOperations: [
              {
                CallbackOperation: {
                  EmbeddingMessage: {},
                },
              },
            ],
          },
        ]);
        break;
      case "CALLBACK_OPERATION_INVOKED":
        console.log("callback operation invoked");
        console.log(message);
        break;
    }
  };

Way 2: calling a method on the embedded visual:

    embeddedVisual.setActions([
      {
        Name: "test click action",
        CustomActionId: `test-click-action`,
        Status: "ENABLED",
        Trigger: "DATA_POINT_CLICK", // or 'DATA_POINT_MENU'
        ActionOperations: [
          {
            CallbackOperation: {
              EmbeddingMessage: {},
            },
          },
        ],
      },
    ]);
  };

I have also tried both of these with the package loaded through node_modules/package.json. [email protected].

[yradchen]

tchths, this is a different issue, unrelated to the original issue. I see you opened up a new issue.