We encountered an error in the console of the browser when putting a signal in <html> other than <body>
topcoat-f897074dd8132591.js:1 Uncaught Error: Unknown signal id: a916996e-b653-4919-96a5-c827deedce98
at F.handle (topcoat-f897074dd8132591.js:1:12922)
at _ (topcoat-f897074dd8132591.js:1:8097)
at P.hydrate (topcoat-f897074dd8132591.js:1:8313)
at eval (eval at Rt (topcoat-f897074dd8132591.js:1:16187), <anonymous>:3:43)
at eval (eval at Rt (topcoat-f897074dd8132591.js:1:16187), <anonymous>:3:141)
at topcoat-f897074dd8132591.js:1:16272
at wt.$c (topcoat-f897074dd8132591.js:1:11848)
at et (topcoat-f897074dd8132591.js:1:9701)
at lt (topcoat-f897074dd8132591.js:1:11105)
at k (topcoat-f897074dd8132591.js:1:11900)
How to reproduce
Cargo.toml
[package]
name = "hello-world"
version = "0.1.0"
edition = "2024"
[dependencies]
tokio = { version = "1.53.1", features = ["rt-multi-thread", "macros"] }
topcoat = "0.5.0"
src/main.rs
use topcoat::{
Result,
router::{Router, RouterBuilderDiscoverExt, page},
view::{view},
};
use topcoat::asset::{AssetBundle, RouterBuilderAssetExt};
#[tokio::main]
async fn main() {
topcoat::start(
Router::builder()
.assets(AssetBundle::load().unwrap())
.discover().build()
).await.unwrap();
}
#[page("/")]
async fn home() -> Result {
view! {
<!DOCTYPE html>
<html>
signal count = 0.0;
<head>
<title>"Hello world"</title>
topcoat::dev::script()
// Signals and shards need the browser runtime.
topcoat::runtime::script()
</head>
<body>
<p>
"Count: "
$(count.get())
</p>
<button @click=$(|_e| count.increment())>"+1"</button>
</body>
</html>
}
}
How to work around
Put signal count = 0.0; into body or make the counter a component.
#[component]
async fn counter() -> Result {
view!(
signal count = 0.0;
<p>
"Count: "
$(count.get())
</p>
<button @click=$(|_e| count.increment())>"+1"</button>
)
}
What we can do
Maybe we can show the error in the compile phase or make it work wherever in view!
We encountered an error in the console of the browser when putting a signal in
<html>other than<body>topcoat-f897074dd8132591.js:1 Uncaught Error: Unknown signal id: a916996e-b653-4919-96a5-c827deedce98 at F.handle (topcoat-f897074dd8132591.js:1:12922) at _ (topcoat-f897074dd8132591.js:1:8097) at P.hydrate (topcoat-f897074dd8132591.js:1:8313) at eval (eval at Rt (topcoat-f897074dd8132591.js:1:16187), <anonymous>:3:43) at eval (eval at Rt (topcoat-f897074dd8132591.js:1:16187), <anonymous>:3:141) at topcoat-f897074dd8132591.js:1:16272 at wt.$c (topcoat-f897074dd8132591.js:1:11848) at et (topcoat-f897074dd8132591.js:1:9701) at lt (topcoat-f897074dd8132591.js:1:11105) at k (topcoat-f897074dd8132591.js:1:11900)How to reproduce
Cargo.toml
src/main.rs
How to work around
Put
signal count = 0.0;intobodyor make the counter a component.What we can do
Maybe we can show the error in the compile phase or make it work wherever in
view!