DioxusLabs / DioxusLabs/dioxus
dx panic - SVG replacement (index out of bounds: the len is 4 but the index is 4)
- Dominant language
- Rust
- Stars
- 39.1k
- Forks
- 1.9k
- Avg merge
- 4d 10h
- Merged PRs (30d)
- 4
Description
**Problem**
I am comparing two similar SVGs, one from an isolated component and another directly in the div:
```Rust
div { class: "relative mb-10 w-full flex items-center justify-between rounded-md",
// svg::SVG_MagnifyingGlass { class: "absolute left-2 block h-5 w-5 text-gray-400",
// stroke_width: "2",
// }
svg {
"viewBox": "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
height: "24",
fill: "none",
stroke: "currentColor",
"stroke-width": "2",
width: "24",
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: "absolute left-2 block h-5 w-5 text-gray-400",
circle { r: "8", cx: "11", cy: "11" }
line {
y1: "21",
x1: "21",
x2: "16.65",
y2: "16.65",
}
}
input {
r#type: "name",
name: "search",
placeholder: "Search by name, type, manufacturer, etc",
class: "h-12 w-full cursor-text rounded-md border border-gray-100 bg-gray-100 py-4 pr-40 pl-12 shadow-sm outline-none focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50",
}
}
```
To compare them I uncomment my component (`svg::SVG_MagnifyingGlass`) and comment out the svg description directly in the div.
```Rust
div { class: "relative mb-10 w-full flex items-center justify-between rounded-md",
svg::SVG_MagnifyingGlass { class: "absolute left-2 block h-5 w-5 text-gray-400",
stroke_width: "2",
}
// svg {
// "viewBox": "0 0 24 24",
// xmlns: "http://www.w3.org/2000/svg",
// height: "24",
// fill: "none",
// stroke: "currentColor",
// "stroke-width": "2",
// width: "24",
// "stroke-linecap": "round",
// "stroke-linejoin": "round",
// class: "absolute left-2 block h-5 w-5 text-gray-400",
// circle { r: "8", cx: "11", cy: "11" }
// line {
// y1: "21",
// x1: "21",
// x2: "16.65",
// y2: "16.65",
// }
// }
input {
r#type: "name",
name: "search",
placeholder: "Search by name, type, manufacturer, etc",
class: "h-12 w-full cursor-text rounded-md border border-gray-100 bg-gray-100 py-4 pr-40 pl-12 shadow-sm outline-none focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50",
}
}
```
When I switch back, i.e. uncomment the direct description and comment out my external component, I will get the following error message from `dx serve`:
```log
03:15:44 [web] %cERROR%c C:\Users\user\.cargo\registry\src\index.crates.io-6f17d22bba15001f\dioxus-core-0.6.2\src\hotreload_utils.rs:192%c Expected a string component property, because the type was &str. The CLI gave the hot
reloading engine a type of None. This is probably caused by a bug in dioxus hot reloading. Please report this issue.
```
Some other parts of the component go missing during this process, for example the placeholder value of an input field below this div.
When I now do a full rebuild (press `R` in the CLI), I will get a panic, although `dx` doesn't crash and shows a successful build status:
```log
03:23:30 [dev] Full rebuild: triggered manually
03:23:43 [dev] Build completed in 6506ms
03:23:44 [web] panicked at C:\Users\user\.cargo\registry\src\index.crates.io-6f17d22bba15001f\dioxus-core-0.6.2\index out of bounds: the len is 4 but the index is 4
Stack:
__wbg_get_imports/imports.wbg.__wbg_new_8a6f238a6ece86ea/<@http://localhost:8080/assets/frontend-7060185d6fedd8b1logError@http://localhost:8080/assets/frontend-7060185d6fedd8b1.js:1:21125
__wbg_get_imports/imports.wbg.__wbg_new_8a6f238a6ece86ea@http://localhost:8080/assets/frontend-7060185d6fedd8b1.jfrontend-01660ec708ffa231.wasm.__wbg_new_8a6f238a6ece86ea externref shim@http://localhost:8080/assets/frontend_bgfrontend-01660ec708ffa231.wasm.console_error_panic_hook::hook::h3c5305affb43277f@http://localhost:8080/assets/frofrontend-01660ec708ffa231.wasm.core::ops::function::Fn::call::hb7c20ccc9cb519fe@http://localhost:8080/assets/fronfrontend-01660ec708ffa231.wasm.std::panicking::rust_panic_with_hook::he163a328f096b027@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[1862]:0x118d17
frontend-01660ec708ffa231.wasm.std::panicking::begin_panic_handler::{{closure}}::h9b4576c502f796bb@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[2028]:0x120261
frontend-01660ec708ffa231.wasm.std::sys::backtrace::__rust_end_short_backtrace::h9dcf082627c76851@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[4365]:0x13e7c2
frontend-01660ec708ffa231.wasm.rust_begin_unwind@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[3045]:0x137414
frontend-01660ec708ffa231.wasm.core::panicking::panic_fmt::hf09e831ea9f1651a@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[3046]:0x137440
frontend-01660ec708ffa231.wasm.core::panicking::panic_bounds_check::h2e4659a8b6704344@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[2291]:0x128fc0
frontend-01660ec708ffa231.wasm.dioxus_core::hotreload_utils::DynamicValuePool::render_dynamic_node::hccba0c2ec54e2d4b@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[1574]:0x107643
frontend-01660ec708ffa231.wasm. as alloc::vec::spec_from_iter_nested::SpecFromIterNested>::from_iter::h7b475c1b33401a98@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[1259]:0xed773
frontend-01660ec708ffa231.wasm.dioxus_core::hotreload_utils::DynamicValuePool::render_with::h50c45ba2151a68d0@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[746]:0xac976
frontend-01660ec708ffa231.wasm.frontend::components::search::base::SearchWithFilters::hf1131ea1c9f7121d@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[272]:0x1ea91
frontend-01660ec708ffa231.wasm. as dioxus_core::any_props::AnyProps>::render::h40b45c687329a03f@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[871]:0xbfc54
frontend-01660ec708ffa231.wasm.dioxus_core::reactive_context::ReactiveContext::run_in::hba292341e07c6e42@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[398]:0x5f08f
frontend-01660ec708ffa231.wasm.dioxus_core::runtime::Runtime::with_scope_on_stack::h18aef51ebfa45e15@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[379]:0x5859b
frontend-01660ec708ffa231.wasm.dioxus_core::scope_arena::::run_scope::h0b9569949632e4b5@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[568]:0x8baa0
frontend-01660ec708ffa231.wasm.dioxus_core::diff::component::::run_and_diff_scope::h1a744e18a90bc452@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[1787]:0x114d05
frontend-01660ec708ffa231.wasm.dioxus_core::virtual_dom::VirtualDom::render_immediate::h1141d31021ca3f2f@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[578]:0x8dcb0
frontend-01660ec708ffa231.wasm.dioxus_web::launch::launch_virtual_dom::{{closure}}::h7ef05079247a6515@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[371]:0x55911
frontend-01660ec708ffa231.wasm.wasm_bindgen_futures::task::singlethread::Task::run::h995e612d9789ff19@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[1673]:0x10e0de
frontend-01660ec708ffa231.wasm.wasm_bindgen_futures::queue::QueueState::run_all::h060438f0803bc049@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[1195]:0xe741b
frontend-01660ec708ffa231.wasm.wasm_bindgen_futures::queue::Queue::new::{{closure}}::h324bdfd0350ecddc@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[2147]:0x124870
frontend-01660ec708ffa231.wasm.+Output = R as wasm_bindgen::closure::WasmClosure>::describe::invoke::h29e0844e782dcc89@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[3229]:0x13908d
frontend-01660ec708ffa231.wasm.closure1038 externref shim@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[3510]:0x13ad62
__wbg_adapter_65@http://localhost:8080/assets/frontend-7060185d6fedd8b1.js:5:822
real@http://localhost:8080/assets/frontend-7060185d6fedd8b1.js:4:2070
03:23:44 [web] panicked at C:\Users\user\.cargo\registry\src\index.crates.io-6f17d22bba15001f\wasm-bindgen-futuralready borrowed: BorrowMutErrorrs:103:37:
Stack:
__wbg_get_imports/imports.wbg.__wbg_new_8a6f238a6ece86ea/<@http://localhost:8080/assets/frontend-7060185d6fedd8b1logError@http://localhost:8080/assets/frontend-7060185d6fedd8b1.js:1:21125
__wbg_get_imports/imports.wbg.__wbg_new_8a6f238a6ece86ea@http://localhost:8080/assets/frontend-7060185d6fedd8b1.jfrontend-01660ec708ffa231.wasm.__wbg_new_8a6f238a6ece86ea externref shim@http://localhost:8080/assets/frontend_bgfrontend-01660ec708ffa231.wasm.console_error_panic_hook::hook::h3c5305affb43277f@http://localhost:8080/assets/frofrontend-01660ec708ffa231.wasm.core::ops::function::Fn::call::hb7c20ccc9cb519fe@http://localhost:8080/assets/fronfrontend-01660ec708ffa231.wasm.std::panicking::rust_panic_with_hook::he163a328f096b027@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[1862]:0x118d17
frontend-01660ec708ffa231.wasm.std::panicking::begin_panic_handler::{{closure}}::h9b4576c502f796bb@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[2028]:0x120261
frontend-01660ec708ffa231.wasm.std::sys::backtrace::__rust_end_short_backtrace::h9dcf082627c76851@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[4365]:0x13e7c2
frontend-01660ec708ffa231.wasm.rust_begin_unwind@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[3045]:0x137414
frontend-01660ec708ffa231.wasm.core::panicking::panic_fmt::hf09e831ea9f1651a@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[3046]:0x137440
frontend-01660ec708ffa231.wasm.core::cell::panic_already_borrowed::h8bef6b733e27415a@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[2571]:0x12fe0a
frontend-01660ec708ffa231.wasm.wasm_bindgen_futures::task::singlethread::Task::run::h995e612d9789ff19@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[1673]:0x10e16e
frontend-01660ec708ffa231.wasm.wasm_bindgen_futures::queue::QueueState::run_all::h060438f0803bc049@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[1195]:0xe741b
frontend-01660ec708ffa231.wasm.wasm_bindgen_futures::queue::Queue::new::{{closure}}::h324bdfd0350ecddc@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[2147]:0x124870
frontend-01660ec708ffa231.wasm.+Output = R as wasm_bindgen::closure::WasmClosure>::describe::invoke::h29e0844e782dcc89@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[3229]:0x13908d
frontend-01660ec708ffa231.wasm.closure1038 externref shim@http://localhost:8080/assets/frontend_bg-a576cbc8d4f41df4.wasm:wasm-function[3510]:0x13ad62
__wbg_adapter_65@http://localhost:8080/assets/frontend-7060185d6fedd8b1.js:5:822
real@http://localhost:8080/assets/frontend-7060185d6fedd8b1.js:4:2070
03:24:18 [dev] Hotreloading: \src\components\search\base.rs
03:24:18 [dev] Hotreloading: \src\components\search\base.rs
╭────────────────────────────────────────────────────────────────────────────────────────── /:more ╮
│ App: ━━━━━━━━━━━━━━━━━━━━━━━━━━ 🎉 5.0s Platform: Web │
│ Bundle: ━━━━━━━━━━━━━━━━━━━━━━━━━━ 🎉 6.3s App features: ["web", "auth-oauth"] │
│ Status: Serving frontend 🚀 11.2s Serving at: http://127.0.0.1:8080 │
│ │
│ dx version: 0.6.2-main r: rebuild the app │
│ rustc: rustc 1.84.0 (9fc6b4312 2025-01-07) o: open the app │
│ Hotreload: rsx and assets p: pause rebuilds │
│ Network: http://10.2.0.2:8080 v: toggle verbose logs │
│ t: toggle tracing logs │
│ Read the docs: https://dioxuslabs.com/0.6/docs c: clear the screen │
│ Video tutorials: https://youtube.com/@DioxusLabs /: toggle more commands │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯
```
Note that it successfully builds the first time it's started which also contains the direct svg description. Only after toggling, the error occurs. The error never occurs when using my component, only the direct svg description.
**Steps To Reproduce**
Steps to reproduce the behavior:
- Use [this](https://wheregmis.github.io/dioxus_html_rsx/) tool to quickly get tailwindcss components translated
- Create a separate SVG Element:
```Rust
use dioxus::prelude::*;
#[component]
pub fn SVG_MagnifyingGlass(class: Option, stroke_width: Option) -> Element {
rsx! {
svg {
"stroke-width": stroke_width.or(Some("1.5".to_string())),
"viewBox": "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
stroke: "currentColor",
class,
path {
d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z",
"stroke-linecap": "round",
"stroke-linejoin": "round",
}
}
}
}
```
- Translate [this](https://componentland.com/component/search-with-filters-2) component from ComponentLand and switch back and forth between the svg's as shown in the issue decription.
- This MAY be related to the signals that are passed to the input elements which I haven't included here. If the issue cannot be reproduced or explained without them, I'll post some more code but I didn't want to blow this out of proportion.
**Expected behavior**
dx should successfully hot-reload
**Screenshots**
**Environment:**
- Dioxus version: 0.6.2
- Rust version: rustc 1.84.0 (9fc6b4312 2025-01-07)
- OS info: Windows 10 Pro 22H2
- App platform: Web
**Questionnaire**
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.