VComp is not mounted

[sanpii]

Problem
Since the last update, I have this error:

panicked at 'VComp is not mounted', /home/sanpi/.cargo/registry/src/github.com-1ecc6299db9ec823/yew-0.18.0/src/virtual_dom/vnode.rs:62:57

Stack:

init/imports.wbg.__wbg_new_59cb74e423758ede/<@http://localhost:9090/oxfeed_front.js:353:19
logError@http://localhost:9090/oxfeed_front.js:218:18
init/imports.wbg.__wbg_new_59cb74e423758ede@http://localhost:9090/oxfeed_front.js:352:66
console_error_panic_hook::Error::new::h4627145e0b4027bb@http://localhost:9090/oxfeed_front_bg.wasm:wasm-function[25357]:0x718bff
console_error_panic_hook::hook_impl::ha0119511ed4b23fa@http://localhost:9090/oxfeed_front_bg.wasm:wasm-function[2874]:0x3fe718
console_error_panic_hook::hook::h989e643b09a0ef22@http://localhost:9090/oxfeed_front_bg.wasm:wasm-function[28367]:0x74200b
core::ops::function::Fn::call::hd2d10b8ea7f7556a@http://localhost:9090/oxfeed_front_bg.wasm:wasm-function[23453]:0x6fb008
std::panicking::rust_panic_with_hook::hbdbceb5cd158bf19@http://localhost:9090/oxfeed_front_bg.wasm:wasm-function[7345]…
oxfeed_front.js:347:21

Steps To Reproduce
I am working on a big application, it’s difficult to extract a minimal example who reproduces the problem.

The error occurs when this component switches between render the empty and list component¹ : list.rs#L37.

¹ empty -> list -> empty or list -> empty -> list, it works when I switch to a page who display the same component (empty or list).

Expected behavior
No error.

Environment:

• Yew version: v0.18
• Rust version: 1.53.0
• Target, if relevant: wasm32-unknown-unknown
• Build tool, if relevant: wasm-pack
• OS, if relevant: Linux
• Browser and version, if relevant: firefox 89

Questionnaire

• I'm interested in fixing this myself but don't know where to start
• I would like to fix and I have a solution
• I don't have time to fix this right now, but maybe later

---

IssueHunt Summary

Backers (Total: $100.00)

• intendednull ($100.00)

Become a backer now!

Or submit a pull request to get the deposits!

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

[dancespiele]

I have the same issue, which last version didn't happen. Here is the visual example:

The code is possible to find here: https://github.com/dancespiele/yew_styles/blob/466d9e77fd39b050a00b33ed52d8d8fbd438e3de/crate/yew_styles/src/components/navbar/navbar_component.rs#L285

[dancespiele]

I was able to work around in the end. I think this version doesn't allow to instance the children more than one. In my case I put a conditional to avoid this issue. I don't know if it is by purpose but in that case the error should be something like "Not allow instance Children more than one time"

[sanpii]

I was able to work around in the end. I think this version doesn't allow to instance the children more than one. In my case I put a conditional to avoid this issue. I don't if it is by purpose but in that case the error should be something like "Not allow instance Children more than one time"

I don’t sure to understand your comment.

I tryed to change my code from:

fn view(&self) -> yew::Html {
        if self.value.iterator.is_empty() {
            return yew::html! {
                <super::Empty />
            };
        }

        yew::html! {
            <ul>…</ul>
        }
}

to:

fn view(&self) -> yew::Html {
    yew::html! {
        if self.value.iterator.is_empty() {
            yew::html! { <super::Empty /> }
        } else {
            yew::html! { <ul>…</ul> }
        }
    }
}

But the problem persists.

[dancespiele]

I never I used <super::Empty /> before, in my case just I add html! without anything inside if I don't want to show anything:

fn view(&self) -> yew::Html {
    yew::html! {
        if self.value.iterator.is_empty() {
            yew::html! {}
        } else {
            yew::html! { <ul>…</ul> }
        }
    }
}

[intendednull]

Running into this error as well, however it seems unrelated to any comp list. Large app so hard to pinpoint the source, but it always happens when switching from one specific page to another. If that specific page is completely empty there is no panic. If anything at all is rendered on the page before switching, even as simple as an empty div, it panics.

[issuehunt-oss]

@intendednull has funded $100.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[WorldSEnder]

A reduced example exhibiting this issue can be found under https://github.com/WorldSEnder/yew-bug-1946 . I worked backwards from yew_styles code, so I think it's save to say that it's at least the same issue as that one, and it might be the same issue as @intendednull is facing.

The gist seems to be along the lines of: two nested components receive the same event. A component renders a list of component children multiple times. Didn't get to debugging yet, but it might help somebody else to figure out the patch.

[sanpii]

The bug is introduced in cd2b827 and it’s disapear if I remove this line:

yew/packages/yew/src/html/component/lifecycle.rs

Line 189 in 83e565a

state.node_ref.set(None);

But I don’t understand what I really do 🤷

[intendednull]

Strange update on this.

For context, this determines my view

            let props = props.clone();
            match state.page {
                Page::Charges => html! {
                    <charge::Charges ..props />
                },
                Page::Customer(page) => customer::view(page, &props),
            }

The error occurs when switching from the Page::Charges to Page::Customer(CustomerPage::List). Here's what the customer view looks like:

pub fn view(page: CustomerPage, props: &Props) -> Html {
    let props = props.clone();
    match page {
        CustomerPage::List => {
            html! {
                <div>
                    <ListCustomers ..props />
                </div>
            }
        }
        CustomerPage::Create => {
            html! {
                <create::Create ..props />
            }
        }
        CustomerPage::Details(_) => {
            html! {
                <details::Details ..props />
            }
        }
    }
}

To my astonishment, if I change CustomerPage::List it to just:

html! {
    <ListCustomers ..props />
}

THE ERROR COMPLETELY DISAPPEARS!!!

The cause of this is beyond me. Maybe something to do with having a parent that doesn't exist in the other view?

[mc1098]

This does line up with the stack trace in #2065 where the issue is presenting in the VNode::first_node within a call to diff a VTag 🤔. This example might help me actually build an app that repos this behaviour 🙃 - the one @WorldSEnder provided works on v0.18 but when I updated it to master I couldn't get it to panic anymore 😞.

[intendednull]

@mc1098 much appreciated! I'll be trying too whenever I find time. A repro may need to use Yewdux, to trigger the early scheduler call (mentioned in #2065).

For more context, my navbar is simply buttons with:

        let onclick = props.dispatch.reduce_callback(move |s| s.page = *page);

And app root looks like this:

    html! {
        <div class="container mx-auto">
            <Nav ..props />
            { view }
        </div>
    }

[mc1098]

@intendednull I wonder whether you would mind trying out a change on this branch of my fork of yew. I'm still trying to repo the issue in an app so I'm not saying it will work but would be interested to see if it fixes the issue or maybe moves the panic point :)

[intendednull]

@mc1098 that fixed it!