Embedding Power Bi Report Promise is not defined powerbi.js

Question

I have created a power bi report. I want to embed this report to my MVC site. Here is my code:-

private static readonly string ClientID = ConfigurationManager.AppSettings["ClientID"];
private static readonly string ClientSecret = ConfigurationManager.AppSettings["ClientSecret"];
private static readonly string RedirectUrl = ConfigurationManager.AppSettings["RedirectUrl"];
private static readonly string AADAuthorityUri = ConfigurationManager.AppSettings["AADAuthorityUri"];
private static readonly string PowerBiAPI = ConfigurationManager.AppSettings["PowerBiAPI"];
private static readonly string PowerBiDataset = ConfigurationManager.AppSettings["PowerBiDataset"];
 private static readonly string baseUri = PowerBiDataset;
 private static string accessToken = string.Empty;

 public string GetAccessToken(string authorizationCode, string clientID, string clientSecret, string redirectUri)
        {      
            TokenCache TC = new TokenCache();
            string authority = AADAuthorityUri;
            AuthenticationContext AC = new AuthenticationContext(authority, TC);
            ClientCredential cc = new ClientCredential(clientID, clientSecret);
            return AC.AcquireTokenByAuthorizationCodeAsync(
                authorizationCode,
                new Uri(redirectUri), cc).Result.AccessToken;
        }

        public void GetAuthorizationCode()
        {
            var @params = new NameValueCollection
            {
                {"response_type", "code"},
                {"client_id", ClientID},
                {"resource", PowerBiAPI},
                { "redirect_uri", RedirectUrl}
            };

            var queryString = HttpUtility.ParseQueryString(string.Empty);
            queryString.Add(@params);
            Response.Redirect(String.Format(AADAuthorityUri + "?{0}", queryString));
        }

        public ActionResult Index()
        {
            if (Request.QueryString["code"] != null)
            {
                Session["AccessToken"] = GetAccessToken(
                    HttpContext.Request["code"],
                    ClientID,
                    ClientSecret,
                    RedirectUrl);
            }
            if (Session["AccessToken"] != null)
            {
                accessToken = Session["AccessToken"].ToString();
                System.Net.WebRequest request = System.Net.WebRequest.Create(
                 String.Format("{0}/Reports",
                 baseUri)) as System.Net.HttpWebRequest;

                request.Method = "GET";
                request.ContentLength = 0;
                request.Headers.Add("Authorization", String.Format("Bearer {0}", accessToken));
                using (var response = request.GetResponse() as System.Net.HttpWebResponse)
                {
                    using (var reader = new System.IO.StreamReader(response.GetResponseStream()))
                    {
                        PBIReports Reports = JsonConvert.DeserializeObject<PBIReports>(reader.ReadToEnd());
                        if (Reports.value.Length > 0)
                        {
                            PBIReport report = Reports.value[13];
                            return View(report);
                        }
                    }
                }
            }
            GetAuthorizationCode();
            return View();
        }

On Redirecting to "this", it goes for power bi login page and after I sign in it redirects back to this page (as homepage and redirect url are same). After getting all the report data, after some time a error message comes up saying Unhandled exception at line 5153, column 11 in http://localhost:34244/Scripts/powerbi.js 0x800a1391 - JavaScript runtime error: 'Promise' is undefined

After that it says

 Exception was thrown at line 1236, column 335 in https://app.powerbi.com/13.0.1781.272/scripts/powerbiportal.dependencies.externals.bundle.min.js

0x80070005 - JavaScript runtime error: Access is denied.

If there is a handler for this exception, the program may be safely continued.

Exception was thrown at line 42, column 17057 in https://app.powerbi.com/13.0.1781.272/scripts/powerbiportal.common.bundle.min.js

0x80070005 - JavaScript runtime error: Access is denied.

If there is a handler for this exception, the program may be safely continued.

And then again it starts Showing the first error message again.

Here is my index.cshtml

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_ColumnsOne.cshtml";
}
<script src="~/Scripts/powerbi.js"></script>
<script type="text/javascript">


    window.onload = function () {
        var accessToken = "@Session["AccessToken"].ToString()";

        if (!accessToken || accessToken == "")
        {
            return;
        }

        var embedUrl = "@Model.embedUrl";
        var reportId = "@Model.id";

        var config = {
            type: 'report',
            accessToken: accessToken,
            embedUrl: embedUrl,
            id: reportId,
            settings: {
                filterPaneEnabled: false,
                navContentPaneEnabled: false
            }
        };

        const filter = {
            $schema: "http://powerbi.com/product/schema#basic",
            target: {
                table: "Query1",
                column: "SchoolID"
            },
            operator: "In",
            values: ["10"]
        };
        var reportContainer = document.getElementById('reportContainer');


        var report = powerbi.embed(reportContainer, config);

        report.on("loaded", function () {
            var logView = document.getElementById('logView');
            logView.innerHTML = logView.innerHTML + "Loaded<br/>";

            report.off("loaded");
        });
        report.on("rendered", function () {
            var logView = document.getElementById('logView');
            logView.innerHTML = logView.innerHTML + "Rendered<br/>";

            report.off("rendered");
        });
        report.setFilters([filter])
        .then(function (result) {
            Log.log(result);
        })
        .catch(function (errors) {
            Log.log(errors);
        });
    };
</script>

<div>
   <div ID="reportContainer" style="width: 900px; height: 550px"></div>
</div>

Answer 1

IE does not yet support Promise. You can enable support by including an external library. Please see Microsoft's comments on this in relation to Power BI here - Support for IE8 and Promises?

I had the same issue with IE11 and the suggestion worked! Hope it helps you too.