Uncaught DOMException: Failed to execute 'removeChild' on 'Node

Questions
1

Hi everyone!

I’m using a framework7-react and sometimes I receive this following error

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

I’m using these versions

react : 16.13.0
framework7 : 5.7.10
framework7-react : 5.7.10

This error does not occur all the time. it occurs sometimes during the logout process, and when it occurs app crashes. My logout component is as follows.

export default () => {

  const logout = (event) => {
    event.preventDefault();
    Api.logout(() => {
      f7.views.main.router.navigate('/landing/', {
        reloadAll: true
      });
      console.log('logout successful');
    });
  };

  return ( <Page >
    <Block >
        <List >
        <ListItem title = "Change password"
                link = "/change-password/" / >
        </List> 
        <Button outline onClick = {logout} > Logout < /Button> 
    </Block> 
    </Page>
  )
}

Also, is it possible to use react-router with framework7?

Thanks.

2

I had a similar issue with my app. I think it happens if you have a panel or something similar open when you force the page to reload (like you are doing with your logout function). You could try closing the panel first, if you can get the reference to it.
I ended up adding in a setInterval to delay the refresh call until the DOM has updated.

componentDidUpdate (prevProps, prevState) {
if (prevProps.isAuthenticated && !this.props.isAuthenticated) {
      // Set a delay to allow for DOM updates before refreshing
      setTimeout(() => { this.$f7.views.main.router.refreshPage() }, 1000)
   }
}