Radzen Blazor WASM中IJSRuntime调用JS函数提示未定义求助

问题根源 #

你的代码中index.html里引入interop.js的script标签存在拼写错误：将属性src误写为scr，导致浏览器无法正确加载该JS文件，自然找不到createAlert函数。

修正后的index.html代码 #

将错误的<script scr="interop.js"></script>改为<script src="interop.js"></script>，完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Blazor App</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="BlazorApp.Client.styles.css" rel="stylesheet" />
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css">
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
</head>

<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>
    <script src="_framework/blazor.webassembly.js"></script>
    <!-- 修正了src属性的拼写错误 -->
    <script src="interop.js"></script>
</body>

</html>

额外排查建议 #

• 确认interop.js文件放置在wwwroot目录下，这是Blazor WASM静态文件的默认根目录，否则需要调整路径
• 检查浏览器网络请求（按F12打开开发者工具 -> 网络标签），搜索interop.js，确认文件是否成功加载（状态码为200）
• 确保自定义JS文件的加载顺序在blazor.webassembly.js之后，避免Blazor初始化时找不到全局函数

内容的提问来源于stack exchange，提问作者Pedro Nadal