"node is undefined" when using dx serve

[MatteoJoliveau]

Problem

When running a Dioxus Web app in debug mode (dx serve --hot-reload) we get the following error that blocks pages from rendering. It seems to be related to our usage of resources because removing the use_resource call and stubbing the data "fixes" the issue. I'm having trouble debugging this however as the error seems to happen in Dioxus' JS code which is minified.

The error is not present when compiled in released mode and served from the final web server.

I'm not able to reproduce it with a minimal dx new project, so I guess I'm hitting some kind of edge case.

I know it's very hard to debug a foreign codebase, so I'm just here asking for help and pointers on how to debug and fix it. I've no experience with web renderers or webassembly, so digging into the minified JS has not been very helpful unfortunately :c

Update 1: I got the same error with a page that didn't have a use_resource hook, so the resource clue might be a red herring.

Update 2: the issue doesn't seem to be with the build profile (debug vs release) but with dx serve exclusively. If I run the app with cargo watch -s 'dx build' and then access it via our backend endpoint (which serves the UI by serving the dist folder directly as static files) everything works fine. If I use dx serve (both with and without --hot-reload) then I get the error.

JS Console Error

wasm-bindgen: imported JS function that was not marked as `catch` threw an error: 
node is undefined

Stack:
run@http://localhost:8080/assets/dioxus/snippets/dioxus-interpreter-js-7c1300c6684e1811/inline0.js:142:16
__wbg_get_imports/imports.wbg.__wbg_run_2ca7d9c27d6a5eb6/<@http://localhost:8080/assets/dioxus/oxidrive.js:566:25
logError@http://localhost:8080/assets/dioxus/oxidrive.js:259:18
__wbg_get_imports/imports.wbg.__wbg_run_2ca7d9c27d6a5eb6@http://localhost:8080/assets/dioxus/oxidrive.js:565:66
oxidrive-06c73cddedade17f.wasm.dioxus_interpreter_js::unified_bindings::RawInterpreter::run::h2f27ca4ac0da4dae@http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:wasm-function[16667]:0x600d98
oxidrive-06c73cddedade17f.wasm.dioxus_interpreter_js::unified_bindings::Interpreter::flush::he23cf67a41e98678@http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:wasm-function[395]:0x10d9fc
oxidrive-06c73cddedade17f.wasm.dioxus_web::mutations::<impl dioxus_web::dom::WebsysDom>::flush_edits::h4fd3c12ffc74e2a9@http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:wasm-function[19361]…
oxidrive.js:268:17

Uncaught TypeError: node is undefined
    run http://localhost:8080/assets/dioxus/snippets/dioxus-interpreter-js-7c1300c6684e1811/inline0.js:142
    __wbg_run_2ca7d9c27d6a5eb6 http://localhost:8080/assets/dioxus/oxidrive.js:566
    logError http://localhost:8080/assets/dioxus/oxidrive.js:259
    __wbg_run_2ca7d9c27d6a5eb6 http://localhost:8080/assets/dioxus/oxidrive.js:565
inline0.js:142:16
    run http://localhost:8080/assets/dioxus/snippets/dioxus-interpreter-js-7c1300c6684e1811/inline0.js:142
    __wbg_run_2ca7d9c27d6a5eb6 http://localhost:8080/assets/dioxus/oxidrive.js:566
    logError http://localhost:8080/assets/dioxus/oxidrive.js:259
    __wbg_run_2ca7d9c27d6a5eb6 http://localhost:8080/assets/dioxus/oxidrive.js:565
    h2f27ca4ac0da4dae http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:6294936
    he23cf67a41e98678 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:1104380
    oxidrive-06c73cddedade17f.wasm.dioxus_web::mutations::<impl dioxus_web::dom::WebsysDom>::flush_edits::h4fd3c12ffc74e2a9 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:6479575
    h16edd80ab2a30af9 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:431908
    h01209da20c082729 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:3236497
    h758c38d8e961a82b http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:3427820
    h73b74b9ff63543bd http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:3179121
    h5a97e43d75380cc8 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:5773541
    oxidrive-06c73cddedade17f.wasm.<dyn core::ops::function::FnMut<(A,)>+Output = R as wasm_bindgen::closure::WasmClosure>::describe::invoke::h8227b253940eb1ee http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:4995315
    __wbg_adapter_63 http://localhost:8080/assets/dioxus/oxidrive.js:337
    real http://localhost:8080/assets/dioxus/oxidrive.js:242
    (Async: VoidFunction)
    __wbg_queueMicrotask_481971b0d87f3dd4 http://localhost:8080/assets/dioxus/oxidrive.js:580
    logError http://localhost:8080/assets/dioxus/oxidrive.js:259
    __wbg_queueMicrotask_481971b0d87f3dd4 http://localhost:8080/assets/dioxus/oxidrive.js:579
    h2756ad73d0cac424 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:6300164
    h892a0569e6c5a6d1 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:3960798
    h88f3ba17d6281c7a http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:6457031
    h445ee9005fe306fb http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:6456969
    h64a697db0772aaca http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:4627915
    h97a7c5d4634d908c http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:5313265
    h30459a8e935ec4a4 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:6352734
    h48f11179c74b1cf0 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:4973216
    h431ef98fbcd46a77 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:6414052
    h6ceaceb742779739 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:6280414
    h26a57e69c749346f http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:4273419
    hab67b51f4e8566c6 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:6036980
    hc56bbf2149a94479 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:4114346
    ha4b411e76aa9b44f http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:6357822
    oxidrive-06c73cddedade17f.wasm.<dioxus_core::tasks::LocalTaskHandle as futures_task::arc_wake::ArcWake>::wake_by_ref::hd11f2247016cc8e1 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:5683236
    h4f19ea5be08c58ec http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:6082710
    hd7aeae41df181142 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:6345244
    hf5db5641673706ce http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:6258619
    h89969427fa6b567d http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:2590921
    oxidrive-06c73cddedade17f.wasm.<futures_channel::oneshot::Sender<T> as core::ops::drop::Drop>::drop::h1f80afe3d1b11612 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:6461241
    heb3b14efb1622fb3 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:6472528
    h288cfca33087130e http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:5870457
    hbd0b243bb2956694 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:6287188
    oxidrive-06c73cddedade17f.wasm.<T as wasm_bindgen::closure::WasmClosureFnOnce<(),R>>::into_fn_mut::{{closure}}::h47c6d9f4e97df5eb http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:6088910
    oxidrive-06c73cddedade17f.wasm.<dyn core::ops::function::FnMut<()>+Output = R as wasm_bindgen::closure::WasmClosure>::describe::invoke::ha5f6ee08ab7008e0 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:5308035
    __wbg_adapter_48 http://localhost:8080/assets/dioxus/oxidrive.js:275
    real http://localhost:8080/assets/dioxus/oxidrive.js:242
    (Async: setTimeout handler)
    __wbg_setTimeout_7d81d052875b0f4f http://localhost:8080/assets/dioxus/oxidrive.js:441
    handleError http://localhost:8080/assets/dioxus/oxidrive.js:342
    __wbg_setTimeout_7d81d052875b0f4f http://localhost:8080/assets/dioxus/oxidrive.js:440
    he0d9fea3b01d6e1b http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:4318361
    h99609eeb050e5fe3 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:3873974
    hba140d558ab5d413 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:4910831
    ha28ec4674b5eb4a6 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:1907573
    oxidrive-06c73cddedade17f.wasm.<core::pin::Pin<P> as core::future::future::Future>::poll::h289cf37395beec6c http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:6048964
    h0f49d4d6fc9d9c98 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:6180655
    h58877f03fb174ca6 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:6312388
    h9ef21a7298190039 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:5804578
    hc7ebcb8e1a97ab65 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:5982423
    oxidrive-06c73cddedade17f.wasm.<futures_util::future::poll_fn::PollFn<F> as core::future::future::Future>::poll::h7ca7f1cf7f0f15c4 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:6015478
    h86424d9a454ec509 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:1964905
    oxidrive-06c73cddedade17f.wasm.dioxus_core::tasks::<impl dioxus_core::runtime::Runtime>::handle_task_wakeup::h2625d569b7d4750e http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:1501410
    h11a91eca0733c46e http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:999195
    hf018c5a5bd4571cc http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:1282778
    h101333dc4b979024 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:3260571
    he41aa9d4d6fcdea3 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:1441104
    oxidrive-06c73cddedade17f.wasm.<futures_util::future::future::fuse::Fuse<Fut> as core::future::future::Future>::poll::h7e3025f8b9a43ef1 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:4513560
    oxidrive-06c73cddedade17f.wasm.<core::pin::Pin<P> as core::future::future::Future>::poll::he8121bf7a57137ea http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:5905202
    oxidrive-06c73cddedade17f.wasm.<core::pin::Pin<P> as core::future::future::Future>::poll::h0aec9c05b9b0f5e3 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:5904974
    hc64ae98e4195c0ae http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:6043747
    h55d0908120f064d9 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:3930952
    oxidrive-06c73cddedade17f.wasm.core::ops::function::impls::<impl core::ops::function::FnMut<A> for &mut F>::call_mut::h37d1f48912645926 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:6092373
    h33b6ab9931fbc0a6 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:2252526
    oxidrive-06c73cddedade17f.wasm.<futures_util::future::poll_fn::PollFn<F> as core::future::future::Future>::poll::hd830184b90587d42 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:6024207
    h16edd80ab2a30af9 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:426534
    h01209da20c082729 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:3236497
    h758c38d8e961a82b http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:3427820

Steps To Reproduce
Fortunately the affected code is an open source project 😄

Steps to reproduce the behavior:

• git clone https://github.com/oxidrive/oxidrive.git (requires Rust, dx, Node 20 and NPM)
• if you use Nix, nix develop installs all the required tools
• cd web/app
• npm install && npx tailwindcss -i ./input.css -o ./assets/styles.css
• dx serve --hot-reload --bin oxidrive

The affected page is this one, and it seem to run fine until the API call finishes loading and goes past line 45.

Expected behavior

The page should render correctly as it does when compiled with dx build --release

Screenshots

Environment:

• Dioxus version: 0.5.1
• Dioxus CLI version: 0.5.4
• Rust version: 1.78 stable
• OS info: NixOS 23.11
• App platform: web

Questionnaire

• 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

[ealmloff]

The Javascript interpreter is largely generated by sledgehammer so even the unminified version is not super easy to debug. I would recommend trying to minify the problem first and then if it is a diffing issue, walking through the mutations dioxus generates

The error you got could be caused by anything that modifies nodes on the page other than dioxus (like a chrome extension) or a diffing issue. If dioxus sends the wrong stream of edits to the javascript side, then it could try to access a node that doesn't exist.

Here are a few things to try to debug the issue:

• Serve the application with dx serve --release. This will disable hot reload mode. The CLI currently has a bug that causes it to enable hot reloading even when you set it to false
• It could be a diffing error. You could try to reproduce the issue by switching between the rsx blocks that happen when the resource finishes (rsx! { Loading {} } and rsx! { Pane {} }