Error: Vue in React throw an error when vue component disappear

[diaotai]

react: 16.9.0; vue: 2.6.10; The error will be reproduced in the following code:

import Hello from './hello.vue';

function App() {
  const [visible, setVisible] = useState(false);
  return (
    <div className="App">
      <h1 onClick={(e)=>{
        setVisible(!visible);
      }}>
         hello world
       </h1>
      {
        visible? <VueWrapper component={Hello}></VueWrapper>: null
      }
      
    </div>
  );
}

Error Message: react-dom.development.js:10557 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. at removeChild (http://localhost:3001/static/js/0.chunk.js:84073:22) at unmountHostComponents (http://localhost:3001/static/js/0.chunk.js:95337:13) at commitDeletion (http://localhost:3001/static/js/0.chunk.js:95405:9) at commitMutationEffects (http://localhost:3001/static/js/0.chunk.js:97633:15) at HTMLUnknownElement.callCallback (http://localhost:3001/static/js/0.chunk.js:

[ricms93]

Hi @diaotai I'm facing the same issue with Vue components. Did you manage to solve this somehow?

[ElMassimo]

I had the same problem when using react-router, and using a VueInReact-wrapped component as the child of the <Route> element.

When navigating away to a different page, it would trigger the error you mention above.

I was able to workaround it by wrapping the component with another element, for example, a <div>.

[MayRain1999]

https://github.com/timsayshey/vuera-react-vue-demo-app a demo webpack.config.js

[chenqinyang1994]

add a parent component to the <VueWrapper>, whose key is a timestamp this way is worked try it

<div key={+new Date()}>
    <VueWrapper component={Hello}></VueWrapper>
</div>