CODEWITHSUNDEEP
asp.net-coreblazor
Phil.Wheeler
Phil.Wheeler

Reputation: 16848

Why would components in this Blazor app fail to render?

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.

Upvotes: 6

Views: 9383

Answers (5)

Jos
Jos

Reputation: 1

I got the same error that a component would not render in web. For me the problem was that I had renamed the component or copy pasted it from somewhere. I think this is due to the blazor project not having a correct reference to the component.

Just moving the file to another folder and back to the original folder fixed the issues for me.

Copy pasting the code to another file also works, however this is more work.

Upvotes: 0

Johnny Fonseca
Johnny Fonseca

Reputation: 11

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.

Upvotes: 1

TonyE
TonyE

Reputation: 349

<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.

Upvotes: 2

Phil.Wheeler
Phil.Wheeler

Reputation: 16848

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.

Upvotes: 6

Flores
Flores

Reputation: 8932

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

Upvotes: 7

Related Questions