Blazor Maui project calling JS function in Razor component using generated code ExampleJsInterop fail.

[vsfeedback]

This issue has been moved from a ticket on Developer Community.

---

[severity:It's more difficult to complete my work]
I created a simple Blazor MAUI project.
I added a simple Razor class library, which contain two JavaScript files, a simple razor component with three buttons, and two C# wrapper classes for JavaScript methods call.
One of the JavaScript file use the export keyword and the other is not.

The first wrapper class uses the default method code generated

public async ValueTask Prompt(string message)
{
var module = await moduleTask.Value;
return await module. InvokeAsync("showPrompt", message);
}
The second wrapper uses JSRuntime JS
public async ValueTask Prompt(string message)
{
return await JS. InvokeAsync("showPrompt", message);
}

My basic Razor component is defined as the following:
@Inject ExampleJsInterop exampleJsWithModule
@Inject IJSRuntime js
@Inject ExampleJsInteropWithJSRunTime exampleJsRunTime

This component is defined in the RazorClassLibrary library. Call JS function from C# with Module Call JS function from C# With JSruntime Call JS function from script

@code{

private async void CallJSFunctionFromCSWithModule()
{
await exampleJsWithModule.Prompt("Hello, this does not work!");
}
private async void CallJSFunctionFromCSWithJSruntime()
{
await exampleJsRunTime.Prompt("Hello, this does not work!");
}

private async void CallJSFunctionFromScript()
{
await js. InvokeAsync("showPromptFromJS", "Hello, this work!");
}
}

Only CallJSFunctionFromScript works.
CallJSFunctionFromCSWithJSruntime and CallJSFunctionFromCSWithModule failed.
I have called in MauiProgram.cs:
builder. Services.AddSingleton();
builder. Services.AddSingleton();

and I also have in index.html:

<script src="./_content/RazorClassLibrary/exampleJsInterop.js"></script> <script src="./_content/RazorClassLibrary/JsInterop.js"></script>

However If I create a blazor WebAssembly app not a Blazor Maui app
CallJSFunctionFromScript and CallJSFunctionFromCSWithJSruntime work but not CallJSFunctionFromCSWithModule .

Why CallJSFunctionFromCSWithJSruntime and CallJSFunctionFromCSWithModule failed in Blazor Maui?
and why CallJSFunctionFromCSWithJSruntime works in Blazor webassembly app and not in Blazor Maui?

The error I get is:
System.NullReferenceException
HResult = 0x80004003
Message=Object reference not set to an instance of an object.
Source=Microsoft.AspNetCore.Components.WebView
StackTrace:
at Microsoft.AspNetCore.Components.WebView.Services.WebViewJSRuntime.BeginInvokeJS(Int64 taskId, String identifier, String argsJson, JSCallResultType resultType, Int64 targetInstanceId)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, CancellationToken cancellationToken, Object[] args)
at Microsoft.JSInterop.JSRuntime. d__161.MoveNext() at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task) at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at System.Threading.Tasks.ValueTask1.get_Result()
at System.Runtime.CompilerServices.ValueTaskAwaiter`1.GetResult()
at RazorClassLibrary.ExampleJsInteropWithJSRunTime. d__2.MoveNext() in C:\Project\MauiBlazorApp2\RazorClassLibrary\ExampleJsInterop.cs:line 24
This exception was originally thrown at this call stack:
[External Code]
RazorClassLibrary.ExampleJsInteropWithJSRunTime.Prompt(string) in ExampleJsInterop.cs

I attached a zip file of the project.

Thank you

---

Original Comments

Feedback Bot on 3/25/2022, 04:06 AM:

(private comment, text removed)

Denis Ruffo on 3/28/2022, 01:08 AM:

(private comment, text removed)

---

Original Solutions

(no solutions)

[SteveSandersonMS]

Thanks for reporting this. We're tracking this requirement as #5804.

In the meantime if you're able to describe your scenario (in terms of why you need to make the JS interop call from outside a component, and how the system should know which BlazorWebView you're calling into) please let us know as we might be able to make a suggestion.