search

sycamore-rs / sycamore

A library for creating reactive web apps in Rust and WebAssembly
https://sycamore-rs.netlify.app
MIT License
2.79k stars 148 forks source link

Hydrate example has a javascript error and does not work #656

Closed GabrielExists closed 8 months ago

GabrielExists commented 8 months ago

Describe the bug The Hydrate example compiles and runs, but the buttons don't work and there is a javascript error in the Chrome F12 menu:

<p data-hk="0.0">Hydration</p><br data-hk="0.1"/><div data-hk="1.1"><p>Hello <!--#--><span data-hk="1.0">World</span><!--/-->!</p><input/></div><br data-hk="0.2"/><div data-hk="2.0"><p>Value: <!--#-->0<!--/--></p><button>+</button><button>-</button><button>Reset</button></div><div data-hk="3.0"><p>This paragraph is not hydrated!</p></div><div data-hk="4.0"><!----></div> [hydrate-af1f42cd761bc1c7.js:376:13](http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7.js)
panicked at packages\sycamore-web\src\dom_node_template.rs:97:51:
hydration start marker not found

Stack:

__wbg_get_imports/imports.wbg.__wbg_new_abda76e883ba8a5f@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7.js:283:17
console_error_panic_hook::Error::new::h31a0fb92da0f1fef@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[2658]:0xd28e7
console_error_panic_hook::hook_impl::hdf79bf8833ab65f5@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[543]:0x76c1b
console_error_panic_hook::hook::haa6781e5dda2cd90@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[3315]:0xdc677
core::ops::function::Fn::call::hf737acc51c62339d@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[2843]:0xd5bf6
std::panicking::rust_panic_with_hook::hadffcacfce51447d@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[1133]:0xa24f1
std::panicking::begin_panic_handler::{{closure}}::hb5da6402f20c83c9@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[1502]:0xb3988
std::sys_common::backtrace::__rust_end_short_backtrace::h0d9583addf25ab7b@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[3923]:0xe1b83
rust_begin_unwind@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[2982]:0xd7e73
core::panicking::panic_fmt::hc57d7ab1a49493e6@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[3226]:0xdb465
core::option::expect_failed::hd58762fe7174b809@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[2334]:0xcc371
core::option::Option<T>::expect::hf9c0bd6787796213@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[1896]:0xc14ce
sycamore_web::dom_node_template::execute_walk::h5f4555945f3022e5@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[67]:0x11b6a
<sycamore_web::hydrate_node::HydrateNode as sycamore_core::generic_node::GenericNodeElements>::instantiate_template::h304fbfa53f605aab@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[177]:0x3e915
<sycamore_web::hydrate_node::HydrateNode as sycamore_core::generic_node::GenericNodeElements>::instantiate_template::h304fbfa53f605aab@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[177]:0x3e81f
sycamore_core::generic_node::__instantiate_template::hd7d934532fd5d073@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[3174]:0xda8b7
hydrate::Hello::h07808f7279f10e17@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[119]:0x2bccc
core::ops::function::Fn::call::h43c8ec71649a76fc@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[3230]:0xdb526
core::ops::function::impls::<impl core::ops::function::FnOnce<A> for &F>::call_once::h420e88bf64e52c42@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[3119]:0xd9d11
<F as sycamore_core::component::Component<(),G,()>>::create::h898660b24b3b9425@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[3132]:0xd9fcf
hydrate::App::{{closure}}::h0c4eb2284bfc6c64@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[2637]:0xd22c6
sycamore_reactive::root::untrack_in_scope::h3c9014e546849a8c@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[1138]:0xa2902
sycamore_reactive::root::untrack::h3794bc5f7c169c4d@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[2798]:0xd4fd0
sycamore_core::component::component_scope::{{closure}}::hcfd2ccee086e71fa@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[3159]:0xda57d
sycamore_core::hydrate::hydrate_component::{{closure}}::ha238abfea914e41f@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[219]:0x48bcf
std::thread::local::LocalKey<T>::try_with::h62180cc3aa3c9308@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[507]:0x73299
std::thread::local::LocalKey<T>::with::hc799b71eb8d1f695@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[738]:0x87f4e
sycamore_core::hydrate::hydrate_component::h3284434ca3429e5a@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[2643]:0xd248f
sycamore_core::component::component_scope::he18fbe55c7ff60c1@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[2106]:0xc6eb1
hydrate::App::h32636895e31ef493@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[77]:0x1a334
core::ops::function::FnOnce::call_once::hed7941a7ed12c170@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[3470]:0xde606
sycamore_core::hydrate::with_hydration_context::{{closure}}::h467d5dac80355fd9@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[304]:0x5880d
std::thread::local::LocalKey<T>::try_with::hd2bcfbac961ccc84@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[514]:0x73e10
std::thread::local::LocalKey<T>::with::h70abd510e4e8e91f@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[759]:0x899f3
sycamore_core::hydrate::with_hydration_context::hfed70b1c167829c9@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[3308]:0xdc501
sycamore_web::hydrate_node::hydrate_in_scope::h09fa42370f393da4@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[199]:0x440fc
sycamore_web::hydrate_node::hydrate_to::{{closure}}::h077c6ca382e63e4b@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[2984]:0xd7eda
sycamore_reactive::root::Root::create_child_scope::hcafb120d6414490d@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[1086]:0x9fb91
sycamore_reactive::root::create_root::ha0ad8cc89dbc5066@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[1673]:0xba302
sycamore_web::hydrate_node::hydrate_to::hf4e2dcd714c28208@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[2792]:0xd4e30
sycamore_web::hydrate_node::hydrate::h1a985bb785e83d70@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[732]:0x87858
hydrate::main::h995c75b31c9746ae@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[374]:0x62e8b
core::ops::function::FnOnce::call_once::hde093dbd8115413c@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[3246]:0xdb865
std::sys_common::backtrace::__rust_begin_short_backtrace::h98b338af90f6c8e4@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[3302]:0xdc3c5
std::rt::lang_start::{{closure}}::h5a7829010dc97768@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[1790]:0xbe1fe
std::rt::lang_start_internal::h3c846c4298ade485@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[849]:0x906c3
std::rt::lang_start::h643ae695c36dfd35@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[1745]:0xbca95
main@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[3766]:0xe0f77
@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm:wasm-function[3882]:0xe19ab
__wbg_finalize_init@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7.js:558:10
__wbg_init@http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7.js:594:12
async*@http://127.0.0.1:8080/:35:5

[hydrate-af1f42cd761bc1c7.js:280:13](http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7.js)
Uncaught (in promise) RuntimeError: unreachable executed
    __wbg_finalize_init http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7.js:558
    __wbg_init http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7.js:594
    async* http://127.0.0.1:8080/:35
[hydrate-af1f42cd761bc1c7_bg.wasm:924634:1](http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7_bg.wasm)
    __wbg_init http://127.0.0.1:8080/hydrate-af1f42cd761bc1c7.js:595
    AsyncFunctionNext self-hosted:852
    (Async: async)
    <anonymous> http://127.0.0.1:8080/:35

​

To Reproduce Steps to reproduce the behavior:

cd examples/hydrate
trunk serve
# open in browser

Expected behavior I expected there not to be any error in the javascript console, and for the buttons to work.

Environment

Additional context I manually bisected, and the error first appears in 1acd2c3c1770c4403ce7d9dce6622a283f08c015, "Run everything through prettier (#635) Luke* 08/10/2023 09:43" Reverting examples/hydrate/index.html makes the error stop appearing, so I'm guessing something about the reformatting changed something about the "hydration start marker", but I don't have enough context to know what to look for.

GabrielExists commented 8 months ago

(This also happens for me at sycamore-rs.netlify.app/examples/hydrate )

lukechu10 commented 8 months ago

Yes the reformatting did indeed change the HTML and broke hydration. To temporarily fix this, you can open the app in your browser and look at the log message right above the error. The correct SSR-ed HTML should be there and it is simply a matter of copy-pasting that into index.html for it to work.

If you want, you can also open a PR for this and I'll just have to be more careful when I run prettier next time.