Why would components in this Blazor app fail to render?

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:

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?

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

Enclave

I should add: I've also tried adding the <NavMenu /> component in other pages (e.g. /Pages/Index.cshtml) with the same results. – Enclave

Could you also share the code of NavMenu? – Mcmanus

Ok. I get it. NavMenu only contains the <h1>? – Mcmanus

I'm trying to reproduce this, but with everything I could think of it remains working on my side. Could you share your complete project somewhere? – Mcmanus

But first, check my answer below, that must be it. – Mcmanus

@Mcmanus Yep - I've kept it really basic for now just for testing purposes, so the NavMenu code literally has one line containing the <h1 /> element until I can figure out why nothing's showing up at all. – Enclave

Answer 1

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.

Enclave

Answer 2

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

Mcmanus

Great suggestion! I'll re-check that tonight because I'm sure you're on the right track - I had made a couple of additions to the items in the ItemGroup section. – Enclave

Nope. I've done some clean-up and with the exception of a project reference, the proj file looks essentially as you've described here. Looks like the Github issue you referenced is still pretty active and it's a known issue - just with different underlying symptoms than I'm seeing. – Enclave

That makes me very curious.. could you share the code somewhere? – Mcmanus

Not easily. Happy to move this conversation to chat to discuss though. – Enclave

Answer 3

<ItemGroup>
<Content Remove="documents\InvoiceTemplate.razor" />
<Content Remove="Pages\ComponentInvoice.razor" />
</ItemGroup>

Thank you @Flores. This was in my csproj file - I only have this happen in projects where I'm using ABCPDF - and I've seen other threads where ABCPDF is the suspect in situations like this.

Urga

Answer 4

I get the same issue where a component doesnt render, so I create a new blazor component and copy paste the code to the new component. Its usually when I copy a component. It is frustrating but I have the workaround for now.

Lenzi

This is how the issue was fixed for me too! – Akim