Why would components in this Blazor app fail to render?

asp.net-core blazor

Question

I'm writing a Blazor app and obviously I want to get some components rendered in there. I've just tried adding a basic navigation element to my main layout but it's not rendering. I can see the element on the DOM, but that element is empty.

I went with some fairly simple content to start with in my NavMenu component that I'm trying to include on MainLayout.cshtml:

<h1>WHYYYY????</h1>

I've also taken a pretty simple layout on my MainLayout.cshtml page:

@inherits BlazorLayoutComponent


<NavMenu />

<div class="body-content">
    @Body
</div>

The file structure in my project seems uncomplicated:

enter image description here

So I'm at a loss here as to what I've overlooked. It looks like Blazor knows there's something it should be rendering to the page - that's why I can see the NavMenu element in the DOM. But there's never any content rendered inside that element. What's missing?

NavMenu Blazor component

I'm running the latest (at time of writing) version of Blazor: 0.5.1.

Accepted Answer

It turns out the root cause was related to namespaces and casing.

When I originally set up the project, I created it using the command line in VS Code. Out of habit, I wrote everything in lowercase (i.e. dotnet new blazor -o myapp).

As a personal preference, I like my namespaces to be title cased, so some time later I decided to "tidy up" and change myapp to Myapp. I went through the code to refactor to the new titlecase name and everything compiled, so I carried on working... until a few weeks later when I went back to do some work on a component and noticed it wasn't behaving.

It turns out that razor pages are automatically namespaced based on folders and a subset of those are included in the _ViewImports.cshtml page. That file still referenced the lower case namespace and pages looking for a lowercase project root were no longer able to find the right shared components.

So unsurprisingly, it's an entirely self-inflicted issue and yes I feel very silly for not thinking it through properly from the start.


Popular Answer

You are probably running into a bug with the .csproj file. It should look like this:

<Project Sdk="Microsoft.NET.Sdk.Web">

<PropertyGroup>
   <TargetFramework>netstandard2.0</TargetFramework>
   <RunCommand>dotnet</RunCommand>
   <RunArguments>blazor serve</RunArguments>
   <LangVersion>7.3</LangVersion>
</PropertyGroup>

<ItemGroup>
  <PackageReference Include="Microsoft.AspNetCore.Blazor.Browser" Version="0.5.1" />
  <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="0.5.1" />
  <DotNetCliToolReference Include="Microsoft.AspNetCore.Blazor.Cli" Version="0.5.1" />
</ItemGroup>

Yours has most likely extra stuff in it, that prevents the component from compiling. This typically happens when adding files or copying them. See: https://github.com/aspnet/Blazor/issues/1206



Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow
Is this KB legal? Yes, learn why
Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow
Is this KB legal? Yes, learn why