DioxusLabs / DioxusLabs/dioxus
"cannot reclaim ElementId()" error on use_loader
- Dominant language
- Rust
- Stars
- 39.1k
- Forks
- 1.9k
- Avg merge
- 4d 10h
- Merged PRs (30d)
- 4
Description
**Problem**
I was testing use_loader hook in fullstack example app and get "cannot reclaim ElementId" error when i put use_loader hook into Echo and Hero components.
**Steps To Reproduce**
```bash
dx new fullstack_test
✔ 🤷 Which sub-template should be expanded? · Bare-Bones
✔ 🤷 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
```
In main.rs:
```rust
use dioxus::prelude::*;
#[derive(Debug, Clone, Routable, PartialEq)]
#[rustfmt::skip]
enum Route {
#[layout(Navbar)]
#[route("/")]
Home {},
#[route("/blog/:id")]
Blog { id: i32 },
}
const FAVICON: Asset = asset!("/assets/favicon.ico");
const MAIN_CSS: Asset = asset!("/assets/main.css");
const HEADER_SVG: Asset = asset!("/assets/header.svg");
const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");
fn main() {
dioxus::launch(App);
}
#[component]
fn App() -> Element {
rsx! {
document::Link { rel: "icon", href: FAVICON }
document::Link { rel: "stylesheet", href: MAIN_CSS } document::Link { rel: "stylesheet", href: TAILWIND_CSS }
Router:: {}
}
}
#[component]
pub fn Hero() -> Element {
let _t = use_loader(|| test_server(0))?();
rsx! {
div {
id: "hero",
img { src: HEADER_SVG, id: "header" }
div { id: "links",
a { href: "https://dioxuslabs.com/learn/0.7/", "📚 Learn Dioxus" }
a { href: "https://dioxuslabs.com/awesome", "🚀 Awesome Dioxus" }
a { href: "https://github.com/dioxus-community/", "📡 Community Libraries" }
a { href: "https://github.com/DioxusLabs/sdk", "⚙️ Dioxus Development Kit" }
a { href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus", "💫 VSCode Extension" }
a { href: "https://discord.gg/XgGxMSkvUM", "👋 Community Discord" }
}
}
}
}
/// Home page
#[component]
fn Home() -> Element {
rsx! {
Hero {}
Echo {}
}
}
/// Blog page
#[component]
pub fn Blog(id: i32) -> Element {
rsx! {
div {
id: "blog",
// Content
h1 { "This is blog #{id}!" }
p { "In blog #{id}, we show how the Dioxus router works and how URL parameters can be passed as props to our route components." }
// Navigation links
Link {
to: Route::Blog { id: id - 1 },
"Previous"
}
span { " <---> " }
Link {
to: Route::Blog { id: id + 1 },
"Next"
}
}
}
}
/// Shared navbar component.
#[component]
fn Navbar() -> Element {
rsx! {
div {
id: "navbar",
Link {
to: Route::Home {},
"Home"
}
Link {
to: Route::Blog { id: 1 },
"Blog"
}
}
Outlet:: {}
}
}
/// Echo component that demonstrates fullstack server functions.
#[component]
fn Echo() -> Element {
let _t = use_loader(|| test_server(0))?();
let mut response = use_signal(|| String::new());
rsx! {
div {
id: "echo",
h4 { "ServerFn Echo" }
input {
placeholder: "Type here to echo...",
oninput: move |event| async move {
let data = echo_server(event.value()).await.unwrap();
response.set(data);
},
}
if !response().is_empty() {
p {
"Server echoed: "
i { "{response}" }
}
}
}
}
}
/// Echo the user input on the server.
#[post("/api/echo")]
async fn echo_server(input: String) -> Result {
Ok(input)
}
#[post("/api/test_server")]
async fn test_server(id: i64) -> Result {
Ok(id > 0)
}
```
```bash
dx serve
```
on webpage:
- click on "Blog" tab
- click on "Home" tab -> error appears
Error:
```bash
[web] %cERROR%c /home/user/.cargo/registry/src/index.crates.io1949cf8c6b5b557f/dioxus-core-0.7.1/src/arena.rs:65%c cannot reclaim ElementId(18)
```
**Expected behavior**
No error
**Screenshots**
**Environment:**
- Dioxus version: dioxus 0.7.1 (03ab7fa)
- Rust version: rustc 1.91.1 (ed61e7d7e 2025-11-07)
- OS info: fedora 6.17.8-200.fc42.x86_64
- App platform: fullstack, server, web
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.