"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::::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::::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.+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.::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. 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.>::into_fn_mut::{{closure}}::h47c6d9f4e97df5eb http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:6088910 oxidrive-06c73cddedade17f.wasm.+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. 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. 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::::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. as core::future::future::Future>::poll::h7e3025f8b9a43ef1 http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:4513560 oxidrive-06c73cddedade17f.wasm. as core::future::future::Future>::poll::he8121bf7a57137ea http://localhost:8080/assets/dioxus/oxidrive_bg.wasm:5905202 oxidrive-06c73cddedade17f.wasm. 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:: 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. 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

• [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

[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 {} }