Unhandled exception rendering component: Could not find 'BlazorInputFile' in 'window'

Question

I created a default Blazor WebAssembly application in order to test the BlazorInputFile component.

Whenever I start the application, if I go to the simple page I created with just the option to upload a file, I get the following error message described below. But if I simply refresh the page the error disappears and doesn't appear again.

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Could not find 'BlazorInputFile' in 'window'. p/<@https://localhost:5003/_framework/blazor.webassembly.js:1:9130

I followed the steps recommended by this article: https://www.mikesdotnetting.com/article/341/uploading-files-in-blazor

1. In the client project: Install-Package BlazorInputFile -Version 0.2.0
2. Add <script src="_content/BlazorInputFile/inputfile.js"></script> in index.html
3. Add "@using System.IO" and "@using BlazorInputFile" in _Imports.razor

This error appears only when I use the Firefox Browser, if I use the Microsoft Edge this error does not appear.

The page I created is simply:

@page "/singlefile"

<h1>Single file</h1>

<p>A single file input that uploads automatically on file selection</p>

<InputFile OnChange="HandleSelection" />

<p>@status</p>

@code {
    string status;

    async Task HandleSelection(IFileListEntry[] files)
    {
        var file = files.FirstOrDefault();
        if (file != null)
        {
            // Just load into .NET memory to show it can be done
            // Alternatively it could be saved to disk, or parsed in memory, or similar
            var ms = new MemoryStream();
            await file.Data.CopyToAsync(ms);

            status = $"Finished loading {file.Size} bytes from {file.Name}";
        }
    }
}

Answer 1

I have solved this by disabling the adblocker. Apparently it causes this exception to happen.