dotnet / dotnet/aspnetcore

[Validation] Navigating away from a page that hosts an interactive component

Open
#68,529 1 comment 0 reactions 1 assignee Claimed by @surya3655 View on GitHub
area-blazor Validation validation-scenario
Dominant language
C#
Stars
38.4k
Forks
10.9k
Avg merge
2d 5h
Merged PRs (30d)
276

Description

**Scenario contact:** @javiercn

## Scenario

**This scenario validates that a reported bug is fixed.** In .NET 10, putting an interactive component on the home page as well as on its own dedicated page crashed enhanced navigation. Navigating from Home to that page and back threw:

```
TypeError: Cannot read properties of null (reading 'insertBefore')
```

The report was precise about when it happened, and the details matter because they are easy to miss:

* It only failed when the component was on the **home page** as well as on its own page.
* It only failed when that was the **first navigation after loading Home**. Visiting any other page first made the problem go away entirely.
* It did not happen on .NET 9.

([#64722](https://github.com/dotnet/aspnetcore/issues/64722))

## Minimum build

.NET 11 Preview 7 or later.

## Configurations to cover

* Blazor Web App
* [x] Static SSR
* [x] Interactive Server
* [ ] Interactive WebAssembly
* [ ] Interactive Auto
* [ ] Standalone WebAssembly
* [ ] Hybrid (MAUI)

One app, not two runs. The home page is statically rendered and hosts an Interactive Server component, which is the arrangement that failed.

## Also exercise

* [ ] Published output
* [x] An existing .NET 10 app upgraded to .NET 11
* [ ] Trimming or ahead-of-time compilation
* [ ] More than one server instance, or a proxy in front
* [ ] Hot Reload
* [ ] An IDE as well as the command line
* [ ] Container

## What to build

Create a Blazor Web App with `dotnet new blazor -int Server`, interactivity per page, and keep the generated `Counter` page as it is with `@rendermode InteractiveServer`.

Then make the one change the report describes: **place the `Counter` component on the Home page too**, so the same interactive component appears both embedded on `/` and on its own route at `/counter`.

Add a third page, `/other`, statically rendered, so you can test the sequence that avoided the crash.

Put links to all three in the nav menu. Navigation has to be by clicking links, since a typed address is a full page load and does not go through the code being fixed.

## Things to try

The first is the reported repro, and the order matters.

* Load `/` fresh, then click straight through to `/counter`, then back to `/`. Do not visit anything else in between.
* Do the same again after a hard refresh, several times over.
* Load `/` fresh, visit `/other` first, then go to `/counter` and back. This is the sequence that used to work, so it tells you whether you have reproduced the right conditions.
* Repeat on .NET 10 to see the original crash.

## Expected behavior

Navigating from a page that hosts an interactive component to that component's own page, and back, works on the first attempt after load.

### Must hold

* Loading `/` fresh and navigating straight to `/counter` renders the counter page.
* Navigating back to `/` renders the home page, with its embedded Counter interactive again.
* No `Cannot read properties of null (reading 'insertBefore')` appears in the browser console at any point, nor any other error.
* The sequence that used to work, visiting `/other` first, still works.
* Repeating the direct round trip five times leaves the app working and the console clean.

## Evidence to capture

If anything failed, the full browser console output including the stack trace, and a note of exactly which navigation in the sequence it happened on.

## Documentation to use

* [ASP.NET Core Blazor render modes](https://learn.microsoft.com/aspnet/core/blazor/components/render-modes?view=aspnetcore-11.0)
* [Enhanced navigation and form handling](https://learn.microsoft.com/aspnet/core/blazor/fundamentals/navigation?view=aspnetcore-11.0#enhanced-navigation-and-form-handling)

## What to report

Report results using the format described in the [validation testing manual](https://github.com/dotnet/aspnetcore/issues/68479). Include link to a repository with the test app.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.