Cant import scoped Javascript in Blazor Standalone WebAssembly

In the past I have already done this in InteractiveServer Blazor, which is to import {page}.razor.js in my razor page through IJSRuntime in the OnAfterRender step of the page lifecycle. as follows: Page.Razor.cs
public partial class Page : ComponentBase
{
[Parameter] public required IJSRuntime js { get; init; }
private IJSObjectReference pageModule;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
pageModule = js.InvokeAsync<IJSObjectReference>("import"
, "Components/Pages/Page.razor.js")
}
}
// dispose pattern hidden for simplicity
}
public partial class Page : ComponentBase
{
[Parameter] public required IJSRuntime js { get; init; }
private IJSObjectReference pageModule;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
pageModule = js.InvokeAsync<IJSObjectReference>("import"
, "Components/Pages/Page.razor.js")
}
}
// dispose pattern hidden for simplicity
}
Page.razor.js
export function greet()
{
window.alert('!');
}
export function greet()
{
window.alert('!');
}
There is a way to make something similar work, by using global javascript files in wwwroot\*.js and <script... directives but that is not desired in the moment. I didn't find any way to use a modular aproach handled by the ComponentBase object. This is the web assembly startup implementation Program.cs
using BlazorApp2;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();
using BlazorApp2;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();
.NET Core 9 environment
// stack overflow post: https://stackoverflow.com/questions/79542079/cant-import-scoped-javascript-in-blazor-standalone-webassembly
Stack Overflow
Cant import scoped Javascript in Blazor Standalone WebAssembly
In the past I have already done this in InteractiveServer Blazor, which is to import {page}.razor.js in my razor page through IJSRuntime in the OnAfterRender step of the page lifecycle. as follows:...
1 Reply
𝗝𝗮𝗺𝗲𝘀
Just for clarification, the InvokeAsync instruction will FAIL due to not being able to find the Page.razor.js file I Just found out the solution for this. The import path must be preceded with "../" in order to get out of the wwwroot folder, although I don't know how it goes for production scenarios.

Did you find this page helpful?