Incorrect Base Path Resolution for CropperJSInterop.min.js in Blazor Server App Deployed as IIS Application

[zimmer62]

I'm having a problem with the base path not working correctly and app is requesting the cropperJSInterop.min.js from the wrong URL

I see there was a similar bug reported before, which was supposedly fixed, but I don't think this worked for Blazor Server being deployed as an application on IIS.

I'm using version 1.2.0
Blazor Sever
.NET 7
Deployed to IIS as a application that lives down a level path off the root
e.g.
https://www.mydomain.com/myapplication/

The myapplication path is being stripped and then I get an error message:
Error: Microsoft.JSInterop.JSException: Failed to fetch dynamically imported module: https://www.mydomain.com/_content/Cropper.Blazor/cropperJsInterop.min.js

Looking over the code, I'm not sure it's using the navigation manager properly. The file in question is CropperJSInterop.cs

public async Task LoadModuleAsync(CancellationToken cancellationToken = default)
        {
            Uri baseUri = new Uri(_navigationManager.BaseUri);
            string pathAndQuery = baseUri.PathAndQuery;
            string hostName = baseUri.ToString().Replace(pathAndQuery, string.Empty);
            string globalPathToCropperModule = Path.Combine(hostName, PathToCropperModule);

            Module = await _jsRuntime.InvokeAsync<IJSObjectReference>(
                "import", cancellationToken, globalPathToCropperModule);
        }

It seems this could be simplified, and fix my problem using the navigation manager's ToAbsoluteUri method, here is my solution:

    public async Task LoadModuleAsync(CancellationToken cancellationToken = default)
    {
        string globalPathToCropperModule = _navigationManager.ToAbsoluteUri(PathToCropperModule).AbsoluteUri;

        Module = await _jsRuntime.InvokeAsync<IJSObjectReference>(
            "import", cancellationToken, globalPathToCropperModule);
    }

I've run two tests on my production server

One that uses this code:

Uri baseUri = new Uri(_navigationManager.BaseUri);
string pathAndQuery = baseUri.PathAndQuery;
string hostName = baseUri.ToString().Replace(pathAndQuery, string.Empty);
string globalPathToCropperModule = Path.Combine(hostName, PathToCropperModule);

This results in globalPathToCropperModule = "https://www.mydomain.com_content/Cropper.Blazor/cropperJsInterop.min.js"

And one that uses this code:

 string globalPathToCropperModule = _navigationManager.ToAbsoluteUri(PathToCropperModule).AbsoluteUri;

This results in globalPathToCropperModule = "https://www.mydomain.com/myapplication/_content/Cropper.Blazor/cropperJsInterop.min.js"

If this wouldn't work for other people I'm not sure why, maybe it has something to do with the way it's deployed not via IIS to an alternate path.

Having this property as a configuration options could also be a solution. However I think the method of using the navigation manager .ToAbsoluteUri method might still be preferred as it's the intended solution to find the correct Uri. Maybe an additional configuration override if you want to have the files statically stored somewhere or have some alternate setup.

[MaxymGorn]

PR: #153

[MaxymGorn]

Hi @zimmer62 . I added options into cropperjsInterop module, now you can import that module using settings like that, currently we have 2 mode:

1. Override path to cropper module:

2. Override full global path to cropper module, example:

[MaxymGorn]

Please, wait a little while the changes are in the dev and master branch

[MaxymGorn]

You can use the new version of the package right now!

[MaxymGorn]

Hi @zimmer62 . Is the error currently valid in the latest cropper version 1.2.2 and can I close the issue?