Skip to content

Uncaught Error: Unknown signal id: xxxxxx #309

Description

@TianLangStudio

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions