Client-side error only in release mode on 0.6.0-alpha.2: Uncaught TypeError: root is undefined / Cannot read properties of undefined (reading 'appendChild')

[david-boles]

Problem

Client-side panic when hydrating a release (not debug) fullstack build on 0.6.0-alpha.2:

Chrome:

inline0.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'appendChild')
    at RawInterpreter.appendChildren (inline0.js:2:2759)
    at RawInterpreter.run (inline0.js:148:46)
    at imports.wbg.__wbg_run_a2a42ac573bdb8ba (specs.js:723:14)
    at specs_bg.wasm:0x15e0b0
    at specs_bg.wasm:0xb5f74
    at specs_bg.wasm:0xdf35b
    at specs_bg.wasm:0x5d5ea
    at specs_bg.wasm:0x4a40c
    at specs_bg.wasm:0xdb62f
    at specs_bg.wasm:0x158ee1

Steps To Reproduce

Unsure; it doesn't happen in a new project. Will try to narrow down what's causing it in mine.

Expected behavior

No panic.

Environment:

• Dioxus version: 0.6.0-alpha.2
• Rust version: Probably 1.80.1? Not sure what it got installed with.
• OS info: Ubuntu 20.04.6 LTS, 5.15.0-119-generic
• App platform: Fullstack

[david-boles]

I'm having some trouble producing a minimal reproducible example, so I think there's more playing a role here, but it seems to be related to use_server_future returning RenderError::Suspended (and me propagating that back up) on the client. Just dropping the return value from use_server_future makes this error go away. Although the initial return value from use_server_future doesn't change between release and not-release.

[david-boles]

Welp, this is odd. Adding:

tokio::time::sleep(Duration::from_millis(1000)).await;

To my #[server] function being called through use_server_future fixes it. Maybe I'm hitting some sort of race condition on the client?

I notice that that does delay the final part:

<div id="ds-0-r" hidden><!--node-id0-->root<!--#--></div><script>window.dx_hydrate([0], "...")</script></body>
</html>

Getting delivered and thus hydration starting.

[ryo33]

I got the same error on the latest git version, and the tokio::time::sleep(Duration::from_millis(1000)).await; trick also resolves mine.

[ryo33]

I've created a minimum repro. https://github.com/ryo33/dioxus-repros/blob/646c6791482d1227eb69f48ac6cb0faad5d34e21/src/main.rs#L19-L40

It's just a server function that waits a milli-second. It reproduces regardless of whether suspend() is used.

[ryo33]

It still happens on the latest "[email protected]"

[ochrons]

I ran into this exact same problem with alpha.5 release. Adding an artificial delay solved this, but it's no real solution.

There are also other hydration errors when using document::Link to inject CSS into the head tag and then calling server functions.

[ryo33]

#3240 fixes this

[ochrons]

This happens if loading the WASM takes longer than calling the server function. Tested with #3240 and it does fix the problem for me.