Hot reload causes browser to refresh page multiple times per change

[elliotwaite]

Problem

Sometimes when using hot reloading, making a single change will cause the browser to refresh the page multiple times.

Steps To Reproduce

Steps to reproduce the behavior:

• Create the minimal "Hello, world!" app.
• Run: dioxus serve --hot-reload
• Change an element.

Expected behavior

For it to only refresh the page once per change.

Screenshots

The terminal shows this warning right before it refreshes the page. I'm not sure if it's related:

[WARN] failed to parse `name` custom section Invalid name type (at offset 31788206)

My Cargo.toml:

[package]
name = "dioxus-test"
version = "0.1.0"
edition = "2021"

[dependencies]
dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev = "b476c6e8a73bd6591ec4827c6f9b196d7c270c3d" }
dioxus-web = { git = "https://github.com/DioxusLabs/dioxus", rev = "b476c6e8a73bd6591ec4827c6f9b196d7c270c3d" }

Environment:

• Dioxus version: 0.3.2 (the latest commit: { git = "https://github.com/DioxusLabs/dioxus", rev = "b476c6e8a73bd6591ec4827c6f9b196d7c270c3d" })
• Rust version: 1.71.0-nightly (8b4b20836 2023-05-22)
• OS info: macOS Ventura 13.2.1 (22D68)
• App platform: web

Questionnaire

• I'm new to Dioxus so I don't think I know enough to try to fix this on my own yet.

[ealmloff]

What version of the Dioxus CLI are you using?
Testing this with the git version of the dioxus-cli (installed with cargo install --git https://github.com/DioxusLabs/cli). I don't see the browser reloading at all, so this issue may already be fixed. The CLI should be able to hot reload changes to the static rsx without a recompile (and browser refresh).

[elliotwaite]

Hi, sorry, I currently don't have time to investigate this issue further. Feel free to close this issue if you believe it has been resolved.

@linulas, I saw you liked the original post. If that means that you were also running into this issue and it hasn't been resolved for you yet, feel free to take over trying to debug this issue with @Demonthos.

[ealmloff]

I'm going to close this issue for now because I think it has been fixed. I have ran into this issue with an older version of the CLI, but I haven't encountered it recently.

If anyone else has the same issue with the git version of the CLI, let me know and I would be happy to reopen this issue (although it might be better to move the discussion to the dioxuslabs/cli repo)

[emi0x7d1]

I can reproduce this on Linux using Dioxus from the latest commit as of writing this comment.

Grepping for the error, it seems to come from here: https://github.com/rustwasm/walrus/blob/440dc03392ab6a43e8933118da64e623b574c1f2/src/module/mod.rs#L253

I think the other error comes from here: bytecodealliance/wasm-tools@cad6975#diff-154ee93e092342f2f38473cbc114e5d864ebf78c4a302e5988805f4f659e45f3 which was written in 2021 and is long gone.

Most likely a wasm_bindgen issue

[fprasx]

I can also reproduce this as of commit 1ab5a03 (version 0.4.1). Here is what hot reloading output looks like for me after writing to a file (that has already been completely rendered; no changes):

Screencast.from.2023-08-13.15-22-14.webm

cargo version: cargo 1.71.0 (cfd3bbd8f 2023-06-08)
rustc version: rustc 1.71.0 (8ede3aae2 2023-07-12)
Browser version: Mozilla Firefox 115.0.2
Operating system: Ubuntu 23.04 x86_64

[Seeker14491]

I get the same behavior as @fparsx running the git version CLI. @ealmloff can you reopen the issue?

[ealmloff]

I get the same behavior as @fparsx running the git version CLI. @ealmloff can you reopen the issue?

Can you provide the CLI version and platform you use that caused this issue?

I cannot reproduce the original issue on CLI 0.4.1 and MacOs.

[Seeker14491]

Can you provide the CLI version and platform you use that caused this issue?

Yesterday I installed the CLI using cargo install --git https://github.com/DioxusLabs/dioxus dioxus-cli. I'm on Arch running in Windows 10 WSL2.

Here's a snippet that reproduces the issue for me if you change the n * 5 to n * 10, for example:

#![allow(non_snake_case)]

use dioxus::prelude::*;

fn main() {
    dioxus_web::launch(App);
}

fn App(cx: Scope) -> Element {
    let n = 10;

    render! {
        div {
            font_size: "50px",
            "Hello {n * 5}"
        }
    }
}

Relatedly, certain sequences of edits to the string "Hello {n * 5}" also lead to the displayed text in the browser diverging from the correct text. For example, this sequence of edits:

"Hello {n * 5}"
"Hello"
"Bye"
"Bye {n * 5}"

After making that last edit and saving the file, my browser refreshes several times, alternating between displaying Bye and Bye 50, before settling on Bye, which is wrong.

[ealmloff]

That is very helpful information! Something is effecting non-rsx-hot-reloadable reloads in rsx-hot-reload mode. I can reproduce this on mac as well if I edit a part of the rsx that is not hot-reloadable