Cannot solve possible hydration error

[madsmh]

I am working on a login component in a fullstack app, that when an already logged in user loads, it will redirect to the main page.

However, I get a perplexing error in my browser console:

wasm-bindgen: imported JS function that was not marked as `catch` threw an error: can't access property "toString", id is undefined

Stack:
hydrate_node@http://127.0.0.1:8080/wasm/snippets/dioxus-interpreter-js-e827be9a3ca83173/inline0.js:2:5173
hydrate@http://127.0.0.1:8080/wasm/snippets/dioxus-interpreter-js-e827be9a3ca83173/inline0.js:2:5653
__wbg_get_imports/__wbg_hydrate_2b676cbba68a3419/<@http://127.0.0.1:8080/wasm/madliste.js:816:18
logError@http://127.0.0.1:8080/wasm/madliste.js:2417:18
__wbg_hydrate_2b676cbba68a3419@http://127.0.0.1:8080/wasm/madliste.js:811:61
@http://127.0.0.1:8080/wasm/madliste_bg.wasm:wasm-function[32763]:0x50bd9f
@http://127.0.0.1:8080/wasm/madliste_bg.wasm:wasm-function[3930]:0x2a0c20
@http://127.0.0.1:8080/wasm/madliste_bg.wasm:wasm-function[2404]:0x21fb75
@http://127.0.0.1:8080/wasm/madliste_bg.wasm:wasm-function[2148]:0x203623
@http://127.0.0.1:8080/wasm/madliste_bg.wasm:wasm-function[408]:0x57c83
@http://127.0.0.1:8080/wasm/madliste_bg.wasm:wasm-function[3869]:0x29c847
@http://127.0.0.1:8080/wasm/madliste_bg.wasm:wasm-function[9268]:0x39c54b
@http://127.0.0.1:8080/wasm/madliste_bg.wasm:wasm-function[3220]:0x26b612
@http://127.0.0.1:8080/wasm/madliste_bg.wasm:wasm-function[2801]:0x2468fb
@http://127.0.0.1:8080/wasm/madliste_bg.wasm:wasm-function[15681]:0x443177
@http://127.0.0.1:8080/wasm/madliste_bg.wasm:wasm-function[13828]:0x41c1b4
@http://127.0.0.1:8080/wasm/madliste_bg.wasm:wasm-function[16095]:0x44af28
@http://127.0.0.1:8080/wasm/madliste_bg.wasm:wasm-function[15360]:0x43ccb9
@http://127.0.0.1:8080/wasm/madliste_bg.wasm:wasm-function[3882]:0x29d6c3
@http://127.0.0.1:8080/wasm/madliste_bg.wasm:wasm-function[32475]:0x50a7dd
@http://127.0.0.1:8080/wasm/madliste_bg.wasm:wasm-function[26951]:0x4dd9d4
_ZN12wasm_bindgen7convert8closures1_6invoke17h28d62bcdc31fe0e4E@http://127.0.0.1:8080/wasm/madliste.js:2214:22
real@http://127.0.0.1:8080/wasm/madliste.js:2467:20
patch_console.js:1:735
    error http://127.0.0.1:8080/wasm/snippets/dioxus-interpreter-js-e827be9a3ca83173/src/js/patch_console.js:1
    logError http://127.0.0.1:8080/wasm/madliste.js:2426
    __wbg_hydrate_2b676cbba68a3419 http://127.0.0.1:8080/wasm/madliste.js:811
    <anonymous> http://127.0.0.1:8080/wasm/madliste_bg.wasm:5291423
    <anonymous> http://127.0.0.1:8080/wasm/madliste_bg.wasm:2755616
    <anonymous> http://127.0.0.1:8080/wasm/madliste_bg.wasm:2227061
    <anonymous> http://127.0.0.1:8080/wasm/madliste_bg.wasm:2111011
    <anonymous> http://127.0.0.1:8080/wasm/madliste_bg.wasm:359555
    <anonymous> http://127.0.0.1:8080/wasm/madliste_bg.wasm:2738247
    <anonymous> http://127.0.0.1:8080/wasm/madliste_bg.wasm:3786059
    <anonymous> http://127.0.0.1:8080/wasm/madliste_bg.wasm:2536978
    <anonymous> http://127.0.0.1:8080/wasm/madliste_bg.wasm:2386171
    <anonymous> http://127.0.0.1:8080/wasm/madliste_bg.wasm:4469111
    <anonymous> http://127.0.0.1:8080/wasm/madliste_bg.wasm:4309428
    <anonymous> http://127.0.0.1:8080/wasm/madliste_bg.wasm:4501288
    <anonymous> http://127.0.0.1:8080/wasm/madliste_bg.wasm:4443321
    <anonymous> http://127.0.0.1:8080/wasm/madliste_bg.wasm:2741955
    <anonymous> http://127.0.0.1:8080/wasm/madliste_bg.wasm:5285853
    <anonymous> http://127.0.0.1:8080/wasm/madliste_bg.wasm:5102036
    _ZN12wasm_bindgen7convert8closures1_6invoke17h28d62bcdc31fe0e4E http://127.0.0.1:8080/wasm/madliste.js:2214
    real http://127.0.0.1:8080/wasm/madliste.js:2467

My component is

use crate::components::button::Button;
use crate::components::input::Input;
use crate::components::label::Label;
use crate::get_login_status;
use crate::login;
use crate::Route;
use dioxus::prelude::*;

#[component]
pub fn Login() -> Element {
    let mut username = use_signal(|| String::new());
    let mut password = use_signal(|| String::new());
    // let mut response = use_signal(|| String::new());

    let status = use_server_future(|| get_login_status())?.unwrap().unwrap();

    use_effect(move || {
        if status {
            navigator().replace(Route::Home {});
        }
    });

    rsx! {
        div { id: "title",
            h1 { "Log ind" }
        }
        div { width: "300px", gap: ".5rem",
            Label { html_for: "username", "Brugernavn" }
            Input {
                id: "username",
                oninput: move |event: FormEvent| async move {
                    username.set(event.value());
                },
            }
            Label { html_for: "password", "Kode" }
            Input {
                oninput: move |event: FormEvent| {
                    password.set(event.value());
                },
                id: "password",
                r#type: "password",
            }

            // {response}
        }
        Button {
            onclick: move |_| async move {
                match login(username(), password()).await {
                    Ok(_) => {
                        // response.set("Login successful".to_string());
                        navigator().replace(Route::Home {});
                    }

                    Err(_) => println!("login error"),
                }
            },
            "Log ind"
        }
    }
}

where the server function is given by

#[post("/api/user/status", auth: aux::Session)]
pub async fn get_login_status() -> Result<bool, ServerFnError> {
    let status = auth.is_authenticated();

    Ok(status)
}

any help would be greatly appreciated!

[ealmloff]

I don't see anything wrong with that component on its own. You could try #5357 to see exactly where the mismatch is between the server and client

[madsmh]

I go it to work by replacing

dioxus-web = { version = "0.7.10", features = ["hydrate"] }

in Cargo.toml, with

dioxus-web = { version = "0.7.10" }