Blazor can't find referenced component from other folder

user_4787510 0
Viewed 3798

I'm trying out Blazor WebAssembly, and wanted to create some new components on top of the pregenerated example project from Visual Studio.

So, essentially what I ended up is the following folder structure:

Project
\ Components
  \ Navigation
    \ BurgerMenu.razor
      BurgerMenu.razor.css
      BurgerMenu.razor.less
\ Shared
  \ MainLayout.razor
    MainLayout.razor.css
    MainLayout.razor.less

So far so good. Here are my components:

MainLayout.razor:

@using Components.Navigation;

@inherits LayoutComponentBase

<div class="sidebar">
    <BurgerMenu />
</div>

<div class="LayoutContainer">
    @Body
</div>

BurgerMenu.razor:

<div>
    Test Component
</div>

@code
{
}

As you can see, as of yet there is really nothing to write home about.

However, I can't get this to work properly. Every build complains regarding warning RZ10012: Found markup element with unexpected name 'BurgerMenu'. If this is intended to be a component, add a @using directive for its namespace.

So, I'm a bit lost now. Accoding to the official docs, the @using statement should be the proper way to import the component from a folder - Which is there. However, this still doesn't work.

If I move the BurgerMenu.razor within the /Shared folder, everything works fine.

So, what am I doing wrong?

blazor c#
2 Answers

I'd have thought the using statement would need to include your project name:

@using Project.Components.Navigation;

If I try something similar to you the editor underlines the using statement (without the project name) in red.

user_29362040

This problem was fixed for my after restarting Visual Studio for me. I'm running Professional 2019 and apparently the intellesense gets stuck.

user_35770830
Related