[Blazor Hybrid] BlazorWebView ComponentType error blocks XAML Hot Reload updates

[nor0x]

Description

just created a File -> New .NET MAUI Blazor Hybrid app in Visual Studio and started a Debug Build on Windows. XAML Hot-Reload is not working. There are multiple of these logs in the Hot Reload Console.

19:08 04.52 MauiApp24: Hot Reload session started
19:11 14.01 No changes were found.
19:11 24.95 No changes were found.

It seems that only XAML HR is not working for me, changes in .razor files are updated correctly.

Steps to Reproduce

1. Create new MAUI Blazor Hybrid app
2. Debug on Windows or Android
3. Make XAML changes

Link to public reproduction project repository

No response

Version with bug

8.0.7 SR2

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Windows and Android, I was not able test on other platforms

Affected platform versions

• Windows 23H2
• Android

Did you find any workaround?

No response

Relevant log output

My Visual Studio version is:

Microsoft Visual Studio Enterprise 2022 (64-bit) - Preview
Version 17.10.0 Preview 1.0

[ghost]

Thanks for the issue report @nor0x! This issue appears to be a problem with Visual Studio, so we ask that you use the VS feedback tool to report the issue. That way it will get to the routed to the team that owns this experience in VS.

If you encounter a problem with Visual Studio, we want to know about it so that we can diagnose and fix it. By using the Report a Problem tool, you can collect detailed information about the problem, and send it to Microsoft with just a few button clicks.

1. Go to the Visual Studio for Windows feedback tool or Visual Studio for Mac feedback tool to report the issue
2. Close this bug, and consider adding a link to the VS Feedback issue so that others can follow its activity there.

[drasticactions]

XAML Hot Reload is a Visual Studio feature and isn't something that can be addressed in this repo, you should file this to VSFeedback.

Also, those logs you posted are for C# Hot Reload, not XAML. Those logs are under "Xamarin Hot Reload", which, yes, is confusing and really they should be moved under a single location.

[drasticactions]

Also, checking the newest Visual Studio 17.9 and 17.10 Preview builds, it seems to work correctly for me on Android and Windows,

If you see the Live Visual Tree, then XAML Hot Reload functions. If you can edit properties in Live Property Explorer, it functions. Since you mentioned Razor changes being applied, those occur through the XAML Hot Reload system, so the connection should be working.

I assume that you're changing specific properties to BlazorWebView then and those are not applying. Trying to edit it, ComponentType doesn't seem to like to be changed or modified so if you try and edit code around it then it might protest and not apply changes to the rest. That's something that could be looked at within this repo.

So TL;DR, if you don't see things like Live Visual Tree or Live Property Explorer, or you get yellow bars or errors saying XAML Hot Reload can't start, that should go to VS since it can't be fixed here.

If you are trying to change specific things and those are not applying, then file it here and we can move or modify the issue as needed depending on where the fix has to go: The core control or the underlying system itself.

[nor0x]

thank you for the reply @drasticactions. Indeed there are some logs in the Xamarin Hot Reload panel:

[11:00:52]  (MauiApp24) .NET Project references .NET MAUI.
[11:00:52]  (MauiApp24) WinUI hot reload is in progress.
[11:01:06]  Hot Reload changes cannot be applied due to this error in the XAML:
  D:\Dev\maui\MauiApp24\MainPage.xaml(16,59): Nested types are not supported: Components.Routes.

which is also displayed in the XAML Editor. I can confirm that the Live Visual Tree is filled and changing properties via the Live Property Explorer works fine for me.

In my case nothing is hot-reloaded right now - I tried changing i.e. the BackgroundColorof the ContentPage or the outer Border or Grid

EDIT: Workaround

if I remove ComponentType="{x:Type local:Components}" from the RootComponent during Debug runtime - Hot Reload works fine again

[drasticactions]

Yes, this is "correct" (but not ideal) behavior. If there is any "rude edit" changes in the editor then incremental changes are not applied, so in this condition none of the other changes you make would apply and that's fully expected. The idea here is that you would "fix" the rude edit and then any other changes you made, including your fix to the XAML, would flow through.

But it is also very lame in this context, since here it is a fundamental part of the control and you can't do anything to fix it short of removing it wholesale. If you edit around it then it should work, but you still have the issue of the initial load since that page by default has the BlazorWebView as root, so moving that would invoke that ComponentType, causing the rude edit, meaning you would need to restart the session.

There are future changes being proposed internally to "work around" these kinds of issues to brute force (as in, reload the page wholesale in cases where you can't incrementally edit it for whatever reason), and that should help cases like what you see here. CC @BretJohnson @chabiss

So as it is right now, to me, this isn't a "bug" in that this is expected behavior for what XAML Hot Reload should do in this current situation... but it's a really lame limitation and maybe this is where having better messaging and future tooling changes could help. There are ways for us to "mask" that error and hide it, but you can't edit that field and have it hot reload so you would still need some error to tell you that changes there won't work, but also let other changes through, which could cause weird conditions. That, or update BlazorWebView to support incremental changes, which wouldn't require XAML Hot Reload changes but, IMO, seems less likely to happen.

[nor0x]

thank you for the info and explanation. Interesting to understand what's going on here. For now I'm unblocked by removing the ComponentType during runtime - but it's not nice though. I think this is something that can be handled in a better way by the tooling / framework. Also I don't quite understand why it works for you in a new blank project 🤔

[QianaJiao]

Verified this issue with Visual Studio 17.10.0 Preview 2 (8.0.14/8.0.7), not repro on windows platform.

[nor0x]

just tried with the latest Visual Studio Preview and I can still reproduce this one.

1. Create new Maui Blazor Hybrid Project
2. Start Debug (Hot-Reload Session)
3. Wrap BlazorWebView inside Grid

In this case I'm not directly editing properties of the BlazorWebView, but wrap the control inside a layout or so - for me in this case this is 100% reproducible

My Visual Studio Info Microsoft Visual Studio Enterprise 2022 (64-bit) - Preview Version 17.10.0 Preview 2.0

[QianaJiao]

Follow the steps above to revalidate, and the result is it repro. It seems that whenever you edit MainPage.xaml in debug mode, ComponentType="{x:Type local:Components.Routes} will report an error.

[nor0x]

is there anything happening regarding this issue @drasticactions @Eilon @davidortinau ? really annoying limitation that slows us down at development because we cannot hot-reload anything in our application

[drasticactions]

Short answer is No, nothing specifically for this has changed as far as I'm aware.

Slightly longer answer is:

• The Live Property Explorer does work, so you could still use that to edit properties on the Blazor view, or other properties within it.
• C# Hot Reload and editing Razor views are unrelated to this issue, so if that doesn't work you would need to file another issue.
• You could work around it by putting a placeholder view in and editing your layout, then putting it back when you're done.

@etvorun @mgoertz-msft Is there a way to mask this editor error so we can keep letting requests through?

[nor0x]

thanks for the reply, the hot-reload story is really not great right now

• Live Property Explorer is not an Option - I don't want to change properties on the BlazorWebView itself but for example change a XAML Button on the ContentPage
• Razor Hot-Reload is broken because of a different error [Error] C:\dev\MauiRepros\MauiApp68.sln (line 1): error ENC1002: Cannot apply changes -- unexpected error: 'Unexpected value 'MauiApp.Home' of type 'Microsoft.CodeAnalysis.CSharp.Symbols.SourceNamedTypeSymbol''
• a placeholder view might work in a basic app but I have elements in the BlazorWebView that trigger changes to XAML elements

[nor0x]

was able to find a workaround myself. I manually moved Routes.razor and MainLayout.razor to the root namespace of the app by adding @namespace MauiApp2. By doing this I was able to remove the nested type from ...ComponentType="{x:Type local:Components.Routes}" /> and just do ...ComponentType="{x:Type local:Routes}" />

glad that this works now for me - still lame that this is broken in the default template of a MAUI Blazor Hybrid app

BEFORE:

AFTER: