awslabs / amazon-quicksight-embedding-sdk

A SDK to help users embed QuickSight dashboards on other pages.
Apache License 2.0
171 stars 40 forks source link

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

Closed aikeda closed 3 months ago

aikeda commented 11 months ago

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 commented 9 months ago

Hello,

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

yradchen commented 7 months ago

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/amazon-quicksight-embedding-sdk@2.6.0/dist/quicksight-embedding-js-sdk.min.js"></script>

tcths commented 2 months ago

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

I have tried two ways. I am loading the package with the Githubissues.

  • Githubissues is a development platform for aggregating issues.