Error BLAZOR106 when saving Javascript/TypeScript file with the same component's name

user_4548329 0
Viewed 290

I have a .Net6 Blazor Server Side project.

I created a component called HomePage.razor, another one called HomePage.razor.cs and a TypeScript file called HomePage.razor.ts. This way, I get a nice visual of the HomePage.razor in the solution explorer, as the "child" files nest in it.

When I save my TypeScript file, the file wwwroot\Pages\HomePage.razor.js is automatically generated, and I refer it at my _Host.cshtml.

Also, as soon as I save it, I get the error BLAZOR106 - The JS module file 'c:\...\wwwroot\Pages\HomePage.razor.js' was defined but no associated razor component or view was found for it.

If I change the name of my TypeScript file from HomePage.razor.ts to anything else - like HomePage.ts - save it, and delete the old generated JS file at wwwroot, everything works fine. But this way, I lose the nice "collapsing by name" in the solution explorer that VS2022 provides.

I couldn't find any content related to the BLAZOR106 error (Google and Microsoft documentation), so I wonder if you know how to solve this issue.

Thanks.

typescript blazor javascript
1 Answers

I was getting the same error but in my case I wasn't even using a razor component, just a razor page .cshtml file. Similar to you, I also had a .cshtml.cs and .cshtml.js file because I like the organization of that.

Pages/Index.cshtml
Pages/Index.cshtml.cs
Pages/Index.cshtml.js

Originally I was using a bundleconfig.json to minify in place.

Pages/Index.cshtml.min.js
Pages/Index.cshtml.min.js.map

Then I used libman to copy the js files into:

wwwroot/js/Pages/Index.cshtml.js
wwwroot/js/Pages/Index.cshtml.min.js
wwwroot/js/Pages/Index.cshtml.min.js.map

As you can see, I was not using razor components or Blazor anywhere in my application. And this worked fine when targeting .NET 5

I upgraded to .NET 6 and I started getting the same error you are getting.

Background magic is going on here that the aspnet team should address but in the meantime my workaround was to remove the .cshtml. part from the file name in wwwroot.

wwwroot/js/Pages/Index.min.js
wwwroot/js/Pages/Index.min.js.map

To achieve this, I changed my bundleconfig to output directly to those files and I removed the libman part. It actually made more sense than what I was doing before because I only care that the original Index.cshtml.js file is nested.

bundleconfig.json
{
    "outputFileName": "Pages/Index.cshtml.min.js",
    "inputFiles": [
      "Pages/Index.cshtml.js"
    ]
}

libman.json
{
  "provider": "filesystem",
  "library": "Pages/Index.cshtml.js",
  "files": [
    "Pages/Index.cshtml.js",
    "Pages/Index.cshtml.min.js",
    "Pages/Index.cshtml.min.js.map"
  ],
  "destination": "wwwroot/js/"
}

To just this:

bundleconfig.json
{
    "outputFileName": "wwwroot/js/Pages/Index.min.js",
    "inputFiles": [
      "Pages/Index.cshtml.js"
    ]
}
user_14264110
Related