Blazor WASM PWA Could not find any element matching selector 'app'

Question

I am using Visual Studio 2019 v16.8.5 and have a single Blazor WASM PWA project in my solution that I recently upgraded to .NET5. In between I got it to run, but lately I cannot get to start it anymore.

The screen says Loading... and that's it. The console output (Firefox) shows the following error: Microsoft.JSInterop.JSException: Could not find any element matching selector 'app'. At some point this was running without this issue, but even reverting the solution to an earlier state does not bring any change and I still get a blank screen.

I found a github source saying "just remove builder.RootComponents.Add<App>("app"); from Program Main". If I do this, the error disappears and I just get a blank page saying Loading... with no errors in Console output.

Additional information: I now do a full cache cleanup (cookies and website files) after running the project in Visual Studio to prevent any caching issues.

What am I doing wrong that I can't see any of my pages? Even after explicitely calling them like https://192.168.188.31:5555/login?

Answer 1

Depending on the template version used to create the initial app, a slightly different HTML is used inside the index.html.

Older version could look like

<app>Loading...</app>

while newer should like

<div id="app">Loading...</div>

In case, the first is still true, the corresponding declaration should be

builder.RootComponents.Add<App>("app");

For the second the line should be

builder.RootComponents.Add<App>("#app");

The second uses the id selector #.

Usually, the index.html is seen as a "static" file and is cached by the browser. So changes, you have done in that file are not reflected immediately. The easiest way to disable the cache is to open the developer tools, go to the Network tab and disable the cache.