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>