Blazor Azure Static Web App can't load Javascript from _content

Question

Recently deployed a Blazor WebAssembly project (via Azure DevOps) to an Azure Static Web App, and while the deployment seems to be okay, and the app loads and runs, accessing a page that uses the Darnton.Blazor.DeviceInterop NuGet package (to access the browser's GeoLocation API) fails.

It appears the required geolocation.js is failing to load from _content as shown below:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRender[100]
    Unhandled exception rendering component: Failed to fetch dynamically imported module: https://{staticwebapp}/_content/Darnton.Blazor.DeviceInterop/js/geolocation.js

staticwebapp.config.json was included in the project root as such:

{
  "navigationFallback": {
    "rewrite": "/index.html"
  },
  "mimeTypes": {
    ".js": "text/javascript"
  }
}

and of course Azure's diagnostics, don't seem to want to work... despite having accessed the app multiple times over several hours.

Anyone have any clue what might be wrong?

* UPDATE *

Turns out Azure Static Web Apps use case sensitive URLs. The geolocation.js file is actually deployed to the proper location, but as Geolocation.js...

after reviewing the Darnton.Blazor.DeviceInterop GitHub repo, it looks like it is using the proper casing in GeoLocationService.cs (when calling the JSBinder), but the actual request is definitely all lower case and that is why it returns a 404.

Either the Static Web App needs to be configured to be case insensitive, or the Blazor request needs to be configured to be case sensitive. Not sure either of these are possible yet, the only other solution would be to just fork the repo and fix it.

This application 100% works locally and also deployed as an App Service, and should be able to work as a Static Web App, as it's 100% WebAssembly. The Darnton.Blazor.DeviceInterop NuGet package has internal JS (i.e. _content) that is apparently inaccessible when hosted as a Static Web App for some reason. I thought it was the MIME type, but adding it changed nothing. This is not an issue with the code, but rather some configuration of the host. — Xorcist
– Xorcist, Commented Jan 28 at 13:19
You should still post errors as text (for search enigines) and do some more diagnostics. Is the file actually there on the server? In your Published package? etc. — Henk Holterman
– Henk Holterman, Commented Jan 28 at 13:59
When I publish to a local folder the file is there. After some digging it appears there are other *.js files that load just fine (i.e. from _content). so this may be an issue with this specific package... not sure why though. — Xorcist
– Xorcist, Commented Jan 28 at 14:13

Henk Holterman · Accepted Answer · 2025-01-28 12:02:55Z

0

Put the exact URL (from the error message) for that js file in the browser address bar, see if you can load it.

This looks like it might be that the router sends you to the "nothing here" page, that would explain the text/html type. Or to another error page that might shed some light.

And then browse and check the published files, in a static web app that file should really be physically there.

It could be a misconfiguration of <base href="..." />

answered Jan 28 at 12:02

Henk Holterman

276k33 gold badges353 silver badges540 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Xorcist Jan 28 at 13:21

The Static Web App is building from the repo at the correct path (the root of the project), so <base href="/"/> should be correct and all routing works as expected, it's just internal JavaScript of the Darnton.Blazor.DeviceInterop NuGet package that seems inaccessible.

Xorcist Jan 28 at 13:59

if I remove the navigationFallback I just get a straight 404 on the geolocation.js, so I know the staticwebapp.config.json is being applied, but something is missing. As I mentioned above this application works if deployed as a App Service instead of a Static Web App, but it should work as it's 100% WebAssembly.

Xorcist · Accepted Answer · 2025-01-28 16:09:15Z

0

After determining there was a case sensitivity issue with the request, I was able to add a URL rewrite to the staticwebapp.config.json to rectify the issue, the new file looks like this:

{
  "navigationFallback": {
    "rewrite": "/index.html"
  },
  "routes": [
    {
      "route": "/_content/Darnton.Blazor.DeviceInterop/js/geolocation.js",
      "rewrite": "/_content/Darnton.Blazor.DeviceInterop/js/Geolocation.js"
    }
  ]
}

answered Jan 28 at 16:09

Xorcist

3,3814 gold badges25 silver badges49 bronze badges

Collectives™ on Stack Overflow

Blazor Azure Static Web App can't load Javascript from _content

* UPDATE *

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

*** UPDATE ***

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

* UPDATE *