Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Custom CSS throws Unhandled Error in Blazor WASM Standalone

$
0
0

I have a new Blazor WASM Standalone project targeting .NET 9 that works fine. It's a new project so it doesn't have much in it.

I added my own custom css file to the project and referenced in index.html and now I get the following message with not much else for information.

An unhandled error has occurred. Reload

I don't see any related error messages in the console either.

When I started getting this error, I removed all my new modifications and started adding them one at a time. Adding references to Google font files or the latest version of Bootstrap didn't cause any issues. The error popped up when I referenced the css file in index.html which looks like below:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>My New App</title><base href="/" /><!--<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />--><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" /><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"><link rel="stylesheet" href="css/style.css" /> /* Changed the reference from app.css to style.css */<link rel="icon" href="./favicon.ico" type="image/x-icon"><link href="Ingrid.Web.styles.css" rel="stylesheet" /></head><body><div id="app"></div><div id="blazor-error-ui">        An unhandled error has occurred.<a href="." class="reload">Reload</a><span class="dismiss">🗙</span></div><script src="_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"></script><script src="_framework/blazor.webassembly.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> /* I also added this to use the latest version of Bootstrap */</body></html>

Any idea what maybe causing this issue?

P.S. My css file is also a new file and doesn't have much in it. It contains fairly basic css classes and it's already minified.


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>