JS injection in blazor component showing error

Question

I tried to inject js file into a component referencing this Microsoft tutorial.

https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/location-of-javascript?view=aspnetcore-8.0

My component is a follows:-

@page "/interop"
@rendermode InteractiveServer
@inject IJSRuntime JS
@implements IAsyncDisposable


<h1>JS Collocation Example 2</h1>

<button @onclick="ShowPrompt">Call showPrompt2</button>

@if (!string.IsNullOrEmpty(result))
{
    <p>
        Hello @result!
    </p>
}

@code {
    private IJSObjectReference? module;
    private string? result;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            module = await JS.InvokeAsync<IJSObjectReference>("import", "./Components/Pages/MYFun.js");
        }
    }

    private async Task ShowPrompt()
    {
        if (module is not null)
        {
            result = await module.InvokeAsync<string>("showPrompt2", "What's your name?");
            StateHasChanged();
        }
    }

    public async ValueTask DisposeAsync()
    {
        if (module is not null)
        {
            await module.DisposeAsync();
        }
    }
}

Next my js file is as follows:-

export function showPrompt2(message) {
    return prompt(message, 'Type your name here');
  }

My js file path is : CSharp\DEMO\Components\Pages\MYFun.js

Now the error i am facing says

\[2024-06-23T05:24:20.559Z\] Information: Normalizing '\_blazor' to 'http://localhost:5245/_blazor'.
blazor.web.js:1 \[2024-06-23T05:24:20.592Z\] Information: WebSocket connected to ws://localhost:5245/\_blazor?id=O03_Mc_d_ex3fD7KNrTZuA.
blazor.web.js:1

        GET http://localhost:5245/Components/Pages/MYFun.js net::ERR_ABORTED 404 (Not Found)

(anonymous) @ blazor.web.js:1
(anonymous) @ blazor.web.js:1
beginInvokeJSFromDotNet @ blazor.web.js:1
\_invokeClientMethod @ blazor.web.js:1
\_processIncomingData @ blazor.web.js:1
connection.onreceive @ blazor.web.js:1
i.onmessage @ blazor.web.js:1
\[NEW\] Explain Console errors by using Copilot in Edge: click

         to explain an error. 
        Learn more
        
          
          
          Don't show again

blazor.web.js:1  \[2024-06-23T05:24:20.840Z\] Error: There was an unhandled exception on the current circuit, so this circuit will be terminated. For more details turn on detailed exceptions by setting 'DetailedErrors: true' in 'appSettings.Development.json' or set 'CircuitOptions.DetailedErrors'.
log @ blazor.web.js:1
unhandledError @ blazor.web.js:1
(anonymous) @ blazor.web.js:1
\_invokeClientMethod @ blazor.web.js:1
\_processIncomingData @ blazor.web.js:1
connection.onreceive @ blazor.web.js:1
i.onmessage @ blazor.web.js:1
blazor.web.js:1 \[2024-06-23T05:24:20.842Z\] Information: Connection disconnected.
`your text`

please help regarding the issue

Answer 1

I'm not sure what you're doing that you don't show.

Using your code and the article, this works.

1. Deploy a Blazor Web App - InteractiveServer.

2. Add your code to Home

@page "/"
@inject IJSRuntime JS
@implements IAsyncDisposable
@rendermode InteractiveServer

<PageTitle>Home</PageTitle>

<h1>JS Collocation Example 2</h1>

<button @onclick="ShowPrompt">Call showPrompt2</button>

@if (!string.IsNullOrEmpty(result))
{
    <p>
        Hello @result!
    </p>
}

@code {
    private IJSObjectReference? module;
    private string? result;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            module = await JS.InvokeAsync<IJSObjectReference>("import", "./Components/Pages/Home.razor.js");
        }
    }

    private async Task ShowPrompt()
    {
        if (module is not null)
        {
            result = await module.InvokeAsync<string>("showPrompt2", "What's your name?");
            StateHasChanged();
        }
    }

    public async ValueTask DisposeAsync()
    {
        if (module is not null)
        {
            await module.DisposeAsync();
        }
    }
}

Add the js as Home.razor,js.

And you get: