Blazor WASM项目添加Blazorise Addon组件后报blazorise未定义异常

数据老陈

2026-10-6

异常触发原因

该异常是由于Index.html中脚本加载顺序错误导致：Blazor WebAssembly 启动脚本 blazor.webassembly.js 放置在 Blazorise JS 资源之前加载，Blazor 脚本加载完成后会立即初始化应用并渲染组件，此时 Blazorise 的 JS 文件还未完成全局对象注册，因此 TextEdit 组件调用 blazorise.textEdit.initialize 方法时找不到全局 blazorise 对象抛出错误。
组件可正常渲染是因为样式资源已提前加载完成，仅交互相关的 JS 逻辑初始化失败，因此静态显示不受影响。

修复步骤

调整 Body 区块的脚本加载顺序，将 Blazor 启动脚本放在所有依赖 JS 的最后加载，修改后脚本部分如下：

<body>
    <div id="app">Loading...</div>
    <div id="blazor-error-ui">An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <!-- 先加载第三方依赖JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
    <!-- 再加载Blazorise JS -->
    <script src="_content/Blazorise/blazorise.js"></script>
    <!-- 最后加载Blazor启动脚本 -->
    <script src="_framework/blazor.webassembly.js"></script>
</body>

若调整顺序后仍偶现该报错，可给 Blazor 启动脚本添加手动启动配置，确保所有资源加载完成后再初始化应用：

<!-- 禁用自动启动 -->
<script src="_framework/blazor.webassembly.js" autostart="false"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  Blazor.start();
});
</script>