Page not being hydrated or JavaScript isn't being added to the page

[Thermatix]

Problem

So I don't know enough to state exactly what the problem is but, either the page isn't being hydrated or the JavaScript isn't being added to the page because none of the event handlers are being executed.

Steps to reproduce the behaviour:

I have the following component (pretty much copied whole-sale from here):

#[component]
pub fn TestComponent() -> Element {
    let mut count = use_signal(|| 0);

    rsx! {
        h1 { "High-Five counter: {count}" }
        button { onclick: move |_| count += 1, "Up high!" }
        button { onclick: move |_| count -= 1, "Down low!" }
    }
}

and I add it like so:

use dioxus::prelude::*;
use crate::components::{TestComponent, LoginForm};

// it Did have `LoginForm` but I removed it to get minimum example
#[component]
pub fn Login(next: Option<String>) -> Element {
    rsx! {
        TestComponent {}
    }
}

Expected behavior

Clicking the buttons should change the value of count.

Environment:

• Dioxus version: 0.7.3
• Rust version: rustc 1.90.0
• OS info: 6.6.87.2-microsoft-standard-WSL2 - Red Hat Enterprise Linux release 8.10 (Ootpa)
• App platform: web (full-stack)

✔ 🤷 Which sub-template should be expanded? · Jumpstart
✔ 🤷 Do you want to use Dioxus Fullstack? · true
✔ 🤷 Do you want to use Dioxus Router? · true
✔ 🤷 Do you want to use Tailwind CSS? · true
✔ 🤷 Do you want to include prompts for LLMs? · false
✔ 🤷 Which platform do you want DX to serve by default? · Web

Whilst I am using the enum Router, I'm not using dioxus::launch(App) for the server side as I'm adding session and auth stuff:

#[cfg(feature = "server")]
fn main() -> anyhow::Result<()> {
    let config = server::cli::Config::init_get()?;
    if server::cli::Args::get().debug {
         println!("{:#?}", config);
    }

    serve(|| async move {
        use dioxus::server::axum;
        use server::state;
        use server::middlewares;

        let redis = state::redis_pool(&config.redis.url)?;
        let session = state::session_store(redis.clone()).await?;
        let db = state::pg_pool(&config.database.url).await?;
        let auth = state::auth_layer(db.clone(), None);

        let router = dioxus::server::router(App)
            .layer(axum::middleware::from_fn(middlewares::authentication_layer))
            .layer(auth)
            .layer(session)
            .layer(axum::Extension(redis))
            .layer(axum::Extension(db))
            ;
        Ok(router)
    });
    Ok(())
}

misc:

• There are no errors in the JS console
• It generates a default index.html page as one isn't in the public folder
• The only scripts on the page are:
  • at the top:

    window.hydrate_queue=[];window.dx_hydrate=(id,data,debug_types,debug_locations)=>{let decoded=atob(data),bytes=Uint8Array.from(decoded,(c)=>c.charCodeAt(0));if(window.hydration_callback)window.hydration_callback(id,bytes,debug_types,debug_locations);else window.hydrate_queue.push([id,bytes,debug_types,debug_locations])};

  • at the bottom:

    window.initial_dioxus_hydration_data="//some data"

[nerjs]

Could you share a more detailed example (including the use section, Dioxus.toml, and Cargo.toml)? I’d also like to see how you run the client-side part (#cfg(feature = "web"))?
I ran the example from the description and don’t see any issues. Everything works.

[Thermatix]

I’d also like to see how you run the client-side part (#cfg(feature = "web"))?

I knew I forgot to put something in there!

So this is how I run the client-side part:

#[cfg(not(feature = "server"))]
fn main() -> anyhow::Result<()> {
    dioxus::launch(App);
    Ok(())
}

the use section of my main.rs file:

use dioxus::prelude::*;

// #[cfg(feature = "server")]
mod server {
    pub mod cli;
    pub mod db;
    pub mod middlewares;
    pub mod state;
    pub mod services;

    pub mod users;
}
mod components;
mod views;

// mod route;
pub mod layouts {
    pub mod auth;
    pub mod navbar;
}

//pub use route::Route;

use views::{Blog, Home, Login, Navbar, FatalError};
use crate::layouts::auth::Auth;

Dioxus.toml:

[application]

[web.app]

# HTML title tag content
title = "central-heating"

# include `assets` in web platform
[web.resource]

# Additional CSS style files
style = []

# Additional JavaScript files
script = []

[web.resource.dev]

# Javascript code file
# serve: [dev-server] only
script = []

Cargo.toml:

[package]
name = "central-heating"
version = "0.1.0"
authors = ["Martin Becker <martin.2.becker@bt.com>"]
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
# Database
## Diesel
diesel = { version = "2.3.*", optional = true,  default-features = false, features = ["postgres", "serde_json", "chrono", "uuid", "ipnet-address", "numeric", "r2d2"] }
#diesel-citext = { version = "0.3.*", optional = true }
diesel-derive-enum = { version = "2.1.*", optional = true, features = ["postgres"] }
diesel-async = {  optional = true, version = "0.7.*", features = ["postgres", "bb8", "async-connection-wrapper", "diesel_migrations"] }
#diesel_codegen = { version = "0.16.0", optional = true,features = ["postgres"] }
# diesel_filter = { versionb = "2.0.0",  features = ["serialize", "actix"] } # add filters and pagination to your diesel models - https://lib.rs/crates/diesel_filter, might not work with dioxus
bb8 = "0.9.1"


## Redis
redis_pool = { version = "0.10.*", optional = true }
redis = { version = "1.0.*", optional = true, features = ["tokio-comp"] }

# Dioxus
dioxus = { version = "0.7.*", features = ["router", "fullstack", "html"] }
dioxus-html = { version = "0.7.3", features = ["serialize"] }
# dx-utils = { version = "0.2", features = ["server"]} # https://lib.rs/crates/dx-utils
# dioxus-translate = { version = "0.1.0" } # i18n support - https://lib.rs/crates/dioxus-translate
dioxus-primitives = { git = "https://github.com/DioxusLabs/components", version = "0.0.1", default-features = false }

## Axum
axum = { version = "0.8.*", features = ["macros"], optional = true }
axum_session = { version = "0.19.*", optional = true }
axum_session_auth = { version = "0.19.*", optional = true }
axum_session_redispool = { version = "0.10.*", optional = true }

## types
ipnet = { version = "2.12.*", features = ["serde", "schemars1"] }
uuid = { version = "1.22.*", optional = true, features = ["v4", "js"] }
chrono = "0.4.*"
url = "2.5.*"

# serde
serde_json = "1.0.*"
serde = { version = "1.0.*", features = ["derive"] }


# utils

tower-service = { version = "0.3", optional = true }
config = { version = "0.15.*", optional = true, features = ["default", "yaml-rust2"] }
clap = { version = "4.6.*", optional = true, features = ["derive"] }
educe = "0.6.*"
anyhow = "1.0.*"

async-trait = "0.1.89"
# strum = "0.28.0"
web-sys = { version = "0.3.91", features = ["console"] }


#backie = "0.1" # Background task processing - https://lib.rs/crates/backie

# Bin dpendencies
# diesel_cli
# diesel_cli_ext
# dioxus-cli

[features]
default = ["server"]
# The feature that are only required for the web = ["dioxus/web"] build target should be optional and only enabled in the web = ["dioxus/web"] feature
web = [
    "dioxus/web",
    "uuid/js",
]
# The feature that are only required for the desktop = ["dioxus/desktop"] build target should be optional and only enabled in the desktop = ["dioxus/desktop"] feature
desktop = ["dioxus/desktop"]
# The feature that are only required for the mobile = ["dioxus/mobile"] build target should be optional and only enabled in the mobile = ["dioxus/mobile"] feature
mobile = ["dioxus/mobile"]
# The feature that are only required for the server = ["dioxus/server"] build target should be optional and only enabled in the server = ["dioxus/server"] feature
server = [
    "axum",
    "axum_session",
    "axum_session_auth",
    "axum_session_redispool",
    "clap",
    "config",
    "dioxus/server",
    "diesel",
#    "diesel-citext",
    "diesel-derive-enum",
    "diesel-async",
#    "diesel_codegen",
    "uuid",
    "redis_pool",
    "redis",
    "tower-service",
]

[nerjs]

It seems this is a common issue. dioxus::serve(...) doesn't bind to a port. At least, I keep encountering this error.

[BillionClaw]

Looking into this — the missing window.initial_dioxus_hydration_data and absent event handler scripts suggest the SSR/hydration wiring for fullstack dioxus::serve might not be emitting the client-side bootstrap. Happy to submit a fix.

[Thermatix]

It seems this is a common issue. dioxus::serve(...) doesn't bind to a port. At least, I keep encountering this error.

AH! I wonder if it's related, I've been seeing this in my terminal:

12:47:14 [server] thread 'main' panicked at /home/mbecker4/.cargo/registry/src/index.crates.io-1949cf8c6b5b557f/dioxus-server-0.7.3/src/launch.rs:143:10:
12:47:14 [server] called `Result::unwrap()` on an `Err` value: Failed to bind to address 127.0.0.1:40271
12:47:14 [dev] Application [server] exited with error: exit status: 101 
12:47:14 [server] Caused by:
12:47:14 [server]     Address already in use (os error 98)
12:47:14 [server] note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace

but I thought it was unrelated, I thought the bug here was that dx serve was trying to execute to version of the same program, thus causing the error since the website still loaded up in the browser.

[nerjs]

In my case, initial_dioxus_hydration_data is present. And I don't really understand how this PR solves the problem...

[Thermatix]

In my case, initial_dioxus_hydration_data is present. And I don't really understand how this PR solves the problem...

Ah, I think I see the problem, I didn't realise people might not interpret what I'd written as how I would interpret it; I've modified the OP to make it clearer, initial_dioxus_hydration_data on mine is also present.

That said, I did manually apply the change to see if it would work and I'm still getting the same issue, nothing is interactable, nothing does anything, nothing works as expected.

I think you and I have the same issue and the other person interpreted what I wrote in the same way that you did, that initial_dioxus_hydration_data is empty or something like that, which is just down to how I wrote it.

[nerjs]

@Thermatix My comment wasn't directed at you))

As far as I can tell, the problem isn't with initial_dioxus_hydration_data but rather that serve can't start the server properly. I also see that it's trying to do this twice using the same port.
Try using serve_router instead of serve and explicitly pass the address to it.
Unfortunately, I can't look into this further right now. If the problem isn't resolved, I'll take a look later.

[Thermatix]

The only serve_router I can find is in dioxus-server-0.7.3/src/launch.r and whilst that's a public function, it's not publicly re-exported and mod launch is not public, or it is but I get :

82 |     dioxus_server::launch::serve_router(|| async move {
   |                    ^^^^^^  ------------ function `serve_router` is not publicly re-exported

EDIT:

So after faffing about for an hour on what should have been a simple change, I changed the serve function (in launch.rs) to accept a Option<SocketAddr> of the correct type.

Still getting the same error(Even though I'm now the one providing the socket address):

15:53:25 [server] thread 'main' (475051) panicked at /home/mbecker4/.cargo/registry/src/index.crates.io-1949cf8c6b5b557f/dioxus-server-0.7.3/src/launch.rs:149:10:
15:53:25 [server] called `Result::unwrap()` on an `Err` value: Failed to bind to address 127.0.0.1:1234
15:53:25 [server] Caused by:
15:53:25 [dev] Application [server] exited with error: exit status: 101 
15:53:25 [server]     Address already in use (os error 98)
15:53:25 [server] note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace

[Thermatix]

I've completely gutted my app, removed everything I added in, put back the original router, changed the server main to be dioxus::launch(App);, removed everything from the Cargo,toml; it's still giving this error.

I've also deleted the target dir, no dice.

To sanity check, I created a new full-stack app, and that actually works fine.

I'm tempted to just start over.

[nerjs]

@Thermatix
That's really strange. But try making it a default feature on the web.
Or leave it blank but remove all features except for web and server

like:

[features]
default = ["web"]

web = ["..."]
desktop = ["..."]
mobile = ["..."]
server = ["..."]

or:

[features]
default =[]
web = ["..."]
server = ["..."]

[Thermatix]

Ok, I finally think I know what was causing it, If you start dx serve and the default is set to "server", it causes this error, even changing back won't fix the error until you completely restart dx serve via ctrl-c.

I had no idea it would cause this kind of error, I had completely forgotten about that change which is why I didn't think to mention/look into it.