Power BI embed + VueJS error: "TypeError: Cannot read property 'powerBiEmbed' of null"

Question

I'm doing some tests based on VueJS + Power BI integration for a project I have in mind and I'm not able to get to run the basic example of the official page (https://microsoft.github.io/PowerBI-JavaScript/demo/v2-demo/).

I'm trying to embed de example report on an iframe placed at the HellowWorld,vue component of an empty new VueJS project created with vue-cli. I'm stuck at this point: getting the next error: "TypeError: Cannot read property 'powerBiEmbed' of null"

<template>
  <div class="hello">
    <iframe id="container" width="1800" height="750"></iframe>
  </div>
</template>

<script>

import * as pbi from 'powerbi-client';

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },

  created () {


    var permissions = pbi.models.Permissions.All

    var config = {
          type: 'report',
          tokenType:  pbi.models.TokenType.Embed,
          accessToken: 'H4sIAAAAAAAEACWWtQ7sCBZE_-WlXslMK03QZmbOzMxu02j_fXs0eSW3VFX3_P3HSp9hTos___0DQIfa7ln3aQzt9GkQlP0JN1bceBKKwI_lw5KTxiwpIT5MdwV3nMBtD8sgsosZHW29kg2q4rbC9DzNtLiwwqhfXEB8JGoBEDo_zjHRoUXflcEcShthKCB53ongwZMEB3xMD4vBXnJY4owTZQunECmIXeJvJH3MWp8bjQdOmGmAyq7RPQ3oUOrMp7B0zNxCEdyoDMZZyZjjrAWmoZnqWGxJvFyYQ9MyhVugvJea8C23zFonkDdJFYgeeD2UhyrMUlS02IK_iA7qlhrTds4fy9YOgYDnjnFf3-8bFwlKGRA9rmWwkUUpNzjqkg1XvXtpS6C8bumIvkZcfazcAjFwfF8NFXi6YQNogrCmXPnmsvgX7ncR4Oa2s0Jhij7p_CxPX7srwyFdsZvg8ZK3QR_a2XET22Fg3YqbwRBaD7avNEnxqqLKGm6Uat5aqf0M5fsX_67drCdgooX8F0Ic1ZGacy1J6MXC0dVwIEvwSEfTQKTgoovQ5JWIcOhYlrHgp-VXbxsTfDku3KxYO63mnqOs27usis65C3neVlyHGymXZjmDRUsc2Qc96VCb-DKLCBXDz56UxcZ8eUOT4jSgsju8GJHq_alm7TGvR9HxfaAUhWTLPlvGezl6Ndt5PnG5eU-7gaciReDCrs2mTzUfK4e8rsLyKKPYXFCN5iERp-oH1b1gF8DJjOWGPjBfut0uCuRR4bRPhiI1WPZqo7HzR-M8OBu9dWAsReRbuJcCB9q9jdrYXCOLdhSOFJUIJy0CuwF9x6ginLF5BJ99Z4XsvM4Jl5yEYE5nb2IdnN8y-1wFcFZsTCkflLAjixn2W8aWBljzrV48c0pTZgHRa8brqtAByHWKdp_yX5TKMqCSdY7YKCuxX3HIFnOkoFQeQX5Kmo73UPxQaHTD-7DRuahW5GFXyXdfeKbjzBbyuWU6yI-tOygFACF-r2-IrmwDQRV4jvetVWBGAJK0WqgnDq2qxg5QF89IF5sYOsaos6ybpYK7giOdFamOmDA2TDPSfYLudF7I3-0RvF95qDCWUmcadJIxu5Av7qVPZArLwms2x8jq6toBVB3-HFhbij20dMNQtxmYQFNm7MVnSxmnG8R6pO9l9Y4ePwVdimSPZw-OJ5IvK-Lb7twrnIGZmlWvHouenC7ntbzHuJUSGRzT6Yx5UDbzvT3hSB8FV65iTS4MutxnAUXMtF_j_LnU7zU7V8-cJBWtbnqpKPx8NMosaddmSvEg6kzO26WfMqVJhfN2cuDLZFVN8KbjXdJK8PFbWO5CeYDSEMcRaFvX2PENrcNewG2Q-oMIWrduZV71vaWJVHdYvoN9f7pRUhI_mzxA-yAZXjPsgg8VYVUqOMMOTH7IHQpUYyzQ2YuYLaZXpWV9wSdjMUdIWMg2nl4fPidWVJ7Ra3OF7ZiKBdFnY-8_RCp39fKKJSxG2nUjywKB44x9vzB652apObAFHkYTKiL5G6oMZ2qYI3mJUib1Sfub20mk-TpeNXYjg0E2tLGREpW0PryH4s61Z--FQSnNTSQMSDBurbIR7OsW5JvohxtpYmOzRTZ-bU66yi3rcnsGf4OlGoVRf6N2JOQphEVuauunb124Cw_0LyUNSK7fXh_sFmALNEceNZDbt-KVGK246Hs1JDDgQZqMI5y7cwn6owjvlLJPboW0w6oNK9ibnH8pcR2bnZEh4LPw1_fziGV5JEiGxjuF-56xhBDEeOYiUTswq1tIzTqjF-ZiS2WPrwzDw5CFXQRR8YEadnTexYAVzYkDT7epdLKR1OraWUkOz4KIXqF8ZLG_MvSHLPULxsyhjlJ-8OZLAibhatZeMD3O_6gWmFS57YoQFSOaKMtp6kQUmLBfzRegj-diMj8AQkk8OyDP4Y1DWtZ-_ec30fPcVNZXRvtvCYYDcwVN9tLJeGrfiuV_Q-kT-mWRw8VyWn5QWRHjqNpzyZNi-Xg9l9WlZhEW_Bl4I7kVSSpCcKkvjGeDRGjr4ALk6bn1asI0lPAhqog0OOTY1Tm2WACX6t0xIitPbgdoAGoRAwQMHQj9PS7KpgP7ALBI0fqzudwP9hr0d5GcAPXkbzeJhFVLHAkO91rkJ8bblJyHmgwjnEuFWSXaaJjew28LVFUL_A49ntHg_vznD7s9yzGr5fPDCfM5Kn56mBLl9WuBygF3kxZZNnR0qzVh5S2Ypnq35dhmxnkhVaTZj2y6d07cUIkLTcQkFm5ZX7fZUP_rQLBYs7CgqCbI4XcJ7nbPga5SvxdFJ9nwtL7QD-aRBjr8bHoq80EfbD6V4F86JJVxnPwidGBdc5DpEK8VJ8iZV4micvIUkINzXEnk17XkByTiqmQaR3177BlarPjA54foLkyURzLGhb3Mz7kT2vXOjboS2deon1QWzXmia_1-W2WHXSek7JRaeKObSjmWQYGtOVVr-TJqoPDuNho68zab3VjhTnwNdw436Y-9xvsPHwLG6M1qXWJ7_p2tib6uj23HG8wDlYV__fXXPzY_S1NucvBzmew-p_9mix48knIOqR8Eb_qvym3rKT2-W_mTDdccbs2MSyxCggAqFWGjLCnokiSq6ccv7R7sbhdLss4v30vtCR5el20KeO7AiucUtOe2cLYxCarloNntqLVGI4IVR5NY8GUOyVjIe8ktTwWPmVr7OgfFWzbB8DcWPmbCy1Jg8jsblsYkkoC52juqZv3ASzsHYYzBxzJjSG4TZP6DWgppNG6tWPmZbvp6f3rwi1hb5Sx2GJZ-AqHJHa1E9EMS7kHFStUkJHJi3QTz6Cnu9_5kAYYhhRw19xD6Y99EcBUhWQMcH226YYkJ_W-84rkO5Y33UhvnHclksCwRtkQ50j-yOGYpaOtFX5zsZeWmN1TOvcMfAvKo7c5ETvvYIR_1z-b__R9GklbbQgsAAA==',
          embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=f6bfd646-b718-44dc-a378-b73e6b528204&groupId=be8908da-da25-452e-b220-163f52476cdd&config=eyJjbHVzdGVyVXJsIjoiaHR0cHM6Ly9XQUJJLVVTLU5PUlRILUNFTlRSQUwtcmVkaXJlY3QuYW5hbHlzaXMud2luZG93cy5uZXQifQ%3d%3d',
          id: 'f6bfd646-b718-44dc-a378-b73e6b528204',
          permissions: permissions,
          settings: {
              filterPaneEnabled: true,
              navContentPaneEnabled: true
          }
      };


    let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
    var reportContainer = document.getElementById('container');
    var report = powerbi.embed(reportContainer, config);

    report.off("loaded");


    report.off("rendered");



    report.on("error", function () {
        this.report.off("error");
    });

  }
}
</script>

What am I doing wrong?

Answer 1

I had a similar issue but just moving the code on mounted() did not work but is the correct way of approaching the problem.

Instead of using

var reportContainer = document.getElementById('container');

to reach the DOM element I used the $ref property of Vue.js

To be more clear:

<template> <section ref="reportContainer"></section> /<template>

While in the script part (mounted()), where reportContainer is created

var reportContainer = this.$refs.reportContainer;

Answer 2

I have found the solution, I have just moved the code of my original post to the mounted() lifecycle-method and it works fine now. The problem was that the PBI code was executing before the creation of the div thant contains the report so PBI was receiving an object that didn't exist. Moving the code to mounted() seems to fix the problem. Thank you for your help.

Answer 3

Try this code.

<div id="container" style="width:100%;
height:800px;"></div>


var config = {
  type: 'report',
  tokenType: pbi.models.TokenType.Embed,
  accessToken: 'H4sIAAAAAAAEACWWtQ7sCBZE_-WlXslMK03QZmbOzMxu02j_fXs0eSW3VFX3_P3HSp9hTos___0DQIfa7ln3aQzt9GkQlP0JN1bceBKKwI_lw5KTxiwpIT5MdwV3nMBtD8sgsosZHW29kg2q4rbC9DzNtLiwwqhfXEB8JGoBEDo_zjHRoUXflcEcShthKCB53ongwZMEB3xMD4vBXnJY4owTZQunECmIXeJvJH3MWp8bjQdOmGmAyq7RPQ3oUOrMp7B0zNxCEdyoDMZZyZjjrAWmoZnqWGxJvFyYQ9MyhVugvJea8C23zFonkDdJFYgeeD2UhyrMUlS02IK_iA7qlhrTds4fy9YOgYDnjnFf3-8bFwlKGRA9rmWwkUUpNzjqkg1XvXtpS6C8bumIvkZcfazcAjFwfF8NFXi6YQNogrCmXPnmsvgX7ncR4Oa2s0Jhij7p_CxPX7srwyFdsZvg8ZK3QR_a2XET22Fg3YqbwRBaD7avNEnxqqLKGm6Uat5aqf0M5fsX_67drCdgooX8F0Ic1ZGacy1J6MXC0dVwIEvwSEfTQKTgoovQ5JWIcOhYlrHgp-VXbxsTfDku3KxYO63mnqOs27usis65C3neVlyHGymXZjmDRUsc2Qc96VCb-DKLCBXDz56UxcZ8eUOT4jSgsju8GJHq_alm7TGvR9HxfaAUhWTLPlvGezl6Ndt5PnG5eU-7gaciReDCrs2mTzUfK4e8rsLyKKPYXFCN5iERp-oH1b1gF8DJjOWGPjBfut0uCuRR4bRPhiI1WPZqo7HzR-M8OBu9dWAsReRbuJcCB9q9jdrYXCOLdhSOFJUIJy0CuwF9x6ginLF5BJ99Z4XsvM4Jl5yEYE5nb2IdnN8y-1wFcFZsTCkflLAjixn2W8aWBljzrV48c0pTZgHRa8brqtAByHWKdp_yX5TKMqCSdY7YKCuxX3HIFnOkoFQeQX5Kmo73UPxQaHTD-7DRuahW5GFXyXdfeKbjzBbyuWU6yI-tOygFACF-r2-IrmwDQRV4jvetVWBGAJK0WqgnDq2qxg5QF89IF5sYOsaos6ybpYK7giOdFamOmDA2TDPSfYLudF7I3-0RvF95qDCWUmcadJIxu5Av7qVPZArLwms2x8jq6toBVB3-HFhbij20dMNQtxmYQFNm7MVnSxmnG8R6pO9l9Y4ePwVdimSPZw-OJ5IvK-Lb7twrnIGZmlWvHouenC7ntbzHuJUSGRzT6Yx5UDbzvT3hSB8FV65iTS4MutxnAUXMtF_j_LnU7zU7V8-cJBWtbnqpKPx8NMosaddmSvEg6kzO26WfMqVJhfN2cuDLZFVN8KbjXdJK8PFbWO5CeYDSEMcRaFvX2PENrcNewG2Q-oMIWrduZV71vaWJVHdYvoN9f7pRUhI_mzxA-yAZXjPsgg8VYVUqOMMOTH7IHQpUYyzQ2YuYLaZXpWV9wSdjMUdIWMg2nl4fPidWVJ7Ra3OF7ZiKBdFnY-8_RCp39fKKJSxG2nUjywKB44x9vzB652apObAFHkYTKiL5G6oMZ2qYI3mJUib1Sfub20mk-TpeNXYjg0E2tLGREpW0PryH4s61Z--FQSnNTSQMSDBurbIR7OsW5JvohxtpYmOzRTZ-bU66yi3rcnsGf4OlGoVRf6N2JOQphEVuauunb124Cw_0LyUNSK7fXh_sFmALNEceNZDbt-KVGK246Hs1JDDgQZqMI5y7cwn6owjvlLJPboW0w6oNK9ibnH8pcR2bnZEh4LPw1_fziGV5JEiGxjuF-56xhBDEeOYiUTswq1tIzTqjF-ZiS2WPrwzDw5CFXQRR8YEadnTexYAVzYkDT7epdLKR1OraWUkOz4KIXqF8ZLG_MvSHLPULxsyhjlJ-8OZLAibhatZeMD3O_6gWmFS57YoQFSOaKMtp6kQUmLBfzRegj-diMj8AQkk8OyDP4Y1DWtZ-_ec30fPcVNZXRvtvCYYDcwVN9tLJeGrfiuV_Q-kT-mWRw8VyWn5QWRHjqNpzyZNi-Xg9l9WlZhEW_Bl4I7kVSSpCcKkvjGeDRGjr4ALk6bn1asI0lPAhqog0OOTY1Tm2WACX6t0xIitPbgdoAGoRAwQMHQj9PS7KpgP7ALBI0fqzudwP9hr0d5GcAPXkbzeJhFVLHAkO91rkJ8bblJyHmgwjnEuFWSXaaJjew28LVFUL_A49ntHg_vznD7s9yzGr5fPDCfM5Kn56mBLl9WuBygF3kxZZNnR0qzVh5S2Ypnq35dhmxnkhVaTZj2y6d07cUIkLTcQkFm5ZX7fZUP_rQLBYs7CgqCbI4XcJ7nbPga5SvxdFJ9nwtL7QD-aRBjr8bHoq80EfbD6V4F86JJVxnPwidGBdc5DpEK8VJ8iZV4micvIUkINzXEnk17XkByTiqmQaR3177BlarPjA54foLkyURzLGhb3Mz7kT2vXOjboS2deon1QWzXmia_1-W2WHXSek7JRaeKObSjmWQYGtOVVr-TJqoPDuNho68zab3VjhTnwNdw436Y-9xvsPHwLG6M1qXWJ7_p2tib6uj23HG8wDlYV__fXXPzY_S1NucvBzmew-p_9mix48knIOqR8Eb_qvym3rKT2-W_mTDdccbs2MSyxCggAqFWGjLCnokiSq6ccv7R7sbhdLss4v30vtCR5el20KeO7AiucUtOe2cLYxCarloNntqLVGI4IVR5NY8GUOyVjIe8ktTwWPmVr7OgfFWzbB8DcWPmbCy1Jg8jsblsYkkoC52juqZv3ASzsHYYzBxzJjSG4TZP6DWgppNG6tWPmZbvp6f3rwi1hb5Sx2GJZ-AqHJHa1E9EMS7kHFStUkJHJi3QTz6Cnu9_5kAYYhhRw19xD6Y99EcBUhWQMcH226YYkJ_W-84rkO5Y33UhvnHclksCwRtkQ50j-yOGYpaOtFX5zsZeWmN1TOvcMfAvKo7c5ETvvYIR_1z-b__R9GklbbQgsAAA==',
  embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=f6bfd646-b718-44dc-a378-b73e6b528204&groupId=be8908da-da25-452e-b220-163f52476cdd&config=eyJjbHVzdGVyVXJsIjoiaHR0cHM6Ly9XQUJJLVVTLU5PUlRILUNFTlRSQUwtcmVkaXJlY3QuYW5hbHlzaXMud2luZG93cy5uZXQifQ%3d%3d',
  ,
  id: 'f6bfd646-b718-44dc-a378-b73e6b528204',
  permissions: pbi.models.Permissions.All,
  settings: {
    filterPaneEnabled: false,
    navContentPaneEnabled: true
  }
};

// Get a reference to the embedded report HTML element
var embedContainer = document.getElementById('container');

// Embed the report and display it within the div container.
console.log(pbi);
var report = powerbi.embed(embedContainer, config);

// Report.off removes a given event handler if it exists.
report.off("loaded");

// Report.on will add an event handler which prints to Log window.
report.on("loaded", function () {
  console.log("Loaded");
});

// Report.off removes a given event handler if it exists.
report.off("rendered");

// Report.on will add an event handler which prints to Log window.
report.on("rendered", function () {
  console.log("Rendered");
});

report.on("error", function (event) {
  console.log(event.detail);

  report.off("error");
});

report.off("saved");
report.on("saved", function (event) {
  Log.log(event.detail);
  if (event.detail.saveAs) {
    console.log('In order to interact with the new report, create a new token and load the new report');
  }
});