[Validation] Navigating away from a page that hosts an interactive component
- 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
Assessment
This issue has not been assessed yet.