Blazor can't find referenced component from other folder

Question

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?

Answer 1

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.

Answer 2

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