Importing a JS module into a .NET MAUI Blazor app fails

Repro steps:

• Create a .NET MAUI Blazor app
• Add a Razor Class Library to the solution and reference it
• Add ExampleJsInterop as a singleton service

builder.Services.AddSingleton<ExampleJsInterop>();

• Update Index.razor with the following:

@page "/"
@using RazorClassLibrary1
@inject ExampleJsInterop InteropTest

<button @onclick="ShowPrompt">Prompt</button>

@code {
    private async Task ShowPrompt()
    {
        var text = await InteropTest.Prompt("Favorite color?");
    }
}

• Run the app and click the prompt button

Expected result: Prompt shown

Actual result:

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.<InvokeAsync>d__16`1.MoveNext()
   at RazorClassLibrary1.ExampleJsInterop.<Prompt>d__2.MoveNext() in C:\Users\daroth\source\repos\MauiApp8\RazorClassLibrary1\ExampleJsInterop.cs:line 23

  This exception was originally thrown at this call stack:
    [External Code]
    RazorClassLibrary1.ExampleJsInterop.Prompt(string) in ExampleJsInterop.cs

This is with .NET 6 and VS2022 17.3.6

[danroth27]

Sorry I meant the actual ExampleJsInterop implemention.

That comes from the Razor Class Library template

[MackinnonBuck]

In MAUI Blazor, IJSRuntime is a scoped service, so it cannot be injected into singleton services.

Closing as by-design.