search

leptos-rs / leptos

Build fast web applications with Rust.
https://leptos.dev
MIT License
15.81k stars 621 forks source link

`0.7-beta` Nesting an island inside another island's body hydrates the inner island twice #2725

Closed boyswan closed 1 month ago

boyswan commented 1 month ago 
#[island]
fn Example() -> impl IntoView {
    view! {
      <div>
        <Portal>Hello/</Portal>
      </div>
    }
}

Results in a console warning 

It seems like you're trying to use Leptos in client-side rendering mode, but the `csr` feature is not enabled on the `leptos` crate. Add `features = ["csr"]` to your Cargo.toml for the crate to work properly.

Note that hydration and client-side rendering now use different functions from leptos::mount. You are using a client-side rendering mount function.

imports.wbg.__wbg_warn_63bbae1730aead09 @ test.js:568
$web_sys::features::gen_console::console::warn_1::h516bcd9bf83f0401 @ test.wasm:0x95033
$leptos_dom::logging::console_warn::he733009c3be5e9e8 @ test.wasm:0x50856
$leptos::mount::mount_to::h3ba7667ca001ce59 @ test.wasm:0x39d79
$leptos::portal::__Portal::{{closure}}::hcf5068375f457c5b @ test.wasm:0x1c0f4
$reactive_graph::effect::effect::Effect::new::{{closure}}::{{closure}}::{{closure}}::h404cd319344c3cbb @ test.wasm:0x87992
$<reactive_graph::graph::subscriber::AnySubscriber as reactive_graph::graph::subscriber::WithObserver>::with_observer::h20c93275d0514491 @ test.wasm:0x655ca
$reactive_graph::effect::effect::Effect::new::{{closure}}::{{closure}}::h2a62d916eaff98fa @ test.wasm:0x85716
$reactive_graph::owner::Owner::with::hbf47f9bd59640884 @ test.wasm:0x7288b
$reactive_graph::owner::Owner::with_cleanup::h8defb736dfd77e01 @ test.wasm:0x9c65e
$reactive_graph::effect::effect::Effect::new::{{closure}}::hf5b00ee061d21f4b @ test.wasm:0x18fb9
$<core::pin::Pin<P> as core::future::future::Future>::poll::h6f77257bc685215e @ test.wasm:0x7be45
$wasm_bindgen_futures::task::singlethread::Task::run::h42c11045ccf11b53 @ test.wasm:0x37b2a
$wasm_bindgen_futures::queue::QueueState::run_all::h8957647d536f531f @ test.wasm:0x2e588
$wasm_bindgen_futures::queue::Queue::new::{{closure}}::h91f0b3ecf89979fc @ test.wasm:0x84dd4
$<dyn core::ops::function::FnMut<(A,)>+Output = R as wasm_bindgen::closure::WasmClosure>::describe::invoke::heec75e688219c3a4 @ test.wasm:0x6b9d2
__wbg_adapter_24 @ test.js:224
real @ test.js:209
gbj commented 1 month ago

Thanks, false positive fixed in f96ce57 (unless I'm misinterpreting, Portal works correctly but logs a warning)

boyswan commented 1 month ago

Great! I've just retested, and have noticed that whilst the warning is gone, it's actually rendering duplicate portal child elements.

#[island]
fn Inner() -> impl IntoView {
    view! {
      <Portal>
        <span>Hello</span>
      </Portal>
    }
}

#[island]
fn Example() -> impl IntoView {
    view! { <Inner/> }
}
<body>
   <div>
      <leptos-island data-component="Example">
         <leptos-island data-component="Inner">
            <!---->
         </leptos-island>
      </leptos-island>
      <span>child a</span>
   </div>
    ...script removed
   <div><span>Hello</span></div>
   <div><span>Hello</span></div>
</body>