Unhandled exception rendering component

Question

Hi,
My application in blazor wasm work very well (except some issues).
I was able to run my application with IIS Express with blazor.xxx.Server as start-up project.
Now when I launch IIS Express I get the message :

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]  
      Unhandled exception rendering component: '<' is an invalid start of a value. Path: $ | LineNumber: 0 | BytePositionInLine: 0.  

I've seen that this message is due to the running of the blazor.xxx.client project instead of blazor.xxx.server so it's not my case.

Do you know where the problem comes from?

Answer 1

Hi @sblb ,

 Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]    

        Unhandled exception rendering component: '<' is an invalid start of a value. Path: $ | LineNumber: 0 | BytePositionInLine: 0.  

I've seen that this message is due to the running of the blazor.xxx.client project instead of blazor.xxx.server so it's not my case.

Check the Startup project, the Startup Project should be blazor.xxx.server project, instead of the blazor.xxx.client project.

For the above error, it happens on the page which will call the API method to get the data. Because the server project doesn't start up, when you access the API method on the server, it will return a custom error page, instead of the json data, so when deserialize the data, it will show the '<' is an invalid start of a value exception.

For example, when create a new Blazor WebAssembly application, if we set the .client project as the Startup project, in the FetchData page, when access the WeatherForecast API method, it will return a custom error page, and will show the exception.

So, to solve this issue, we need to set the blazor.xxx.server project as the Startup project.

Or, you can modify the http request send code, try to use Http.GetAsync method to send the request, instead of using the Http.GetFromJsonAsync method. Then, after getting the response, you can check the response content type, if it is the json result, you can deserialize it to the object, and render the data. If the response body is html format, there might be some error.

Code like this:

private WeatherForecast[]? forecasts;  

protected override async Task OnInitializedAsync()  
{  
    try  
    {  
        //forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");   

        HttpResponseMessage response = await Http.GetAsync("WeatherForecast");  
        if (response.Content.Headers.ContentType.MediaType == "application/json")  
        {   
            // Reading Response.    
            string result = response.Content.ReadAsStringAsync().Result;     
            forecasts = Newtonsoft.Json.JsonConvert.DeserializeObject<WeatherForecast[]>(result);    
        };   
    }  
    catch (Exception e)  
    {  
        Console.WriteLine(e.Message);  
    }  
}  

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion

Answer 2

Hi, thanks to your explanation.

I startup project is WebApp3.server:

I added try{} catch{} that you proposed the application run w/o error there is nothing displayed

I have removed try catch and it shows that some variables are not in the context even though these variables have been removed.

I closed VS run myapp with IIS Express and the application works.

I really don't understand. The only change before getting this error message is: [Route("api/[controller]")] becomes [Route("api/[controller]/[action]")]
Now I didn't put [action]