leptos-rs / leptos

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

External meta <Script/>: could not convert current node into marker node #3033

Open zakstucke opened 4 hours ago

zakstucke commented 4 hours ago

Describe the bug Scripts seem to be able to break leptos hydration, when used inside a <Scripts /> tag, errors with the marker node. This repro uses a google analytics script, this just happened to be how I could repro it.

Leptos Dependencies Current main.

To Reproduce

#[component]
pub fn App() -> impl IntoView {
    provide_meta_context();

    view! {
        <Script src="https://www.googletagmanager.com/gtag/js?id=abcdefg" />
        <main>
            <Router>
                <Routes fallback={|| {
                    view! { <p>Foo</p> }
                }}>
                    <Route path={path!("/")} view={|| view! { <p>Bar</p> }} />
                </Routes>
            </Router>
        </main>
    }
}

I've verified this happens in a fresh project, checked in counter_isomorphic, where I had to add leptos_meta then replace the Counters component with this App and add <MetaTags /> to the shell in main.rs.

counter_isomorphic.js:457 panicked at /Users/zak/z/code/leptos/tachys/src/hydration.rs:99:14:
could not convert current node into marker node

Stack:

Error
    at imports.wbg.__wbg_new_abda76e883ba8a5f (http://localhost:3000/pkg/counter_isomorphic.js:463:13)
    at counter_isomorphic.wasm.console_error_panic_hook::Error::new::h924fea8cb3ceff58 (http://localhost:3000/pkg/counter_isomorphic.wasm:wasm-function[4674]:0x172963)
    at counter_isomorphic.wasm.console_error_panic_hook::hook_impl::h58ee9f32342db93f (http://localhost:3000/pkg/counter_isomorphic.wasm:wasm-function[1060]:0xcd612)
    at counter_isomorphic.wasm.console_error_panic_hook::hook::hdee489a937dc919b (http://localhost:3000/pkg/counter_isomorphic.wasm:wasm-function[6427]:0x18f57c)
    at counter_isomorphic.wasm.core::ops::function::Fn::call::h7b0d5a3b342a14ce (http://localhost:3000/pkg/counter_isomorphic.wasm:wasm-function[5593]:0x1838fd)
    at counter_isomorphic.wasm.std::panicking::rust_panic_with_hook::h33fe77d38d305ca3 (http://localhost:3000/pkg/counter_isomorphic.wasm:wasm-function[2294]:0x122c6d)
    at counter_isomorphic.wasm.std::panicking::begin_panic_handler::{{closure}}::h98de848d678bad07 (http://localhost:3000/pkg/counter_isomorphic.wasm:wasm-function[3109]:0x14702b)
    at counter_isomorphic.wasm.std::sys::backtrace::__rust_end_short_backtrace::h2bcfc60c3cf0a312 (http://localhost:3000/pkg/counter_isomorphic.wasm:wasm-function[7587]:0x19ad2f)
    at counter_isomorphic.wasm.rust_begin_unwind (http://localhost:3000/pkg/counter_isomorphic.wasm:wasm-function[4956]:0x178524)
    at counter_isomorphic.wasm.core::panicking::panic_fmt::hde8b7aa66e2831e1 (http://localhost:3000/pkg/counter_isomorphic.wasm:wasm-function[5185]:0x17c9ef)
zakstucke commented 2 hours ago

I have no idea if it's related or separate, but I'm having another similar issue after setting up a blocking resource. I'll add the basics in case it's useful, but don't have a good repro, hopefully fixed by the main repro of this issue above!

I have a simple anchor tag inside a site navbar (this is in an Either::Right(view!{...}) of a reactive block of whether a user is logged in or not, the user being logged in is a blocking resource):

view! {
    <a href="/login">"Login"</a>
}

The direct error is:

ERROR: 
      /Users/zak/z/code/leptos/tachys/src/html/element/mod.rs:353:14
      Panic: called `Option::unwrap()` on a `None` value

Looking at the source, I added a print above this line for cursor.current() to see what it was failing on, it prints "Login", whereas everything else prints an html element, so I think this is why it errors on element extraction here, and how I pinpointed this anchor.

Interestingly, if I change the view to:

view! {
    <div>
        <a href="/login">"Login"</a>
    </div>
}

The error then changes to:

ERROR: 
      /Users/zak/z/code/leptos/tachys/src/hydration.rs:99:14
      Panic: could not convert current node into marker node

If remove the view entirely, so in this case it becomes Either::Right(()) the error goes back to original, but the debug print now prints out "<!----->", so there's clearly some mismatch in the dom.

ERROR: 
      /Users/zak/z/code/leptos/tachys/src/html/element/mod.rs:353:14
      Panic: called `Option::unwrap()` on a `None` value

If this doesn't get solved once this direct repro is and this issue is shut, I'll open a separate issue afterwards, just adding in case it helps.