WebAssembly Blazor .NET 6.0 未检索 MudBlazor 样式 - 找不到 \'mudElementRef.getBoundingClientRect\'答案

【问题标题】：WebAssembly Blazor .NET 6.0 not retrieving MudBlazor styling - Could not find 'mudElementRef.getBoundingClientRect'WebAssembly Blazor .NET 6.0 未检索 MudBlazor 样式 - 找不到 \'mudElementRef.getBoundingClientRect\'
【发布时间】：2022-12-18 22:31:10
【问题描述】：

我创建了一个 PWA 并想将 MudBlazor 用于 UI，从 MudBlazor 模板“Wasm-PWA”项目中获取代码。到目前为止，我已经尝试过 Chrome 和 Edge，将 MudBlazor 模板项目与我自己的 PWA 项目进行比较，但无法发现差异。我也试过删除广告块，但没有成功。

Lack of Mudblazor Styling in the PWA

页面上的错误是：

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

【问题讨论】：

您找到解决方案了吗？

标签： c# blazor progressive-web-apps mudblazor

【解决方案1】：

您的 Index.Html 文件未引用 MudBlazor 的 .css 文件和 .js 文件。

您可以在示例/模板的 wwwroot 文件夹中的 index.html 文件中找到它们。

您应该在索引文件中添加 The highlighted references：

将来您可以使用MudBlazor templates 轻松开始安装和配置正确的 nuget 包、服务等...。

【讨论】：

完美，谢谢！

【解决方案2】：

我收到此错误并正确引用了 MudBlazor 文件，但是我将 Bootstrap 文件留在了其中。删除 Bootstrap 文件后，我不再遇到问题。

我删除了：

index.html 中的 Bootstrap 样式表参考
Bootstrap 和 Open Iconic 文件夹及其内容（wwwroot/css 下）
app.css 文件（wwwroot/css下）

【讨论】：

【解决方案3】：

您所要做的就是在 Program.cs 管道中的构建器下添加 AddMudServices() - 在顶部的构建器下。

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

builder.Services.AddMudServices();

【讨论】：