How to solve the white page problem in blazor server.

wilfried kinda 20

When I start my blazor server application, the page content is displayed for less than a second, then I get a blank page.

When I right-click inpect in the browser I get the code :

<html>

  **<head></head>**

  **<body>2024</body>**
```**</html>**

Neither the css style nor the js are loaded.

AgaveJoe 26,136 Reputation points

2024-04-22T12:42:10.8066667+00:00

Keep in mind, we cannot see your code. A blank screen usually indicates an error maybe something to do with making the SignalR connection.

Use console view in the browser's dev tools to see if there are any errors. Use the Visual Studio debugger to step through the code.
wilfried kinda 20 Reputation points

2024-04-23T13:05:16.1466667+00:00

Yes, I don't have any errors in the source code, but here's the result from the development tool's console, When I use the direct @rendermode=InteractiveAuto or InteractiveWebAssembly the site loads fine.
AgaveJoe 26,136 Reputation points

2024-04-23T14:44:22.23+00:00

When I use the direct @rendermode=InteractiveAuto or InteractiveWebAssembly the site loads fine.

It sounds like you figure out the issue. Is this a new question related to the 3rd party JavaScript libraries?
wilfried kinda 20 Reputation points

2024-04-23T18:29:46.97+00:00
No I have not found a solution to my problem here is more explanation:

I've created a blazor web app in which I use an html, css and js template.

In the App.razor file, I modified the following lines:

<HeadOutlet @rendermode=InteractiveAuto />

<Routes @rendermode=InteractiveAuto />

to set global interactivity to auto.

In the first case, when I refresh the page or enter the url from the browser bar, I no longer have interactivity when I click on the buttons and the style of the elements is deformed and I get this error below :

blazor.web.js:1 Error: One or more errors occurred. (Root component type 'adig.Components.Routes' could not be found in the assembly 'adig'.)

I have to go to inspect > Application > storage > and empty the cache so that everything works properly again until I refresh the page.

I tried to solve the problem but couldn't find a solution, so I decided to change the interaction mode to InteractiveServer like this:

<HeadOutlet @rendermode=InteractiveServer />

<Routes @rendermode=InteractiveServer />

but here too I had a new problem: the content was displayed for a short time, then I got a blank page.

Here's the console:

My question is to know why I have this white page instead of the content of my page as I have no error related to the socket, but I noticed that no scripts or no css are loaded,
when I right-click inspect > elements on the white page in chrome I only get these elements:

<html>

<head></head> <body>2024</body>

</html>
here's the result :
Sorry for my poor English, but I'm French, I'm not really fluent in English.
Ping Ni-MSFT 2,250 Reputation points Microsoft Vendor

2024-04-24T07:32:20.8933333+00:00

Hi @wilfried kinda, I think you need modify your project structure, and refer to this official document to know how to achieve.
AgaveJoe 26,136 Reputation points

2024-04-24T12:01:44.22+00:00

I'm not exactly sure what's wrong. The symptom seems to be the initial prerendering functions as expected. The second rendering when the SignalR connection is established clears the screen. One of the problems with using a library like jQuery is jQuery can update the DOM directly which is bad for Blazor. Blazor maintains a virtual DOM which is how Blazor determines what to update on the page. If a client side code made updates to the DOM then the Blazor application will not know about the update.

Along with the rendering modes you should read the Blazor JavaScript interop docs to make sure your design approach is going to work.

ASP.NET Core Blazor JavaScript interoperability (JS interop)
wilfried kinda 20 Reputation points

2024-04-24T13:49:39.5266667+00:00

Hi @Ping Ni-MSFT, I had made the recommended changes on this page, including the bet on global interactivity, I moved the Layout folder, the pages folder and the Routers component into the .Client project, but I still have the problem. If it is possible to have an assisstance in visio or I share the link of my referenciel history that someone takes a look otherwise I'll be forced to close the topic and switch to another technology to make my project in time.

Hi @AgaveJoe I don't think the problem comes from the JS library but from blazor server itself, at least on my side, even when I delete all script import lines except the : <script src="_framework/blazor.web.js"></script>, I still get this blank page.
wilfried kinda 20 Reputation points

2024-04-24T13:50:47.4+00:00

Hi @Ping Ni-MSFT, I had made the recommended changes on this page, including the bet on global interactivity, I moved the Layout folder, the pages folder and the Routers component into the .Client project, but I still have the problem. If it is possible to have an assisstance in visio or I share the link of my referenciel history that someone takes a look otherwise I'll be forced to close the topic and switch to another technology to make my project in time.

Hi @AgaveJoe I don't think the problem comes from the JS library but from blazor server itself, at least on my side, even when I delete all script import lines except the : <script src="_framework/blazor.web.js"></script>, I still get this blank page.
AgaveJoe 26,136 Reputation points

2024-04-24T14:06:28.8966667+00:00

What are you trying to accomplish exactly? Can you provide a minimal example the community can run that reproduces this behavior?

Accepted answer

Bruce (SqlWork.com) 56,686 Reputation points

2024-04-29T17:47:06.5333333+00:00

we can not see your code, but you appear to have a Blazor component wrap a google map. this takes extreme care. both libraries directly update the dom, and can overwrite each others content (this is why jQuery is usually a bad idea with Blazor apps).

have the Blazor component renders a <div id="map"> that the map applies to. also do not use the browser load event, but rather the Blazor component OnAfterRender event to create the map:

var map = new google.maps.Map(document.getElementById("map"), mapOptions);
Please sign in to rate this answer.

1 person found this answer helpful.
wilfried kinda 20 Reputation points

2024-04-30T11:03:42.41+00:00

Hello Bruce (SqlWork.com),

Thank you for your assistance. Indeed, Google Maps, jQuery, and this piece of code :

<p> Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | <a href="#">ADIG Burkina</a> <i class="icon-heart" aria-hidden="true"></i> </p>

in my footer were responsible for my issue.

After removing them, the content of my page displays correctly, but without the animations.

I would like to know how to load my JavaScript normally.

Currently, I include it in the App.razor file.
Sign in to comment

How to solve the white page problem in blazor server.

0 additional answers