Radzen Blazor WASM JavaScript Interop function not defined

Question

I am using Radzen Blazor Components, which are very useful and easy to implement, with a .NET 6 Blazor WebAssembly App.

I followed the guide on the Radzen web to install components.

The issue is that I'm trying to call a JavaScript function using IJSRuntime but it throws an Exception saying that the function is undefined. I guess that in some way, the added javascript files are not included in the compilation, because I tested the JS interop with a plain Blazor WASM app and it works.

Can anybody help me? thank you very much.

Exception:

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Could not find 'createAlert' ('createAlert' was undefined). Error: Could not find 'createAlert' ('createAlert' was undefined). at https://localhost:7000/_framework/blazor.webassembly.js:1:328 at Array.forEach () at a.findFunction (https://localhost:7000/_framework/blazor.webassembly.js:1:296) at _ (https://localhost:7000/_framework/blazor.webassembly.js:1:2437) at https://localhost:7000/_framework/blazor.webassembly.js:1:3325 at new Promise () at Object.beginInvokeJSFromDotNet (https://localhost:7000/_framework/blazor.webassembly.js:1:3306) at Object.St [as invokeJSFromDotNet] (https://localhost:7000/_framework/blazor.webassembly.js:1:59853) at _mono_wasm_invoke_js_blazor (https://localhost:7000/_framework/dotnet.6.0.8.yj5vlwdtrc.js:1:195300) at wasm://wasm/00971db2:wasm-function[219]:0x1a48f

Here is the code:

Index.razor

@inject IJSRuntime JS

<RadzenButton Text="Show Alert" Click=@ShowAlert/>

@code {

private async Task ShowAlert() => await JS.InvokeVoidAsync("createAlert");

}

interop.js

function createAlert() {
    alert("Hey this is an alert");
}

index.html

<!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>
    <script scr="interop.js"></script>
</body>

</html>

score 0 · Answer 1 · answered Aug 25 '22 at 00:58

Try using IJSObjectReference to reference JS files:

Index.razor:

@page "/"
@inject IJSRuntime JS

<RadzenButton Text="Show Alert" Click=@ShowAlert />

@code {
    private IJSObjectReference? moudle;
    protected override async Task OnInitializedAsync()
    {
        moudle = await JS.InvokeAsync<IJSObjectReference>("import", "./interop.js");
    }
    private async Task ShowAlert()
    {
        await moudle.InvokeVoidAsync("createAlert");
    }
}

interop.js:

export function createAlert() {
    alert("Hey this is an alert");
}

Radzen Blazor WASM JavaScript Interop function not defined

1 Answers1