Expected subtree parent to be a mounted class component

Hi, Getting this error when trying to mount my component:

The Component with the tooltip seems to be working fine on its own. when I tried to mount it as a child in this FeedCard it causes the crash.

Code:

FeedCard:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { ListItem, Person, StayIndicator } from '@guestyci/atomic-design/dist/v2/components';
import FeedCardInfo from './FeedCardInfo';

class FeedCard extends Component {
  render() {
    const { isSelected } = this.props;
    return (
      <ListItem
        dense
        className="bg-hover-white flex-column px-3 bb-1 border-gray"
        onClick={this.handleCardClick}
        isSelected={isSelected}
        selectedClassName="bg-white box-shadow-light"
      >
        <FeedCardInfo lastMessageTimestamp="2011-10-05T14:48:00.000Z" />
        <div className="flex-space-between-center">
          <Person name="Bob" className="mb-3" />
          <StayIndicator status="pre" />
        </div>
      </ListItem>
    );
  }
}
export default FeedCard;

StayIndicator:

import React from 'react';
import PropTypes from 'prop-types';
import { StayStatus } from '../../../constants/enums';
import Tooltip from '../tooltip/Tooltip';
import BaseStayIndicator from './BaseStayIndicator';

const tooltips = {
  [StayStatus.Reserved]: 'Reserved',
  [StayStatus.Planned]: 'Upcoming stay',
  [StayStatus.Staying]: 'Currently staying',
  [StayStatus.Complete]: 'Checked out',
};

const StayIndicator = ({
  status,
  large,
  className,
  style,
  dark,
  width,
  id,
  fill,
}) => (
  <Tooltip body={tooltips[status]} id={id} containerClassName="d-flex-fill">
    <BaseStayIndicator
      width={width}
      dark={dark}
      status={status}
      style={style}
      className={className}
      large={large}
      fill={fill}
    />
  </Tooltip>
);
StayIndicator.defaultProps = {
  status: StayStatus.Planned,
  large: false,
  className: '',
  style: {},
  width: undefined,
  dark: false,
  id: undefined,
  fill: false,
};

StayIndicator.propTypes = {
  /** Stay status - Enum (StayStatus- [Reserved, Planned, Staying, Complete,]) */
  status: PropTypes.oneOf([
    StayStatus.Planned,
    StayStatus.Staying,
    StayStatus.Complete,
    StayStatus.Reserved]),
  /** Indicator whether to use large component size */
  large: PropTypes.bool,
  /** Additional class to add to StayIndicator */
  className: PropTypes.string,
  /** Additional style to add to StayIndicator */
  style: PropTypes.shape(),
  /** Customize line width */
  width: PropTypes.number,
  /** Set theme to dark */
  dark: PropTypes.bool,
  /** Id for the stay indicator component */
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  /** Set the stay indicator to fill space */
  fill: PropTypes.bool,
};

export default StayIndicator;

Tooltip (if it helps):

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import StrapTooltip from 'reactstrap/lib/Tooltip';
import { uuid } from '../../../utils/commonUtility';
import { Theme } from '../../../constants/enums';
import './tooltip.scss';

class Tooltip extends Component {
  constructor(props) {
    super(props);
    this.state = { isOpen: false, id: props.id || uuid() };
  }
  onToggle = () => {
    this.setState(prevState => ({ isOpen: !prevState.isOpen }));
  };
  render() {
    const {
      children, className, body, style, autoHide, theme,
      placement, offset, containerClassName, ...props
    } = this.props;
    const { id, isOpen } = this.state;
    return (
      <div className={containerClassName}>
        <span className={containerClassName} id={`Tooltip-${id}`}>{children}</span>
        <StrapTooltip
          innerClassName="box-shadow-heavy"
          target={`Tooltip-${id}`}
          isOpen={isOpen}
          toggle={this.onToggle}
          className={cn('mx-2', 'my-2', { 'light-theme': theme === Theme.Light }, className)}
          style={style}
          autohide={autoHide}
          placement={placement}
          offset={offset}
          {...props}
        >
          {body}
        </StrapTooltip>
      </div>
    );
  }
}
export default Tooltip;

using: React: 16.52, React-DOM: 16.52, ReactStrap: 6.3.1

Can someone please assist? Issue only appears when hovering over component

[SandMoshi]

If this is happening as a result of you updating react or konva/react-konva packages, this fix may work for you:

1. delete the node_modules folder
2. run npm install again.
3. Afterwards, run npm run start again.

This fixed the error for me.

[RajuRoopani]

@Jony-Y / @chasestarr could you please explain the fix? i ran into the same problem