Skip to content

Microsoft.JSInterop.JSException is thrown when trying to access a JavaScript method in Internet Explorer #14784

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
DanJBower opened this issue Oct 7, 2019 · 3 comments
Closed

Microsoft.JSInterop.JSException is thrown when trying to access a JavaScript method in Internet Explorer #14784

DanJBower opened this issue Oct 7, 2019 · 3 comments
Labels
area-blazor Includes: Blazor, Razor Components

Comments

@DanJBower
Copy link

Describe the bug

Microsoft.JSInterop.JSException is thrown when trying to access a JavaScript method in Internet Explorer. Unfortunately, my deployment environment is restricted to this browser.

To Reproduce

Steps to reproduce the behavior:

  1. Using this version of ASP.NET Core 3.0.0
  2. Run this code (In Internet Explorer):

Create a new Blazor App that runs on server side.

Daddoon's Blazor.Polyfill can be found here and is required to get clicks working in Internet Explorer. Just drop it in wwwroot so that it works with the example below.

_Host.cshtml

@page "/"
@namespace JavascriptInteropExample.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavascriptInteropExample</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>
        @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
    </app>

    <script type="text/javascript" src="blazor.polyfill.min.js"></script>
    <script src="_framework/blazor.server.js"></script>
    <script>
        window.debugOut = (content, userDir = true, prefix = "") => {
            if (userDir) {
                if (prefix) {
                    console.log(prefix);
                }
                console.dir(content);
            } else {
                console.log((prefix ? `${prefix}: ` : "") + JSON.stringify(content));
            }
            return true;
        }
    </script>
</body>
</html>

Index.razor

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

@inject IJSRuntime JsRuntime

<div class="card my-3">
    <h5 class="card-header">Debug Output</h5>
    <div class="card-body">
        <button @onclick="DebugOutString">Output Debug String</button>
    </div>
</div>

@code
{
    private async void DebugOutString()
    {
        await JsRuntime.InvokeAsync<bool>("debugOut", "Test String", false, "Here's a string");
    }
}

3. With these arguments '....'
4. See error

Microsoft.JSInterop.JSException: 'Could not find 'debugOut' in 'window'.
Error: Could not find 'debugOut' in 'window'.
   at Anonymous function (https://localhost:44385/_framework/blazor.server.js:8:28059)
   at p (https://localhost:44385/_framework/blazor.server.js:8:28010)
   at Anonymous function (https://localhost:44385/_framework/blazor.server.js:8:28731)
   at B (https://localhost:44385/blazor.polyfill.min.js:1:81352)
   at e.jsCallDispatcher.beginInvokeJSFromDotNet (https://localhost:44385/_framework/blazor.server.js:8:28701)
   at Anonymous function (https://localhost:44385/_framework/blazor.server.js:1:19139)
   at e.prototype.invokeClientMethod (https://localhost:44385/_framework/blazor.server.js:1:19117)
   at e.prototype.processIncomingData (https://localhost:44385/_framework/blazor.server.js:1:17160)
   at connection.onreceive (https://localhost:44385/_framework/blazor.server.js:1:10267)
   at i.onmessage (https://localhost:44385/_framework/blazor.server.js:1:38025)'

Expected behavior

A log in the console saying Here's a string: "Test String"
@mkArtakMSFT mkArtakMSFT added the area-blazor Includes: Blazor, Razor Components label Oct 7, 2019
@mkArtakMSFT
Copy link
Contributor

Thanks for contacting us, @DanJBower.
There are certain gaps in the IE support which we are going to handle as part of #9436.

@mkArtakMSFT mkArtakMSFT mentioned this issue Oct 7, 2019
Closed
@Daddoon
Copy link

Daddoon commented Oct 7, 2019

Hi @DanJBower !

Are you sure that your Javascript code is compliant with the ECMAScript version used on IE11 ?
I think all is failing because the closure you written is not compatible with IE11 that is pretty old.

You may write with recent Javascript and transpile at build time your javascript code to EcmaScript 5.

I think your code should work if you write this instead (as a proof of the source of the bug):

window.debugOut = function (content, userDir, prefix) {
            
			if (userDir === undefined || userDir === null)
			{
				userDir = true;
			}
			
			if (prefix === undefined || prefix === null)
			{
				prefix = "";
			}
			
			if (userDir) {
                if (prefix) {
                    console.log(prefix);
                }
                console.dir(content);
            } else {
                console.log((prefix ? (prefix + " :") : "") + JSON.stringify(content));
            }
            return true;
        };

@DanJBower
Copy link
Author

@Daddoon Oh, that's my bad. I still couldn't get it to work with your code but when I took it to the simplest level of

window.testMethod = function (content) {
    console.log(content);
};

it did work so I'm sure I can work the rest out from there when I get a little time later today.

Thanks for pointing it out :)

@ghost ghost locked as resolved and limited conversation to collaborators Dec 2, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area-blazor Includes: Blazor, Razor Components
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Daddoon @mkArtakMSFT @DanJBower