WebAssembly Blazor .NET 6.0 未检索 MudBlazor 样式 - 找不到“mudElementRef.getBoundingClientRect”

Question

WebAssembly Blazor .NET 6.0 未检索 MudBlazor 样式 - 找不到“mudElementRef.getBoundingClientRect”

Jus*_*ler 6 c# progressive-web-apps blazor mudblazor

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

PWA 中缺乏 Mudblazor 样式

页面上的错误是：

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jak*_*oos 9

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

您可以在示例/模板的 wwwroot 文件夹中的 index.html 文件中找到这些内容。

您应该在索引文件中添加突出显示的引用：

将来，您可以使用MudBlazor 模板轻松开始安装和配置正确的 nuget 软件包、服务等。

归档时间：	3 年，8 月前
查看次数：	6450 次
最近记录：	2 年，7 月前