React-tooltip: Error on `injectStyles`: "Failed to execute 'appendChild' on 'Node': Only one element on document allowed."

[andreiho]

Possibly related: https://github.com/wwayne/react-tooltip/issues/669

DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.
    at ReactTooltip.injectStyles (webpack-internal:///cpGi:1195:17)
    at ReactTooltip.injectStyles (webpack-internal:///wssv:717:25)
    at ReactTooltip.componentDidMount (webpack-internal:///cpGi:1149:12)
    at ReactTooltip.componentDidMount (webpack-internal:///wssv:707:123)
    at commitLifeCycles (webpack-internal:///fxOa:20659:24)
    at commitLayoutEffects (webpack-internal:///fxOa:23422:7)
    at HTMLUnknownElement.callCallback (webpack-internal:///fxOa:3946:14)
    at Object.invokeGuardedCallbackDev (webpack-internal:///fxOa:3995:16)
    at invokeGuardedCallback (webpack-internal:///fxOa:4057:31)
    at commitRootImpl (webpack-internal:///fxOa:23147:9) "
    at AppContainer (eval at ES6ProxyComponentFactory (webpack-internal:///wssv), <anonymous>:14:7)
    at HotExportedRoot (eval at ES6ProxyComponentFactory (webpack-internal:///wssv), <anonymous>:14:7)"

[ayusshar]

Getting similar kind of error

console.error node_modules/jest-environment-jsdom-sixteen/node_modules/jsdom/lib/jsdom/virtual-console.js:29
Error: Uncaught [HierarchyRequestError: Invalid insertion of STYLE node in #document node.]
at reportException (/home/ubuntuadmin/agent/_work/94/s/node_modules/jest-environment-jsdom-sixteen/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)
at innerInvokeEventListeners (/home/ubuntuadmin/agent/_work/94/s/node_modules/jest-environment-jsdom-sixteen/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:333:9)
at invokeEventListeners (/home/ubuntuadmin/agent/_work/94/s/node_modules/jest-environment-jsdom-sixteen/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at HTMLUnknownElementImpl._dispatch (/home/ubuntuadmin/agent/_work/94/s/node_modules/jest-environment-jsdom-sixteen/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at HTMLUnknownElementImpl.dispatchEvent (/home/ubuntuadmin/agent/_work/94/s/node_modules/jest-environment-jsdom-sixteen/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (/home/ubuntuadmin/agent/_work/94/s/node_modules/jest-environment-jsdom-sixteen/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
at Object.invokeGuardedCallbackDev (/home/ubuntuadmin/agent/_work/94/s/node_modules/react-dom/cjs/react-dom.development.js:237:16)
at invokeGuardedCallback (/home/ubuntuadmin/agent/_work/94/s/node_modules/react-dom/cjs/react-dom.development.js:292:31)
at commitRootImpl (/home/ubuntuadmin/agent/_work/94/s/node_modules/react-dom/cjs/react-dom.development.js:22541:9)
at unstable_runWithPriority (/home/ubuntuadmin/agent/_work/94/s/node_modules/scheduler/cjs/scheduler.development.js:653:12) DOMException {}
console.error node_modules/react-dom/cjs/react-dom.development.js:19527
The above error occurred in the component:

[sumthief]

Sad to hear new version still break things :confused:

@andreiho It would be great if you can provide more details about your use case.

@ayusshar please could you give more details about failing test?

Maybe you can provide minimal reproducible repository?

[jryd]

@sumthief I am getting the same error as @ayusshar and can provide a reproducible example:

Example.js

import React from 'react';
import ReactTooltip from 'react-tooltip';

const Example = () => {
  return <div>
    <p className="text-xs font-semibold uppercase tracking-wide text-gray-500 mb-2">Example</p>
    <div className="flex flex-wrap -m-8">
        <div className="p-8" data-testid="example" data-tip="This is a test <br/> and it doesn't work">
          <p className="text-xs text-gray-700">Example paragraph</p>
        </div>
    </div>
    <ReactTooltip multiline={true}/>
  </div>
};

export default Example;

Example.test.js

import React from 'react';
import { render } from '@testing-library/react';
import Example from './Example';
import ReactTooltip from 'react-tooltip';

describe('Example', () => {
  it('can render', () => {
    render(<Example />);
  });

  it('can render standalone', () => {
    render(<ReactTooltip multiline={true} />);
  });
});

Or as one test file all together:

import React from 'react';
import { render } from '@testing-library/react';
import ReactTooltip from 'react-tooltip';

const Example = () => {
  return <div>
    <p className="text-xs font-semibold uppercase tracking-wide text-gray-500 mb-2">Example</p>
    <div className="flex flex-wrap -m-8">
      <div className="p-8" data-testid="example" data-tip="This is a test <br/> and it doesn't work">
        <p className="text-xs text-gray-700">Example paragraph</p>
      </div>
    </div>
    <ReactTooltip multiline={true}/>
  </div>
};

describe('Example', () => {
  it('can render', () => {
    render(<Example />);
  });

  it('can render standalone', () => {
    render(<ReactTooltip multiline={true} />);
  });
});

[mumarm45]

Getting the same error while running the test.

[mlarcher]

Everything is working fine in Chrome, but we have the same Invalid insertion of STYLE node in #document node all around when running the tests. Probably the recent upgrades are using a new way of inserting style in the document, that is no good for jsdom (which is used for the tests by react-testing-library).

I assume injectStyles introduced in 4.2.11 needs to reuse the previously existing style block if it exists.

[rardoz]

Also getting the same issue when upgrading to 4.2.14

[nerfologist]

I'm still getting the error in 4.2.15 (testing with @testing-library/react):

Error: Uncaught [HierarchyRequestError: Invalid insertion of STYLE node in #document node.]

[...]

    The above error occurred in the <ReactTooltip> component:
        at ReactTooltip (/myproject/node_modules/react-tooltip/src/index.js:85:22)
        at div
        at styled.div (/myproject/node_modules/styled-components/src/models/Keyframes.js:20:51)
        at Tooltip (/myproject/src/components/Tooltip/Tooltip.js:22:20)

[Razielwar]

Is there any workaround as i'm stuck to test my components currently with the same error using react-tooltip 4.2.15 and testing-library/react 10.0.1

Error: Uncaught [HierarchyRequestError: Invalid insertion of STYLE node in #document node.]
        at reportException (/Users/xbillard/scm/discovr/discovr-front/node_modules/jest-environment-jsdom-sixteen/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)
        at innerInvokeEventListeners (/Users/xbillard/scm/discovr/discovr-front/node_modules/jest-environment-jsdom-sixteen/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:333:9)
        at invokeEventListeners (/Users/xbillard/scm/discovr/discovr-front/node_modules/jest-environment-jsdom-sixteen/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
        at HTMLUnknownElementImpl._dispatch (/Users/xbillard/scm/discovr/discovr-front/node_modules/jest-environment-jsdom-sixteen/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
        at HTMLUnknownElementImpl.dispatchEvent (/Users/xbillard/scm/discovr/discovr-front/node_modules/jest-environment-jsdom-sixteen/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
        at HTMLUnknownElement.dispatchEvent (/Users/xbillard/scm/discovr/discovr-front/node_modules/jest-environment-jsdom-sixteen/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
        at Object.invokeGuardedCallbackDev (/Users/xbillard/scm/discovr/discovr-front/node_modules/react-dom/cjs/react-dom.development.js:237:16)
        at invokeGuardedCallback (/Users/xbillard/scm/discovr/discovr-front/node_modules/react-dom/cjs/react-dom.development.js:292:31)
        at commitRootImpl (/Users/xbillard/scm/discovr/discovr-front/node_modules/react-dom/cjs/react-dom.development.js:22541:9)
        at unstable_runWithPriority (/Users/xbillard/scm/discovr/discovr-front/node_modules/scheduler/cjs/scheduler.development.js:653:12) DOMException {}

[talyh]

@Razielwar - If you don't need anything specific from the newer versions, you can constrain the version in your package.json to be the latest known to not have this issue.

    "react-tooltip": "4.2.13", // no special characters in front of the version, to ensure an exact match