DioxusLabs / DioxusLabs/dioxus
Page not being hydrated or JavaScript isn't being added to the page
- 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.