Blazor Bug: IJSInProcessRuntime doesn't import JavaScript modules

[aradalvand]

Describe the bug

A synchronous JS interop call via JSInProcessRuntime to import a JavaScript module fails to do so.

To Reproduce

Here's all you need to reproduce the problem:
Pages/Index.razor:

@page "/"
@inject IJSRuntime JS

<button class="btn btn-primary" @onclick="ClickHandler">Click me</button>

@code {
    private IJSInProcessObjectReference module;

    protected override void OnInitialized()
    {
        module = (JS as IJSInProcessRuntime).Invoke<IJSInProcessObjectReference>("import", "./myModule.js");
        // The above doesn't work (it doesn't throw an exception though), while the below does work:
        //module = await (JS as IJSInProcessRuntime).InvokeAsync<IJSInProcessObjectReference>("import", "./myModule.js");
    }

    private void ClickHandler()
    {
        module.InvokeVoid("sayHello"); // Causes an exception to be thrown: Could not find 'sayHello' ('sayHello' was undefined).
    }
}

wwwroot/myModule.js

export function sayHello() {
    alert("Hello!");
}

Exceptions (if any)

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Could not find 'sayHello' ('sayHello' was undefined). Error: Could not find 'sayHello' ('sayHello' was undefined). at https://localhost:44384/_framework/blazor.webassembly.js:1:1287 at Array.forEach (<anonymous>) at e.findFunction (https://localhost:44384/_framework/blazor.webassembly.js:1:1247) at b (https://localhost:44384/_framework/blazor.webassembly.js:1:2989) at Object.invokeJSFromDotNet (https://localhost:44384/_framework/blazor.webassembly.js:1:3790) at Object.w [as invokeJSFromDotNet] (https://localhost:44384/_framework/blazor.webassembly.js:1:64287) at _mono_wasm_invoke_js_blazor (https://localhost:44384/_framework/dotnet.5.0.1.js:1:190800) at do_icall (https://localhost:44384/_framework/dotnet.wasm:wasm-function[10596]:0x194e58) at do_icall_wrapper (https://localhost:44384/_framework/dotnet.wasm:wasm-function[3305]:0x79df9) at interp_exec_method (https://localhost:44384/_framework/dotnet.wasm:wasm-function[2155]:0x44ad3) Microsoft.JSInterop.JSException: Could not find 'sayHello' ('sayHello' was undefined). Error: Could not find 'sayHello' ('sayHello' was undefined). at https://localhost:44384/_framework/blazor.webassembly.js:1:1287 at Array.forEach (<anonymous>) at e.findFunction (https://localhost:44384/_framework/blazor.webassembly.js:1:1247) at b (https://localhost:44384/_framework/blazor.webassembly.js:1:2989) at Object.invokeJSFromDotNet (https://localhost:44384/_framework/blazor.webassembly.js:1:3790) at Object.w [as invokeJSFromDotNet] (https://localhost:44384/_framework/blazor.webassembly.js:1:64287) at _mono_wasm_invoke_js_blazor (https://localhost:44384/_framework/dotnet.5.0.1.js:1:190800) at do_icall (https://localhost:44384/_framework/dotnet.wasm:wasm-function[10596]:0x194e58) at do_icall_wrapper (https://localhost:44384/_framework/dotnet.wasm:wasm-function[3305]:0x79df9) at interp_exec_method (https://localhost:44384/_framework/dotnet.wasm:wasm-function[2155]:0x44ad3) at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeJS(String identifier, String argsJson, JSCallResultType resultType, Int64 targetInstanceId) at Microsoft.JSInterop.JSInProcessRuntime.Invoke[Object](String identifier, Int64 targetInstanceId, Object[] args) at Microsoft.JSInterop.Implementation.JSInProcessObjectReference.Invoke[Object](String identifier, Object[] args) at Microsoft.JSInterop.JSInProcessObjectReferenceExtensions.InvokeVoid(IJSInProcessObjectReference jsObjectReference, String identifier, Object[] args) at VidazorTest.Pages.Counter.ClickHandler() in C:\Users\Arad\Desktop\VidazorTest\VidazorTest\Pages\Counter.razor:line 18 at Microsoft.AspNetCore.Components.EventCallbackWorkItem.InvokeAsync[Object](MulticastDelegate delegate, Object arg) at Microsoft.AspNetCore.Components.EventCallbackWorkItem.InvokeAsync(Object arg) at Microsoft.AspNetCore.Components.ComponentBase.Microsoft.AspNetCore.Components.IHandleEvent.HandleEventAsync(EventCallbackWorkItem callback, Object arg) at Microsoft.AspNetCore.Components.EventCallback.InvokeAsync(Object arg) at Microsoft.AspNetCore.Components.RenderTree.Renderer.DispatchEventAsync(UInt64 eventHandlerId, EventFieldInfo fieldInfo, EventArgs eventArgs)

Further technical details

• ASP.NET Core version 5.0.1
• Blazor WebAssembly

[SteveSandersonMS]

JavaScript's invoke mechanism is inherently asynchronous - it always returns a Promise - so it's not useful to call it synchronously in this way.

The reason there's no error when you call (JS as IJSInProcessRuntime).Invoke<IJSInProcessObjectReference>("import", "./myModule.js") is because that's a legal thing to do - just not a useful thing to do. What it's doing is creating an IJSInProcessObjectReference that represents the synchronous return value from the import call, i.e., a Promise instance. You could technically use it later by calling .then on it, but that's way more difficult than just using InvokeAsync in the first place, and still doesn't let you escape from the asynchrony.

[aradalvand]

@SteveSandersonMS That was a shed of light! Thanks. I was quite confident that this was a bug. Good to know that it actually isn't.
But I think it makes sense to mention and explain this in the docs, as it's not intuitive and clear at first glance, I think you'd agree.
Thanks, again.

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.