below follows the code sample that should work out-of-the-box by Microsoft documentation: https://github.com/microsoft/powerbi-client-vue-js
I would like to integrate the module powerbi-client-vue-js with the importmap approach, but something goes wrong at import-time for PowerBIReportEmbed component that makes me harder to debug the error above:
Uncaught TypeError: Cannot read properties of null (reading 'defineComponent')
I have created a public example dashboard. The access token should not be needed but it was one of thousands of examples I have followed and I leave it there.
<!DOCTYPE HTML>
<html>
<head>
<title>Play PowerBI Client VueJS</title>
<script type="importmap">
{ "imports":
{ "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
"vuetify": "https://unpkg.com/[email protected]/dist/vuetify.esm.js",
"powerbi-report-authoring": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
"powerbi-router": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
"powerbi-models": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
"powerbi-client": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
"powerbi-client-vue-js": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
"window-post-message-proxy": "https://cdn.jsdelivr.net/npm/@ont-community/[email protected]/+esm",
"http-post-message": "https://cdn.jsdelivr.net/npm/[email protected]/+esm"
}
}
</script>
</head>
<body>
<div id="app" class="mt-8 mb-4">
<PowerBIReportEmbed
:embed-config="reportConfig"
css-class-name="reportClass"
:phased-embedding={false}
:event-handlers="reportHandlers"
>
</PowerBIReportEmbed>
</div>
<script type="module" lang="js">
import { createApp, ref } from 'vue'
import { createVuetify } from 'vuetify'
import pbi from 'powerbi-client';
import "powerbi-report-authoring"
import { PowerBIReportEmbed } from 'powerbi-client-vue-js'
const vuetify = createVuetify({
theme: {
defaultTheme: 'light'
}
})
createApp({
data: () => ({
report: undefined,
reportConfig: {
type: "report",
id: "74d7db75-6278-4066-8d7d-b67693080566",
embedUrl: "https://app.powerbi.com/view?r=eyJrIjoiYWI5OGViZjItYmZmNi00NmYwLTlmMjAtYjc5ODBiM2Q4NDhhIiwidCI6IjA1NGMzYmE3LTlhNDMtNGM4Ny05YmRiLThiNGYyZTJlYmRkYyIsImMiOjl9",
accessToken: "H4sIAAAAAAAEAC2WxQ7siBVE_-VtHclMkWZht6nNTDszMzvKv6ejmf1dHd06Vf_5YyZPPyX5n3__YZDMcrJrhKxmCmmvHoHqi6KOje0HYbLpYhbDVGIchTJFGhkloNfCiUssmA3Qg54n5IcLtO7yRPCnCB4JMaw4P0vV-DSqGiXkRjb0EySIkSpppdAjmVv4PJkmlSoupnsfDKHG_bzRBPTvlanEgOGZQ5OOOM3FoVAxcEftadNaQgeh1VNOdR_pXqGzL025aet-V-mimY05V07E72zJ2hpvsEJBPEnKKAAi37pLPGKW-qZGHkNCbTSTzDGVMLlI6J6pweqR-Hl2u-e1qNeVvxJXOEiK3AFIyF9IRnp3fna1b2yyLQHOM-ueegjkHW3xAz_BTlqPrNd7tb5PIDNQOZXDNDdbB2VBAu1-KNxK0bg9Lpj2nl3awFGfLJwiEb0XvJ79u1srTyLYYwLfMs56voZrp284uH3isI3ikm1dyXhH-qXRRz4sNnIFLM4oWD_ZaDQN880bY6cS4quz5kbflit5hQviGyelSeNIydiql-pQ7J0SDiF_UK6Id8kXN29vsjcglXT74PilMOg03UwPyTOUEScd0KopEsgq0jIgn_Srb6-yVZ_nfiFE4FS4Ed-iGS-WWSZUE6hcdWxGOwXlIEVYvYmenuC9VDUqWXC4iHpj3aNG5Itoa5gXAjt8-zAJ74MRYH1KfU6TofBb6toeExYk65y6h8x7xJmVD9QLszm1dmExxSPyMlU6OwmWOCGmXGbxvoGdrPXJJIrj0dI1iwYzYDTlycV8errhaKXH3DpnaP06I_3-aDbg9Hk-w3RGDrBrXTIO7PR0x_T7VBF8-d8LEiKKeip4tuiLAZiHaGVOxsUKsCU7AnlgSkXUGWebSKelw1gTIW_YmO3z6w8bJJVwwyywlhQVBxjJy1X4-c57uVJQUgInL99nBRPdwi5Xg64Ykl5NC31Dg-VttbThT37NLuf4geDYRupYasXG9OguxC8wZvtZH2l3vOydGnmQoIB4azkIA-uDAYe6O7SZIZLv1yPMhbJKbzTKMApLD55xswFtD3lzvNbu24PJaVJP-L4X6rsb5iProLUDK33KVs85BjQtWaJTZ3kbsBhj8IEkCJQm84qR3G2BOnOKWZYgmLEhguodHYUrMdQaq8PHGvdRUxduod_Ml90P18YUw3zzIbtgxqMV8PeemIO80YAPRfOdS3JDtjMbKzBVydCfE8O45sQBOtzxRbTrAIO_NukoIps6u9vrlVZbqtICKzEr_AjGeHBVhpCvjfHQ4Hnwj3UmPxnU364fgl89GmAHUJdSyodCGoWZfhg4TF0Fq48W0u3p4j0G2V3cFFM00lb-wt2kyONxoIMQMmbeyDIArNXD1p70PqrITuSxwOiyuL4Pm4PCeH0RqfsU7k1qX3B97b6AJ1uy-GrDalOkyd_HH0QW-wZ5VmhQIUE0I4S6wzSpCPDmFIqCS5_5sBAMJW03qw1upFRi64q8WWXsRKglm4TWZUmf2L5uKJuMRgGHhTqiQqJS2f_SN4wTGS1Om3n2XGNR4z6CpncF8HMnDpWsge2JmspiG6Ujatm-zAG_n5vc0YzorxJGwsCBoloysbJXZQ8-nAM0xFSISVYIiyuSd9vBVWUtojwDi_nRUHJJOtLuhdxplMWoM094AVzc6N0hYCJJwWROT780DxLtKSrMQZfAS2ryqV9O5BiOdP8ICt83T_kX8ml1refK0LCQpyAjpBltqs_R2VFF6lGQ-zjRWVoPzp4NQx-NHVe6UPnPB3r65hP0bTxxXeVw5MtjUX0VV5QzoYRuMtukD6U0bsaSSHDqKncT_mk7mUDagvL2gfDNGhbmi28i31WueR9Tbu5aJTChNcWsfx8_hyTbQppaLMt4hLpCN7ioMzU-FiFHLj0wZbKxCQg1XICCyRkFKWpwk7OO9PRzNfGAP744RBwSQAK2z6MxDEvAcKac-vm1HijAfEWD_Q76qF66N4rj0RFkx9NUPfuZsF7BRk_xjVTm0G3AtXq4VlwEEGah9ziUXU7ZIJKkHjsGr7f5MJItEhbZnvWJ05nKFraj81f4IPy9Z9JGZ5XWR1_fh2SgPAax1vy2jyo21XgkKd3RkI0Hpd6AwZ668pIGLyIHDX86qWVj7pZerzyEAoLXGB_hPCjyBKknIFFIk7090UmeWhUT_6JI-WTIm5w3skyR0IjPdPQIz4RRcga7bSRJqCOmVYmxZS4VDRfel-II8ATVLp1kBmMd0tr63H3Xw1DeRN-Kzk7SB6aBMaytIQWSHoFB0BEmt2zt2xyt9iLndBLTCGA6MLqtBdWpnlnZvEpWf8mBa2Ce-sGZbU10ZVLFRzYsbIDaUsIQuy_lE0i7O2g5k873dXrH6_x5cmTIClNXqD4EmiX0eEKR-BStSDDuBF22OksR3HugtqeWgcfkBGBvD-d_qyfkJJMSPtdZLd2HKJXN184V8PCQj3j4HECPIMnKU_MgfoMbWMLd-PaPfnnhHX6UEbNMR0RoHQnjKur0wutA66-__vzrz0_48z4pxfObaUmEcCu7rSZ3fE6PQqbxegUN16Cm_AEVRnyVhWkwZMqeiSb6FZQBFaTeLXuSkr0JkTnjXy7atos96C-0JCaEgsHmk1vkWDj57vGgZ1j8NpXJKhYxtQJA0dKbXz--b7CaS-7cSIasYRjTWjf0Yy52QUgs86kf8Tvmu81Qwugb0VY4pxeGqR0LPBJ8hTCWtfcVIftrgoN7dID1aw21DM2tD7KqjYejoZXZzWtOfL8h4RW766l3169Dn21bMyK_WSFGyrVhbqsBz5f0X-3I-WvpHxCIMJaQ7ubAUI80OeY3Ozhy5kahY7G3cQTOsChHgGJQBxygcPdLwIJ0vAeZzxGMFeHmH8zPXBfr1_9RdunmjJ8tHeYl6OJ4rcQeNf--cppqTPZjLX5nJuRX3RQGmdjyq5UPTaV--uS0rq83cZzROikrQ-ZyGN1sqvdPcAGmTnmRG6k2DrPhS7ZpyQpPgTqIKeRFUxqS7sWu6gU4KPLdeiX8eK0ooKfPD71kHNAck5nqPhvkKKuJmB15TBqTsHPq7vhHu-YGsp4cf50ag5PFn9rTrUPOD-I84YCUv4cDbo4F1D7G6K_1-8Nu-_AHXFeLaKMD27Xb0gm6vMbDZ85vW33Cbqx9ByJOI4DZFas4OXhC2J4q4TSNrQfk5Ym8FMUGlOZL6A4xT9k72I57zFvF140V-_tbq1x_vcfPipr05cEusNkNqG4D9jVSPcszkZfiV77Vgtz4LQH_x_zf_wGPhDTtmgwAAA==.eyJjbHVzdGVyVXJsIjoiaHR0cHM6Ly9XQUJJLVVTLU5PUlRILUNFTlRSQUwtcmVkaXJlY3QuYW5hbHlzaXMud2luZG93cy5uZXQiLCJleHAiOjE3MDg0NDgwMjksImFsbG93QWNjZXNzT3ZlclB1YmxpY0ludGVybmV0Ijp0cnVlfQ==",
tokenType: null,
},
}),
methods: {
reportHandlers() {
console.log("8")
new Map([
['loaded', () => console.log('Report loaded')],
['rendered', () => console.log('Report rendered')],
['error', (event) => console.log(event.detail)]
])
}
}
}).use(vuetify).use(PowerBIReportEmbed).mount('#app')
</script>
</body>
</html>
I have tried also the plain powerbi-client approach following the SO question: Power BI embed + VueJS error: "TypeError: Cannot read property 'powerBiEmbed' of null"
and I succeed in embedding the report, but not to handle events with this.report.on("rendered") in example.
I would really like to use the module provided by MS to embed PowerBI with VueJS 3. Moreover I use vuetify but I think it doen't matter.
Can you please tell me why an object is null/undefined so that the .defineComponent attribute raises this error? And how to debug such import errors? console.log/debugger doesn't help too much.
Thank you in advance fero aka feroda
