Search code examples
blazor-webassemblymime-typesazure-static-web-app

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

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:

enter image description here

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.

enter image description here

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.

Solution

  • 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"
    }
  ]
}