[regression/8.0.100-preview.7.23376.3] .NET Maui Blazor App throws "No interop methods are registered for renderer" javascript exception

Description

When creating a new .NET Maui Blazor App in 8.0.100-preview.7.23376.3 and running it results in the following javascript exception when navigating or clicking on the counter button.

Open the dev tools to see the exception:

blazor.webview.js:1  Uncaught Error: No interop methods are registered for renderer 0
    at k (blazor.webview.js:1:13290)
    at blazor.webview.js:1:13196
    at T (blazor.webview.js:1:13379)
    at N (blazor.webview.js:1:13170)
    at x.dispatchGlobalEventToAllElements (blazor.webview.js:1:15755)
    at x.onGlobalEvent (blazor.webview.js:1:14948)

Steps to Reproduce

Create a new .NET Maui Blazor App and target .NET 8 preview (8.0.100-preview.7.23376.3)
Run the app on e.g. Windows Machine
Open the dev tools
Navigate through the menu and you notice the exception
But its easiest to see on the Counter page and clicking the Click Me button

Link to public reproduction project repository

No response

Version with bug

8.0.100-preview.7.23376.3

Last version that worked well

8.0.0-preview.6.8686

Affected platforms

Windows, and others

Affected platform versions

net8.0-windows10.0.19041.0

Did you find any workaround?

https://github.com/dotnet/maui/issues/16609#issuecomment-1672166849

Relevant log output

blazor.webview.js:1  Uncaught Error: No interop methods are registered for renderer 0
    at k (blazor.webview.js:1:13290)
    at blazor.webview.js:1:13196
    at T (blazor.webview.js:1:13379)
    at N (blazor.webview.js:1:13170)
    at x.dispatchGlobalEventToAllElements (blazor.webview.js:1:15755)
    at x.onGlobalEvent (blazor.webview.js:1:14948)

Issue Analytics

State:
Created a month ago
Reactions:2
Comments:14 (9 by maintainers)

Top GitHub Comments

5reactions

Eiloncommented, Aug 10, 2023

Workaround for .NET 8 Preview 7

For anyone encountering this issue in .NET 8 Preview 7 (released August 8th, 2023), here’s how you can work around it in your apps.

Background

A change was made to Blazor in .NET 8 Preview 7 to enable new Blazor Server and WebAssembly rendering scenarios. Unfortunately there is a bug that affects all Blazor Hybrid scenarios (the BlazorWebView control in .NET MAUI, WPF, and WinForms). The bug causes events such as button clicks in the BlazorWebView control to fail.

Workaround steps

Download the file blazor.webview.net8-p7fix.zip, decompress the ZIP, and add the blazor.webview.net8-p7fix.js in it to your app’s wwwroot folder
Edit your app’s wwwroot/index.html file and change the _framework/blazor.webview.js reference to instead point to the new file you added:
```
<script src="blazor.webview.net8-p7fix.js" autostart="false"></script>
```
(Note that the exact filename/sub-folder don’t matter, so you can rename the file, as long as it doesn’t conflict with any other existing file in your app.)
You should now be able to build/run/publish your app on all .NET MAUI platforms

This is already fixed for the next pre-release of .NET 8. When you update to the next pre-release of .NET 8, you will need to delete the file that you added and also change back the <script ...> reference in index.html.

If anyone here tries out this workaround and is successful (or not), please let us know. Thanks!

2reactions

Fydarcommented, Aug 10, 2023

The workaround was successful for me! Thanks for that! 🎉

Top Results From Across the Web

asp.net core - JavaScript interop Error when calling ...

As per “Detect when a Blazor Server app is prerendering”, you can only safely run interop code in the OnAfterRenderAsync lifecycle method.

Call JavaScript functions from .NET methods in ASP. ...

These APIs can't be called through the JS interop mechanism in Blazor Server apps because UI event handling is performed asynchronously and ...

Identifying what is causing interop errors : r/Blazor

I started developing a Server-side blazor application in NET 5 - everything was working lovely, and no exceptions are generating during ...

Pros and Cons of Using JavaScript Interop in Blazor

This blog post explains using JavaScript interop concepts in the Blazor framework, its advantages, and its limitations with code examples.

Blazor Hybrid Web Apps with .NET MAUI

Blazor Hybrid combines Web technologies (HTML, CSS, and optionally JavaScript) with native in .NET MAUI Blazor. MAUI is a cross-platform framework for creating ......