Issue with React 16.3

[khawerrind]

trafficstars

Hi, thank you for the great plugin. I am getting the following error sometime

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

react: 16.6.3 react-dom: 16.6.3 react-portal-tooltip: 2.4.1

[JZBo]

Hello,

I can confirm the issue, I'm having the same kind of error, which seems to occur after redux store updates change the way a component should render.

With react and react-dom: 16.6.3 and react-portal-tooltip: 2.4.1 the issue exists. Reverting to react-portal-tooltip: 2.3.0 apparently solves the issue for the time being.

Kind regards.

[kblcuk]

Error stack points to the line added in this commit

[mean2me]

Hello,

do you think that introducing an existence check before to any attempt to remove that element would be enough?

[sebastianescribano]

Hello, I am having the same problem and I made a rollback to previous version to fix it

[romainberger]

Hi, I've pushed and published a new version (v2.4.2) that should fix all issues with react 16.6.3. Please let me know if you have more issues. Thanks

[JZBo]

I had the occasion to try it, but unfortunately the issue is not completely fixed, at least not in all the use cases, although it is improved.

Using react-portal-tooltip v2.4.3 causes tooltips not to be rendered when using a css-in-js library like fela. Tooltips are NOT rendered, and it's like they are missing their context.

The error reported is: Uncaught Error: createComponent() can't render styles without the renderer in the context. Missing react-fela's <Provider /> at the app root? at FelaComponent (createComponentFactory.js:43) ...

Everything is still working perfectly with react-portal-tooltip 2.3.0.

Obviously, said styling library is not part of this package, but I thought it useful to report it. This looks very similar to the original error which occurred when redux-connected component were updated. As in that case, it looks like the original components are 'vanishing' from their provider context, and thus the styling service breaks down.

[romainberger]

I don't know fela and I've only tested the tooltip with no other modules than react itself, I'll try to see if I can find something. When fixing the issue I updated the module to support the lifecycle changes in the new react versions, it might be the source of the issue.

[valadas]

@mean2me, it worked fine for our use case, thanks @romainberger

[JZBo]

Using react-portal-tooltip v2.4.3 causes tooltips not to be rendered when using a css-in-js library like fela. Tooltips are NOT rendered, and it's like they are missing their context.

Obviously, said styling library is not part of this package, but I thought it useful to report it. This looks very similar to the original error which occurred when redux-connected component were updated. As in that case, it looks like the original components are 'vanishing' from their provider context, and thus the styling service breaks down.

I don't know fela and I've only tested the tooltip with no other modules than react itself, I'll try to see if I can find something. When fixing the issue I updated the module to support the lifecycle changes in the new react versions, it might be the source of the issue.

A small update that I think should allow you to close safely this issue: I've found out how to make react-portal-tooltip work correctly with fela (and vice versa), and I'll leave it written here for anybody having same or similar issues in the future (I guess that many other css-in-js libraries will go the same route).

Fela leverages the new React Context API to give to share the context of its FelaRenderer to all its descendant nodes. Now, what happens with RPT? RPT creates another <div class="ToolTipPortal"> completely outside the original root of the react application. This means that any Tooltip Content elements created by RPT are not descendants of the original FelaRenderer, and thus they are not provided with the context that would allow their styling to work.

However, it is possible to do so manually, either by defining the tooltip content in the tooltip parent itself, or, much better and much more idiomatically, by using fela's <RendererProvider> component to wrap the tooltip component, for instance like this:

<RendererProvider renderer={mainFelaRenderer}>
  <FelaComponent
    style={{
      backgroundColor: 'blue',
      color: 'red'
    }}
    as="div"
  >
    {tooltip}
  </FelaComponent>
</RendererProvider>

That's it for this issue, can be closed again as far as I can say.