Error upon DOM update when prerendered hydrated non-index page loaded

[david-wallace-croft]

Problem

When a website that uses static prerendering with client-side hydration is loaded from a non-index (/) page, an update to the DOM results in the following console error: "Uncaught (in promise) TypeError: root is undefined"

Steps To Reproduce

Steps to reproduce the behavior:

• Go to https://www.persentia.com/
• Open the browser dev console
• Click on the Slideshow navigation link
• The URL changes to https://www.persentia.com/slideshow
• Wait five seconds without moving the mouse
• The control panel disappears and no error shows in the console
• Go to https://www.persentia.com/slideshow by entering the URL directly in the browser bar
• Wait fives seconds without moving the mouse
• The errors shows in the console when a DOM update is attempted to remove the control panel component
• Source code: https://github.com/david-wallace-croft/dioxus-prototype/blob/main/src/components/slideshow/mod.rs
• Setup instructions: https://www.croftsoft.com/library/tutorials/rust-dioxus-project-setup/

Expected behavior

• No errors regardless of what their entry point URL into the application was

Environment:

• Dioxus version: 0.4.0
• Rust version: 1.73.0
• OS info: Windows
• App platform: web

Questionnaire

• [X] I'm interested in fixing this myself but don't know where to start
• [ ] I would like to fix and I have a solution
• [ ] I don't have time to fix this right now, but maybe later

Context

• I have been digging around for a day trying to figure this out
• My guess is that there is an issue with rehydration and templates
• I am currently looking into rehydrate.rs
• I will keep looking into it but I am filing this bug report in case someone knows the answer off-hand

[ealmloff]

You are correct, generally that error is caused by hydration. You can debug hydration by turning on tracing to the trace level. It will print every node that it tries to hydrate. If you notice a message about failing to hydrate, you can start debugging the element that it did print or should have printed

[ealmloff]

Sometimes the browser will correct some html automatically that breaks hydration. For example, if you have a table without a table body, the browser will fill it in, but it will break hydration

[david-wallace-croft]

When you are in hot reload mode on a subpage (/about) instead of the home page (/) and you click on the reload button in the browser, the hot reload will show the content twice on the page, with updated content shown in the second instance toward the bottom. I am assuming this is a related issue that might be fixed by fixing the issue reported above. Still looking into it.

[ealmloff]

Hydration should be a lot more resilient in 0.5 which will make hydration issues more rare. Hydration should succeed now even if the browser or an extension modifies the HTML