DioxusLabs / DioxusLabs/dioxus

"cannot reclaim ElementId()" error on use_loader

Open
#5,025 3 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**

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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.