Blazor 8 Uncaught SyntaxError: Unexpected token '<'

Greg Finzer 0 Reputation points
2024-08-05T15:50:42.79+00:00

I am stuck trying to convert from Blazor 7 Server to Blazor 8 Server. I am just about ready to give up, I don't think it is possible to use Blazor 8 with this defect in Blazor. I am using Blazor 8 Server. It is rendering CSS and JavaScript static files as garbage.

Here is my code for the App.razor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?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" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-9/css/all.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link href="https://cdn.syncfusion.com/blazor/26.1.35/styles/bootstrap5.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <link href="css/bedBrigade/theme.css" rel="stylesheet" />
    <link href="css/bedBrigade/navbar-top-fixed.css" rel="stylesheet" />
    <link href="css/open-iconic/font/css/open-iconic-bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
  
    @* This is required for component styles to work *@
    <link rel="stylesheet" href="BedBrigade.Client.styles.css" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <HeadOutlet @rendermode="RenderMode.InteractiveServer" />
</head>
<body>
<Routes @rendermode="RenderMode.InteractiveServer" />
    @* This is required for Blazor to work *@
    <script src="_framework/blazor.web.js" type="text/javascript"></script>
  
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://cdn.syncfusion.com/blazor/26.1.35/syncfusion-blazor.min.js"></script>
    <script src="js/AddRemoveClass.js" type="text/javascript"></script>
    <script src="js/SetGetValue.js" type="text/javascript"></script>
    <script src="js/DisplayToggle.js" type="text/javascript"></script>
    <script src="js/script.js" type="text/javascript"></script>
  
</body>
</html>

Here is the error in the console:

AddRemoveClass.js:1 Uncaught SyntaxError: Unexpected token '<'

SetGetValue.js:1 Uncaught SyntaxError: Unexpected token '<' DisplayToggle.js:1 Uncaught SyntaxError: Unexpected token '<' script.js:1 Uncaught SyntaxError: Unexpected token '<'

Here is the garbage that Blazor is returning for the site.css file which is a simple CSS file:

<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <base href="/"> <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?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" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-9/css/all.min.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link href="https://cdn.syncfusion.com/blazor/26.1.35/styles/bootstrap5.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> <link href="css/bedBrigade/theme.css" rel="stylesheet"> <link href="css/bedBrigade/navbar-top-fixed.css" rel="stylesheet"> <link href="css/open-iconic/font/css/open-iconic-bootstrap.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <link rel="stylesheet" href="BedBrigade.Client.styles.css"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <!--Blazor: {
    "type":"server","prerenderId":"e54eaffc70924f8593c175a59f1a74fc","key": {
        "locationHash":"77D12F14A8105320B1AAED6AE7E689DA0EC4483270A645E84079EAA0FFDF550D:5","formattedComponentKey":""
    }
    ,"sequence":0,"descriptor":"CfDJ8PIq19D\u002BWmZHtrybL9W6q67GwUo/zmonht\u002BhZHmyTcrBf5EC0hmQppSavSqONfKS9uLoIfBWpu4nm6QEqf7UdaDY/eiAe9V/12Q2zRmCTFhxolb6xcTBmVAYI4yt09wnbGqL5JlE3sWhAXfCjvSwYvxwXncYgkJA9MM1YrYEx6nZT0SPk/N6q7zUc\u002BrhBpE4utkQRqM16xBnS5EmKMG3tQAds5srnL/qGLVHKGtdaPcCGo\u002B6iconH0DcfzCmNEkiRAhosrLBuPdqUzCfSUJQBgyzOQLKdAVnl5bMTup2pYp5eAH7mKDoA1GwJvW\u002B0T7zQ/IFAAJJCyp8EARpdlnnPsMIu/jZPY8hXiIJkDEPJxNPk9ETSjfC21RE7TyvvISb0iNmJyz\u002BeZv6HcL7C8dTJ6SSAM4hT50kurLv0Sub7Nt3R1cC0LoDbHkOVxj4E2YjCk1DUK4LczsoFui9\u002BjrAxF0716dt93nL\u002BHPAPJLke6kBf0L15y9Yo40miX8N8QKWYW5YQvtbtibdWgLO9qcAgguGDol7\u002BMJN61x6r9aGCgMEF7oZ5R\u002BOybsq5DFKQQrHzQzinHL3rETZIjGPxLzctJg="}
--><!--Blazor: {
    "prerenderId":"e54eaffc70924f8593c175a59f1a74fc"
}
--></head> <body><!--Blazor: {
    "type":"server","prerenderId":"63716ad6c2464eb39d2410ab64d65696","key": {
        "locationHash":"CBD0F45BE278BF61834376C5626B28A84F6A9DFADE125DA9F45A7F66CFB6E29E:8","formattedComponentKey":""
    }
    ,"sequence":1,"descriptor":"CfDJ8PIq19D\u002BWmZHtrybL9W6q65f4IBUmFkERfGhGQ5kJv070gdGJMsa9cbqnjDpF1o/erybCZbuTJTA9iqElnaixtv8A\u002B8xoZC96y1SHS5LG0ZaolT9FdxiZzVbvqfC9W5yVTIS\u002Byw57yDvJtwrhLg0ArayJStNVlgCT3R9sicueuQ8yBxC3ozIHIigZJwH3XtOcmhVeQk6R/kzY5fHZqETAn38MiA\u002BHi8QDRd2FLH4M3Cva9JGCFxDUU4lPGPIC\u002BM1M1QaTh46uOTcgikfoAYKdnN0lA3N5eVOziEqpRWIHOwsYZuJ7SLD0KDC5EyhPEWYsN6pu5nXpTF5Tz3L3ksX3TqFy5GXIYeaOjH87zc/7wkQI4YFmfHa3sl9wQOpOeD44yMOwRawZ8s6t7LrQcfaKTuTJ3baukbMFy\u002BwzuYdMcaDs/P9kPMU1Tz5ExjJqULajHzBONynL0Ketco2fJEQL0RVzWU1j4rxw6gFJDMvi6M\u002B6nxiYrWW1bysg1LotMMJjZpnDgQMRxYOu6b62Cl85LB5iTUz3wjECMKkCzwZdEzT"}
--><div class b-a7icp264bw> This is the header <style b-n0xrkznw31> .nadmin, .ladmin, .lsched, .ltreasure, .lauthor, .neditor, .leditor {
    display: none;
}
#edit, #admin, #manage {
    cursor: pointer;
    font-size: 15px;
    font-family: Comfortaa, cursive;
}
#edit::after, #admin::after, #manage::after {
    content: '';
}
</style> <main b-a7icp264bw><article class="content px-4" b-a7icp264bw> This is the body </article></main> This is the footer </div><!--Blazor: {
    "prerenderId":"63716ad6c2464eb39d2410ab64d65696"
}
--> <script src="_framework/blazor.web.js" type="text/javascript"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script src="https://cdn.syncfusion.com/blazor/26.1.35/syncfusion-blazor.min.js"></script> <script src="js/AddRemoveClass.js" type="text/javascript"></script> <script src="js/SetGetValue.js" type="text/javascript"></script> <script src="js/DisplayToggle.js" type="text/javascript"></script> <script src="js/script.js" type="text/javascript"></script></body></html><!--Blazor-Server-Component-State: CfDJ8PIq19D+WmZHtrybL9W6q67n6HovTUdoPB7Ph4FsIXB5VejJlk9a11Y6Kqs209qmEZFRdQbivCOm8wTNwJ5VGZLl0VAOk+uR2+kIkrUqOHU8Tc9KOh1IPhA5NespkXIvAJf89U2Wq4zfagF/rFleCH+g25AiMmOjKLLfk3e6W1ZXGFma5Z9N0BnGSP1HQMD1AdfxiICFHfFkro6DznV0+eZK1FJvfYpAQjdyBvMkdRlDJs0M07Uan8nMU0NPUKVgLeRA3dPCOMkSy4vrwCpY3JzczavNuvOySugU0ONgZ/Vh9mNabGU83AmLS7+1RUDhH+97ME1JQbG80xGsWwkLcMcKYZrpZrxv20I9k+cZHqAPMZhpEDJ5snZ36fD0zF7jhPV52b0ecas3jrnlK6SIzDzoJmY1O+9Xxf6ADUYZW3ol+xpGQPh+SqC4IZp3j/k3a6H0iF7+l16zQ8WXatneZMFfTx3qdUf/plP9uL675l6321kws94s9msZODo4UvRprytx/oPjP+fXPzDwICRKcom0eEdSTHYLMBYWyMEsk6Sl-->
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,527 questions
{count} votes

2 answers

Sort by: Most helpful
  1. Bruce (SqlWork.com) 62,546 Reputation points
    2024-08-05T19:39:42.2733333+00:00

    you appear to have mapped js and ccs file to blazor routing, so you are getting the index page with a route request. probably bad configuration in program.cs. no guess what you have messed up.

    you should create a .net 8 blazor app to see what the expected configuration is.


  2. Greg Finzer 0 Reputation points
    2024-08-06T13:08:36.84+00:00

    This is a defect in Blazor 8. Blazor 8 cannot handle a root path variable. Example:

    @page "/{mylocation}/{mypageName}"

    If you change it to this, it works:

    @page "pages/{mylocation}/{mypageName}"I have submitted an issue to Microsoft:

    https://github.com/dotnet/aspnetcore/issues/57192

    I have also created a sample project with the steps to reproduce here:

    https://github.com/GregFinzer/Blazor8RootPathVariable