CODEWITHSUNDEEP
nugetblazorblazor-server-siderazor-components
Jean-Marc Pannatier
Jean-Marc Pannatier

Reputation: 31

Blazor component - Failed to fetch dynamically imported module when packed in nuget

I created a blazor component that loads an isolated js interop file (target framework .Net 7)

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        var dotNetObjRef = DotNetObjectReference.Create(this);
        _routeMapModule = await JsRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/MyComp/MyJs.js");
        await _routeMapModule.InvokeVoidAsync("CompInit", _elRef, dotNetObjRef);
    }
}

MyComp is the ProjectName so the path to get the file is "./_content/MyComp/MyJs.js".

As long as I use this component as a project reference (blazor server), everything works fine.

But as soon as I package this component in a Nuget (azure pipeline), and reference it in the project (instead of a project reference), I get "Failed to load resource: the server responded with a status of 404 () / Failed to fetch dynamically imported module when packed in nuget".

When I check the nuget in my local nuget storage (unziping it), I find the js file in the root but if I search it in the main app generated bin, it is not there.

Is there a specific parameter for the Nuget deployment ?

I tried to create the nuget directly from visual studio and/or to modify the generation parameters on Azure. The final nuget contains the js resource file but it does not seem to be published in the main project (the one that references the nuget).

Also tried to move the file referenced in wwwroot but same problem. What's weird is that everything works fine as long as I'm in "project reference" mode but the path "./_content/MyComp/MyJs.js" doesn't seem to follow when it's packaged in a nuget.

Any idea ?

Main Blazor App: https://jmpnet.visualstudio.com/JmpNetPublic/_git/MainBlazorApp

Blazor component App: https://jmpnet.visualstudio.com/JmpNetPublic/_git/MyComp

Nuget Feed for Blazor component App:

Name: JmpNetPublic

Source: https://jmpnet.pkgs.visualstudio.com/JmpNetPublic/_packaging/JmpNetPublic/nuget/v3/index.json

Update (29.12.2022): I have no problem to load the module as long as I stay in project reference (with or without lazy loading). The problem happens only when the component is packaged in Nuget. When deploying the Nuget, the js file does not follow.

It seems to be mostly a Nuget packaging issue (via Azure) but I can't find the settings that force the deployment of the js file.

Upvotes: 2

Views: 6196

Answers (2)

Jean-Marc Pannatier
Jean-Marc Pannatier

Reputation: 31

OK. The problem was with the Azure Pipeline configuration. if I generate the nuget directly on my workstation and push it, everything works fine.

But as soon as I did the generation using an Azure pipeline, the js file was no longer deployed.

I was actually using YAML Nuget commands (targeting .net framework) with a .Net Core project. Now that I use ".Net Core" YAML , everything works correctly.

Upvotes: 1

Brian Parker
Brian Parker

Reputation: 14573

Lazy load the module:

public partial class TestComp : ComponentBase, IAsyncDisposable
{
    [Inject]
    private IJSRuntime JsRuntime { get; set; }
    private readonly Lazy<Task<IJSObjectReference>> moduleTask;

    [Parameter]
    public string? Message { get; set; }

    public TestComp()
    {
        moduleTask = new(() => JsRuntime!.InvokeAsync<IJSObjectReference>(
            identifier: "import",
            args: "./_content/MyComp/MyScript.js")
                .AsTask());
    }

    private async Task Click()
    {
        var module = await moduleTask.Value;
        Message += "...click";
        await module.InvokeAsync<string>("popup", Message);
    }

    public async ValueTask DisposeAsync()
    {
        if (moduleTask.IsValueCreated)
        {
            var module = await moduleTask.Value;
            await module.DisposeAsync();
        }
    }
}

Note: I am assuming MyScript.js is in the wwwroot folder of the MyComp project which is the NuGet package.

Upvotes: 1

Related Questions