DioxusLabs / DioxusLabs/dioxus

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

Open
#5,411 12 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
Rust
Stars
39.1k
Forks
1.9k
Avg merge
4d 10h
Merged PRs (30d)
4

Description

**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][0]):

```rust
#[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:

```rust
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) -> 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:

```rust
#[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:
```js
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:
```js
window.initial_dioxus_hydration_data="//some data"
```

[0]: https://dioxuslabs.com/learn/0.7/essentials/basics/event_handlers#handling-user-input

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.