_content/LeafletForBlazor/LeafletMapFunctionalities.js net::ERR_ABORTED 404 (Not Found)

[dsx75]

Hello,

I'm testing the AddMapToBlazorPage example on Blazor Interactive Server 8.0 and I'm getting the following error:

GET http://localhost:5555/_content/LeafletForBlazor/LeafletMapFunctionalities.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

blazor.web.js:1 [2024-07-24T07:08:14.760Z] Error: Microsoft.JSInterop.JSException: Failed to fetch dynamically imported module: http://localhost:5555/_content/LeafletForBlazor/LeafletMapFunctionalities.js TypeError: Failed to fetch dynamically imported module: http://localhost:5555/_content/LeafletForBlazor/LeafletMapFunctionalities.js at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args) at LeafletForBlazor.CoreJsInterop.LoadMapPartialAsync(ParametersInitialization parameters, ParametersInitialization esri_api_parameters, ParametersInitialization plugins_parameters, ParametersInitialization ui_controls_parameters, ParametersInitialization images_overlay, DotNetObjectReference1 dotNetObject) at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__128_0(Object state) at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.PostAsync[TState](Task antecedent, Action1 callback, TState state)

Any ideas, please?

[ichim]

Hello sir,

The AddMapToBlazorPage project uses the Map control for which we have not updated and will not be supported due to some design mistakes. The RealTimeMap control is supported and continuously updated. I checked this control and it works correctly for Blazor Server App project and .NET 8. Do you have more information? For example: how do you run the project? It seems that it cannot find the addresses of the internal files...

[dsx75]

Hmm, I tried to create a clean new project, just to be sure the issue is not related to my existing code or settings and, strangely enough, I am getting a different error now:

Visual Studio 2022 17.10.4

Create new project

Blazor Web App

Framework: .NET 8.0

Authentication type: none

Configure for HTTPS: yes

Interactive render mode: Server

Interactivity location: Per page/component

Create

Add NuGet package LeafletForBlazor 2.0.6.8 to the generated project.

Add @using directive to the _Imports.razor file:

@using LeafletForBlazor

Main page (Home.razor) - add render mode:

@rendermode InteractiveServer

Main page (Home.razor) - add component:

<RealTimeMap Parameters="parameters" height="460px" width="620px"></RealTimeMap>

Main page (Home.razor) - add code:

@code{
     RealTimeMap.LoadParameters parameters = new RealTimeMap.LoadParameters()  //general map settings
         {
             location = new RealTimeMap.Location()
             {
                 latitude = 44.4501715,      
                 longitude = 26.1107672,
             },
             zoom_level = 18
         };
     }

Visual Studio main menu - Debug - Start Debugging (F5)

The default browser opens (Google Chrome in my case) with following error:

Uncaught Error: Found malformed component comment at Blazor:{"type":"server","prerenderId":"447057ca63744c3692c855f6d8a3ac26","key":{"locationHash":"6B2627A70EAFBAC3352224E51A13CBF7BA203EE50B1B9B601D7052414378C527:0","formattedComponentKey":""},"sequence":0,"descriptor":"CfDJ8BfBq\u002BzpI81IifmF8LGvLunmwjC1itq/8edeoEacv3hcF2YXnrMIjSxp3L3im2ldMn\u002BzzmoepWEK5EhR/3BJzLQMrXFK7hT9t7Jv4hVFdNEqXtUoiYQlhZGpyR46xu2WIbYidETzR0wLoSl/SUjiin81ZFLyE3S9WGyyqIc\u002BKFH4RAxFjq6rnJTFkAJX58\u002BqGJJMT76BH3UYuHsTOE1m7q9LteJVbmQ\u002B3XcdmiFqNfCXIN8hZ3c6peZNnGzMh/PzwSs6aFXsm63huP/NqHRKp7W2Ehmlv2AHCJZetMM1cW5rlFF/momzjhceRSfRJ90F3HvTMdZNb1SxJHl0SMMMBIbaYjIrUODIbpi/fHc6pvbKIGAo5EPl0RQr5udFtzAHkHCPkNlevmfqfH/52dJVPw33t4p/S5iMlbKdKa8XzqowM0oeksVjnTH/vzV\u002BtpTJGyu1VNv/m837DGo4G\u002BUtkm4dHcWQOMv\u002BHfH\u002BNLYfySJmO/SVzVPwsLFz58P6B75i\u002BZLh5/BdsVuTNnEb6jo45vAUatoN\u002BITziXLX2z1MoTWn"}
    at Dt (blazor.web.js:1:42764)
    at Rt (blazor.web.js:1:41344)
    at Rt (blazor.web.js:1:41417)
    at Rt (blazor.web.js:1:41417)
    at Rt (blazor.web.js:1:41417)
    at Rt (blazor.web.js:1:41417)
    at Rt (blazor.web.js:1:41417)
    at blazor.web.js:1:40607
    at St (blazor.web.js:1:40659)
    at bi (blazor.web.js:1:171526)
Dt @ blazor.web.js:1
Rt @ blazor.web.js:1
Rt @ blazor.web.js:1
Rt @ blazor.web.js:1
Rt @ blazor.web.js:1
Rt @ blazor.web.js:1
Rt @ blazor.web.js:1
(anonymous) @ blazor.web.js:1
St @ blazor.web.js:1
bi @ blazor.web.js:1
(anonymous) @ blazor.web.js:1
Ki @ blazor.web.js:1

[ichim]

Hello sir,

Please archive and send me the project.

[dsx75]

E-mail sent. Thanks.

[ichim]

Thanks a lot!

[RemTheDev]

Hmm, I tried to create a clean new project, just to be sure the issue is not related to my existing code or settings and, strangely enough, I am getting a different error now:

Visual Studio 2022 17.10.4

Create new project

Blazor Web App

Framework: .NET 8.0

Authentication type: none

Configure for HTTPS: yes

Interactive render mode: Server

Interactivity location: Per page/component

Create

Add NuGet package LeafletForBlazor 2.0.6.8 to the generated project.

Add @using directive to the _Imports.razor file:

@using LeafletForBlazor

Main page (Home.razor) - add render mode:

@rendermode InteractiveServer

Main page (Home.razor) - add component:

<RealTimeMap Parameters="parameters" height="460px" width="620px"></RealTimeMap>

Main page (Home.razor) - add code:

@code{
     RealTimeMap.LoadParameters parameters = new RealTimeMap.LoadParameters()  //general map settings
         {
             location = new RealTimeMap.Location()
             {
                 latitude = 44.4501715,      
                 longitude = 26.1107672,
             },
             zoom_level = 18
         };
     }

Visual Studio main menu - Debug - Start Debugging (F5)

The default browser opens (Google Chrome in my case) with following error:

Uncaught Error: Found malformed component comment at Blazor:{"type":"server","prerenderId":"447057ca63744c3692c855f6d8a3ac26","key":{"locationHash":"6B2627A70EAFBAC3352224E51A13CBF7BA203EE50B1B9B601D7052414378C527:0","formattedComponentKey":""},"sequence":0,"descriptor":"CfDJ8BfBq\u002BzpI81IifmF8LGvLunmwjC1itq/8edeoEacv3hcF2YXnrMIjSxp3L3im2ldMn\u002BzzmoepWEK5EhR/3BJzLQMrXFK7hT9t7Jv4hVFdNEqXtUoiYQlhZGpyR46xu2WIbYidETzR0wLoSl/SUjiin81ZFLyE3S9WGyyqIc\u002BKFH4RAxFjq6rnJTFkAJX58\u002BqGJJMT76BH3UYuHsTOE1m7q9LteJVbmQ\u002B3XcdmiFqNfCXIN8hZ3c6peZNnGzMh/PzwSs6aFXsm63huP/NqHRKp7W2Ehmlv2AHCJZetMM1cW5rlFF/momzjhceRSfRJ90F3HvTMdZNb1SxJHl0SMMMBIbaYjIrUODIbpi/fHc6pvbKIGAo5EPl0RQr5udFtzAHkHCPkNlevmfqfH/52dJVPw33t4p/S5iMlbKdKa8XzqowM0oeksVjnTH/vzV\u002BtpTJGyu1VNv/m837DGo4G\u002BUtkm4dHcWQOMv\u002BHfH\u002BNLYfySJmO/SVzVPwsLFz58P6B75i\u002BZLh5/BdsVuTNnEb6jo45vAUatoN\u002BITziXLX2z1MoTWn"}
    at Dt (blazor.web.js:1:42764)
    at Rt (blazor.web.js:1:41344)
    at Rt (blazor.web.js:1:41417)
    at Rt (blazor.web.js:1:41417)
    at Rt (blazor.web.js:1:41417)
    at Rt (blazor.web.js:1:41417)
    at Rt (blazor.web.js:1:41417)
    at blazor.web.js:1:40607
    at St (blazor.web.js:1:40659)
    at bi (blazor.web.js:1:171526)
Dt @ blazor.web.js:1
Rt @ blazor.web.js:1
Rt @ blazor.web.js:1
Rt @ blazor.web.js:1
Rt @ blazor.web.js:1
Rt @ blazor.web.js:1
Rt @ blazor.web.js:1
(anonymous) @ blazor.web.js:1
St @ blazor.web.js:1
bi @ blazor.web.js:1
(anonymous) @ blazor.web.js:1
Ki @ blazor.web.js:1

Hi! For anyone having this issue, I was having this exact error with the basic setup:

_Imports.razor :

@using LeafletForBlazor

My page component :

<RealTimeMap width="600px"
             height="600px"
             Parameters="@parameters">
</RealTimeMap>

@code {
    //map initialization parameters
    RealTimeMap.LoadParameters parameters = new RealTimeMap.LoadParameters()  //general map settings
        {
            location = new RealTimeMap.Location()
            {
                latitude = 44.4501715,
                longitude = 26.1107672,
            },
            zoomLevel = 18
        };
}

The error went away when I put the RealTimeMap component in a div:

<div>
    <RealTimeMap width="600px"
                 height="600px"
                 Parameters="@parameters"></RealTimeMap>
</div>

@code {
    //map initialization parameters
    RealTimeMap.LoadParameters parameters = new RealTimeMap.LoadParameters()  //general map settings
        {
            location = new RealTimeMap.Location()
            {
                latitude = 44.4501715,
                longitude = 26.1107672,
            },
            zoomLevel = 18
        };
}

This workaround is probably a good hint to figure out what's causing the issue.