Let me try to explain this clearly. I have a Blazor WebAssembly (WASM) project that is referencing a Razor library without any issues. The Razor library successfully compiles a JavaScript bundle using webpack. One of the components I am attempting to create has a simple function that returns the revision of a package (threejs) as a string.
Here's where the problem arises: Despite having everything set up correctly, when I attempt to call the function from the Blazor project, I consistently receive an error stating that the function does not exist.
Error
- 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>Atom.Web.Client</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="Atom.Web.Client.styles.css" rel="stylesheet" />
</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 src="./_content/Atom.Web.Viewer.Components/js/atom.bundle.js"></script>
</body>
</html>
- Webpack config
const path = require("path");
module.exports = {
devtool: 'source-map',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
output: {
path: path.resolve(__dirname, '../wwwroot/js'),
filename: "atom.bundle.js",
library: "Atom"
}
};
- the component code
private readonly Lazy<Task<IJSObjectReference>> moduleTask;
public ThreeViewer(IJSRuntime jsRuntime)
{
moduleTask = new(() => jsRuntime.InvokeAsync<IJSObjectReference>(
"import", "./_content/Atom.Web.Viewer.Components/js/atom.bundle.js").AsTask());
}
public async ValueTask<string> GetRevision()
{
var module = await moduleTask.Value;
var rev = await module.InvokeAsync<string>("Atom.GetCurrentThreeRevision");
return rev;
}
- the Program.cs
using Atom.Web.Client;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Atom.Web.Viewer.Components;
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) });
builder.Services.AddScoped<ThreeViewer>();
await builder.Build().RunAsync();
- the Index.razor
@inject IJSRuntime JSRuntime;
@inject ThreeViewer threeViewer;
@page "/"
@using Newtonsoft.Json
<PageTitle>Index</PageTitle>
@if(revisionMessage != string.Empty)
{
<h1>@revisionMessage</h1>
}
<SurveyPrompt Title="How is Blazor working for you?" />
@code {
string revisionMessage = string.Empty;
protected override async Task OnInitializedAsync()
{
revisionMessage = await JSRuntime.InvokeAsync<string>("Atom.GetCurrentThreeRevision");
var rev = await threeViewer.GetRevision();
}
}
The interesting part is, if I directly call the function using `revisionMessage` through JSRuntime, it works flawlessly. However, when attempting to call it from the component library, issues arise.
Any assistance would be greatly appreciated!