Share via

Blazor - Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

Gábor Varga 36 Reputation points
2022-03-29T14:57:37.95+00:00

Hi,

I have an issue with a Blazor page.
Sometimes I receive the following error message on the browser's console view: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
This is strange, because this error message is not coming always. Just when the application thinks something, and this happen:
187996-blazor-1.png

If I click to end of the line VM50:1 on the screenshot, I have this:
187908-blazor-2.png

Any idea from anybody what can cause the problem?

The worst is that in this case none of the blazor events are working. I cannot click to buttons or blazor components, because none of them are working.

Thanks!
Gabor

Developer technologies | .NET | Blazor
Developer technologies | C#
Developer technologies | C#

An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.

Locked Question. You can vote on whether it's helpful, but you can't add comments or replies or follow the question.

0 comments

Answer recommended by moderator

Gábor Varga 36 Reputation points
2022-03-29T18:57:03.597+00:00

Hi,

It seems, I was too quick with this help request.
In my portal I implemented a special design template and I forgot adding the following line into the <head></head>section of MainLayout:
<base href="~/" />

It seems after adding that forgotten line, the error mentioned previously disappeared.

This is a tipical application developer problem, not a framework issue.
Now I am monitoring the portal and check if the issue appears again.

Thanks!
Gabor

Was this answer helpful?

3 people found this answer helpful.

5 additional answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Rodrigo Kmiecik 0 Reputation points
    2026-06-05T12:37:12.51+00:00

    The issue was caused by Blazor WASM generating fingerprinted assets during publish.

    For example, my index.html was referencing:

    <script src="_framework/blazor.webassembly.js"></script>

    But the published file was actually generated as something like:

    _framework/blazor.webassembly.958z1vx7fr.js

    So IIS returned index.html instead of the JS file, causing:

    Uncaught SyntaxError: Unexpected token '<'

    Then I also got:

    Failed to fetch dynamically imported module: /_framework/dotnet.js

    because dotnet.js was also fingerprinted.

    The fix was:

    In wwwroot/index.html, use:

    <script type="importmap"></script>
<script src="_framework/blazor.webassembly#[.{fingerprint}].js"></script>

    And in the .csproj file add:

    <PropertyGroup>
  <OverrideHtmlAssetPlaceholders>true</OverrideHtmlAssetPlaceholders>
</PropertyGroup>

    Then publish again:

    dotnet clean
dotnet publish -c Release

    Finally, deploy the generated publish output, usually:

    bin/Release/netX.0/publish/wwwroot

    After publishing, the generated index.html should contain the resolved fingerprinted files and a populated import map.

    Was this answer helpful?

    0 comments