You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
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 {} }
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 theuse_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 withcargo watch -s 'dx build'
and then access it via our backend endpoint (which serves the UI by serving thedist
folder directly as static files) everything works fine. If I usedx serve
(both with and without--hot-reload
) then I get the error.JS Console Error
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)nix develop
installs all the required toolscd 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:
Questionnaire
The text was updated successfully, but these errors were encountered: