leaflet-dioxus-example "failed websocket connection"

[skeeters1]

Just starting a new project and want to use leaflet in Dioxus. The basic and yew examples run fine. The dioxus example builds and serves but get a blank browser window and console error

WebSocket connection to 'ws://localhost:8080/_dioxus/hot_reload' failed:
(anonymous) @ leaflet-dioxus-example-20fb79f9e918b3d0.js:5

I'm new to dioxus, but have been playing with their "HotDog!" tutorial example which works, so dioxus itself seems to be installed and working.

I noted a couple of minor things e.g. the --hot-reload option is no longer necessary (or even valid: you need --hot-reload true) so I wonder if the example is simply a bit out of date in the fast-breaking world of wasm. Unfortunately I lack the knowledge to debug it.

Replicated issue on two machines, both Ubuntu 24.04.2 LTS, rustc 1.84.1

Would be very grateful for help - it seems I could get started in yew (or possibly Seed) but I would much prefer Dioxus. Thanks!

[mhrst]

I recently got the example to work with the latest version of dioxus. I did not import the whole example project, only the code from main.rs and the rest of the required configuration was done manually. Here's the steps I took:

• I'm not using a Dioxus.toml. This probably doesn't matter, but there may be something configured there that is unexpectedly causing issues. Instead, I'm including leaflet css and js in my main component like this:

document::Link {
  rel: "stylesheet",
  href: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css"
}
document::Script {
  src: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"
}

• Removed dioxus-logger from the main.rs in the example. It's built into dioxus as of 0.6.0

// use dioxus_logger::tracing::{info, Level};

• Added same dependencies to Cargo.toml but upgraded them to the latest version (excluding dioxus-logger):

leaflet = "0.4.1"
gloo-utils = "0.2.0"
web-sys = "0.3.77"

• Copied the #map rule from the example css into my css file (and changed the height for my own purposes):

#map {
    height: 400px;
    width: 100%;
}

Hope that helps! ((I'm on macOS, btw))