React-tooltip: Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

[mmyoji]

This error happens with v4.2.12. https://github.com/wwayne/react-tooltip/issues/665

I thought this was because I didn't add id and data-for properly to some react-tooltip components and target elements, but that didn't solve the issue.

What should I do for it?

Thanks.

[mmyoji]

thank for the quick fix 😄

[roggervalf]

Thank you for the quick report

[janeksmielowski]

Hi,

Can you provide some further information, why did this happen?

I can see, that you @roggervalf reverted domRoots.push(parentNode || head) to domRoots.push(head || parentNode), but right now the tooltips will not work in shadow DOM again. Looking on the whole code, what is the reason to actually find parentNode, when it will never be used:

let parentNode = target.parentNode;
while (parentNode.parentNode && !parentNode.host) {
  parentNode = parentNode.parentNode;
}
const head = parentNode.querySelector('head');
domRoots.push(head || parentNode); // if we don't use shadow DOM, here parentNode will always equal to document

Maybe this should be replaced with something like this:

let parentNode = target.parentNode;
while (parentNode.parentNode && !parentNode.host) {
  parentNode = parentNode.parentNode;
}
const head = document.head;
const  isShownInShadowDOM = !!parentNode.host;
domRoots.push(isShownInShadowDOM ? parentNode : head);

Now, it is looking for the shadow root parent node, but when it doesn't find one (means parentNode will equal to document), it uses head by default.

Thanks

[mmyoji]

Sorry, I didn't give the details.

You can reproduce this with the following commands and code:

$ npx [email protected] myapp --use-npm
$ cd myapp
$ npm i [email protected]

Edit src/App.js like this:

import Tooltip from 'react-tooltip'

function App() {
  return (
    <div>
      <p data-tip="hello">hello</p>
      <Tooltip />
    </div>
  );
}

export default App;

then run npm start

React version is v17.0.1