aspnetcore: Updating published Blazor WebAssembly application from .NET 7 to .NET8 preview crashes with: Cannot read properties of undefined (reading 'dotnet.wasm')

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

If you have published an .NET 7 Blazor WebAssembly application, and run in a browser. And then updates to .NET 8 preview the application will crash in the browser:

blazor.webassembly.js:1  Error: Failed to start platform. Reason: TypeError: Cannot read properties of undefined (reading 'dotnet.wasm')
    at Vt (blazor.webassembly.js:1:62226)
(anonymous) @ blazor.webassembly.js:1

Promise.catch (async)
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
blazor.webassembly.js:1  Uncaught (in promise) TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at blazor.webassembly.js:1:37659
    at blazor.webassembly.js:1:38464
    at Object.start (blazor.webassembly.js:1:46018)
    at Vt (blazor.webassembly.js:1:62202) 

Clearing caches fixes the problem.

Expected Behavior

The application should not crash, and automatically update the caches.

Steps To Reproduce

• Create a new .NET 7 Blazor WebAssembly application
• Publish the application to Azure App Service.
• Start the application in a lot of browsers. It feels like this is easier to get in a mobile, but not sure.
• Update the application to .NET 8 preview.

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0-rc.1.23421.29" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.0-rc.1.23421.29" PrivateAssets="all" />
  </ItemGroup>

</Project>

• Publish the application again.
• Update the application in the browser.
• The application will now not load.

Exceptions (if any)

No response

.NET Version

8.0.100-rc.1.23455.8

Anything else?

Clearing the storage cache and a hard reload (Ctrl+F5) fixes the issue:

https://user-images.githubusercontent.com/3163293/269350678-66df8ae0-8bc2-427f-97ca-2c5e0c5d26f8.png

This can also be solved with JavaScript. Update the index.html with this:

<div id="app">
    <svg class="loading-progress">
        <circle r="40%" cx="50%" cy="50%" />
        <circle r="40%" cx="50%" cy="50%" />
    </svg>
    <div class="loading-progress-text"></div>
    <div class="loading-reload-text">
        <a href="#" id="reload-link">Reload</a>
    </div>

    <script>
        document.getElementById('reload-link').addEventListener('click', function (event) {
            event.preventDefault();

            caches.keys().then(function (cacheNames) {
                return Promise.all(
                    cacheNames.map(function (cacheName) {
                        return caches.delete(cacheName);
                    })
                );
            }).then(function () {
                window.location.reload(true);
            });
        });
    </script>
</div>

And add this CSS.

.loading-reload-text {
    text-align: center;
    opacity: 0;
    animation: loading-reload-fade-in 1s ease-in-out 4s forwards;
}

@keyframes loading-reload-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.loading-reload-text a {
    font-weight: 300;
    font-size: 90%;
}