WebAssembly Blazor .NET 6.0 not retrieving MudBlazor styling - Could not find 'mudElementRef.getBoundingClientRect'

Question

I created a PWA and wanted to use MudBlazor for the UI, taking the code from the MudBlazor templates "Wasm-PWA" project. So far, I've tried Chrome and Edge, diffing the MudBlazor templates project to my own PWA project and cannot spot a difference. I've also tried removing ad-block and haven't had any success.

Lack of Mudblazor Styling in the PWA

The error on the page is :

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Could not find 'mudElementRef.getBoundingClientRect' ('mudElementRef' was undefined).
      Error: Could not find 'mudElementRef.getBoundingClientRect' ('mudElementRef' was undefined).
          at https://localhost:44368/_framework/blazor.webassembly.js:1:328
          at Array.forEach (<anonymous>)
          at a.findFunction (https://localhost:44368/_framework/blazor.webassembly.js:1:296)
          at _ (https://localhost:44368/_framework/blazor.webassembly.js:1:2437)
          at https://localhost:44368/_framework/blazor.webassembly.js:1:3325
          at new Promise (<anonymous>)
          at Object.beginInvokeJSFromDotNet (https://localhost:44368/_framework/blazor.webassembly.js:1:3306)
          at Object.St [as invokeJSFromDotNet] (https://localhost:44368/_framework/blazor.webassembly.js:1:59849)
          at _mono_wasm_invoke_js_blazor (https://localhost:44368/_framework/dotnet.6.0.4.p3odw0yl22.js:1:195300)
          at wasm://wasm/00970c26:wasm-function[219]:0x1a0fb
Microsoft.JSInterop.JSException: Could not find 'mudElementRef.getBoundingClientRect' ('mudElementRef' was undefined).
Error: Could not find 'mudElementRef.getBoundingClientRect' ('mudElementRef' was undefined).
    at https://localhost:44368/_framework/blazor.webassembly.js:1:328
    at Array.forEach (<anonymous>)
    at a.findFunction (https://localhost:44368/_framework/blazor.webassembly.js:1:296)
    at _ (https://localhost:44368/_framework/blazor.webassembly.js:1:2437)
    at https://localhost:44368/_framework/blazor.webassembly.js:1:3325
    at new Promise (<anonymous>)
    at Object.beginInvokeJSFromDotNet (https://localhost:44368/_framework/blazor.webassembly.js:1:3306)
    at Object.St [as invokeJSFromDotNet] (https://localhost:44368/_framework/blazor.webassembly.js:1:59849)
    at _mono_wasm_invoke_js_blazor (https://localhost:44368/_framework/dotnet.6.0.4.p3odw0yl22.js:1:195300)
    at wasm://wasm/00970c26:wasm-function[219]:0x1a0fb
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[MudBlazor.Interop.BoundingClientRect, MudBlazor, Version=6.0.6.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at MudBlazor.MudDrawer.UpdateHeight()
   at MudBlazor.MudDrawer.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
window.Module.s.printErr @ blazor.webassembly.js:1
Fe._internal.dotNetCriticalError @ blazor.webassembly.js:1
St @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.6.0.4.p3odw0yl22.js:1
$func219 @ 00970c26:0x1a0fb
$func167 @ 00970c26:0xcac9
$func166 @ 00970c26:0xb9dc
$func2810 @ 00970c26:0xabb22
$func1615 @ 00970c26:0x6f935
$func1619 @ 00970c26:0x6ffa2
$mono_wasm_invoke_method @ 00970c26:0x969b
Module._mono_wasm_invoke_method @ dotnet.6.0.4.p3odw0yl22.js:1
managed__Microsoft_AspNetCore_Components_WebAssembly__Microsoft_AspNetCore_Components_WebAssembly_Services_DefaultWebAssemblyJSRuntime_EndInvokeJS @ managed__Microsoft_AspNetCore_Components_WebAssembly__Microsoft_AspNetCore_Components_WebAssembly_Services_DefaultWebAssemblyJSRuntime_EndInvokeJS:16
endInvokeJSFromDotNet @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
Promise.then (async)
beginInvokeJSFromDotNet @ blazor.webassembly.js:1
St @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.6.0.4.p3odw0yl22.js:1
$func219 @ 00970c26:0x1a0fb
$func167 @ 00970c26:0xcac9
$func166 @ 00970c26:0xb9dc
$func2810 @ 00970c26:0xabb22
$func1615 @ 00970c26:0x6f935
$func1619 @ 00970c26:0x6ffa2
$mono_wasm_invoke_method @ 00970c26:0x969b
Module._mono_wasm_invoke_method @ dotnet.6.0.4.p3odw0yl22.js:1
managed_BINDINGS_SetTaskSourceResult @ managed_BINDINGS_SetTaskSourceResult:17
(anonymous) @ dotnet.6.0.4.p3odw0yl22.js:1
Promise.then (async)
_wrap_js_thenable_as_task @ dotnet.6.0.4.p3odw0yl22.js:1
_js_to_mono_obj @ dotnet.6.0.4.p3odw0yl22.js:1
js_to_mono_obj @ dotnet.6.0.4.p3odw0yl22.js:1
receiveHotReload @ blazor-hotreload.js:2
St @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.6.0.4.p3odw0yl22.js:1
$func219 @ 00970c26:0x1a0fb
$func167 @ 00970c26:0xcac9
$func166 @ 00970c26:0xb9dc
$func2810 @ 00970c26:0xabb22
$func1615 @ 00970c26:0x6f935
$func1619 @ 00970c26:0x6ffa2
$mono_wasm_invoke_method @ 00970c26:0x969b
Module._mono_wasm_invoke_method @ dotnet.6.0.4.p3odw0yl22.js:1
managed__Microsoft_AspNetCore_Components_WebAssembly__Microsoft_AspNetCore_Components_WebAssembly_Services_DefaultWebAssemblyJSRuntime_EndInvokeJS @ managed__Microsoft_AspNetCore_Components_WebAssembly__Microsoft_AspNetCore_Components_WebAssembly_Services_DefaultWebAssemblyJSRuntime_EndInvokeJS:16
endInvokeJSFromDotNet @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
Promise.then (async)
beginInvokeJSFromDotNet @ blazor.webassembly.js:1
St @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.6.0.4.p3odw0yl22.js:1
$func219 @ 00970c26:0x1a0fb
$func167 @ 00970c26:0xcac9
$func166 @ 00970c26:0xb9dc
$func2810 @ 00970c26:0xabb22
$func1615 @ 00970c26:0x6f935
$func1619 @ 00970c26:0x6ffa2
$mono_wasm_invoke_method @ 00970c26:0x969b
Module._mono_wasm_invoke_method @ dotnet.6.0.4.p3odw0yl22.js:1
managed_BINDINGS_SetTaskSourceResult @ managed_BINDINGS_SetTaskSourceResult:17
(anonymous) @ dotnet.6.0.4.p3odw0yl22.js:1
Promise.then (async)
_wrap_js_thenable_as_task @ dotnet.6.0.4.p3odw0yl22.js:1
_js_to_mono_obj @ dotnet.6.0.4.p3odw0yl22.js:1
js_to_mono_obj @ dotnet.6.0.4.p3odw0yl22.js:1
Fe._internal.getSatelliteAssemblies @ blazor.webassembly.js:1
St @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.6.0.4.p3odw0yl22.js:1
$func219 @ 00970c26:0x1a0fb
$func167 @ 00970c26:0xcac9
$func166 @ 00970c26:0xb9dc
$func2810 @ 00970c26:0xabb22
$func1615 @ 00970c26:0x6f935
$func1619 @ 00970c26:0x6ffa2
$mono_wasm_invoke_method @ 00970c26:0x969b
Module._mono_wasm_invoke_method @ dotnet.6.0.4.p3odw0yl22.js:1
_call_method_with_converted_args @ dotnet.6.0.4.p3odw0yl22.js:1
call_method @ dotnet.6.0.4.p3odw0yl22.js:1
(anonymous) @ dotnet.6.0.4.p3odw0yl22.js:1
call_assembly_entry_point @ dotnet.6.0.4.p3odw0yl22.js:1
callEntryPoint @ blazor.webassembly.js:1
At @ blazor.webassembly.js:1
await in At (async)
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
aspnetcore-browser-refresh.js:234 WebSocket connection to 'wss://localhost:58396/LmnMb/' failed: Error in connection establishment: net::ERR_CONNECTION_RESET

Answer 1

Add Mudblazor before _framework/blazor.webassemply.js in index.html file.

<script src="_content/MudBlazor/MudBlazor.min.js"></script>
<script src="_framework/blazor.webassembly.js"></script>

Answer 2

All that you have to do is to add AddMudServices() under the builder in the Program.cs pipeline - under the builder on the top.

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddMudServices();

Answer 3

I was getting this error and had referenced the MudBlazor files correctly, however I had left the Bootstrap files in. After removing the Bootstrap files I no longer had the issue.

I removed:

• The Bootstrap stylesheet reference in index.html
• The Bootstrap and Open Iconic folders and their contents (under wwwroot/css)
• The app.css file (under wwwroot/css)

Answer 4

Your Index.Html file does not refer to the .css file and the .js file of MudBlazor.

You can find these in the index.html file in the wwwroot folder of the example/template.

You should add The highlighted references in your index file:

In the future you can use MudBlazor templates to start easily with the right nuget packages, services etc... installed and configured.