textRef.lastChild.getComputedTextLength is not a function

[maka-io]

Hi, I basically used an example from the site:

import './annotate.css';
import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { Annotation, SubjectCircle, ConnectorElbow, ConnectorEndDot, Note } from 'react-annotation';

class Annotate extends Component {
  static propTypes = {}

  static defaultProps = {}

  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
      <Annotation
        x={100}
        y={100}
        dx={100}
        dy={50}
        radius={35}
        title="Custom annotation"
        label="Donut annotations be free!"
      >

        <Note align="middle" lineType="vertical" padding={10} />
        </Annotation>
    );
  }
}

export { Annotate };

and came away with the following error:

Uncaught TypeError: textRef.lastChild.getComputedTextLength is not a function
    at Note.wrapText (modules.js?hash=5e8d74fec46c1bc7983fab6dc430f84952e3f64f:41187)
    at Note.updateText (modules.js?hash=5e8d74fec46c1bc7983fab6dc430f84952e3f64f:41134)
    at Note.componentDidMount (modules.js?hash=5e8d74fec46c1bc7983fab6dc430f84952e3f64f:41099)
    at modules.js?hash=5e8d74fec46c1bc7983fab6dc430f84952e3f64f:17556
    at measureLifeCyclePerf (modules.js?hash=5e8d74fec46c1bc7983fab6dc430f84952e3f64f:17367)
    at modules.js?hash=5e8d74fec46c1bc7983fab6dc430f84952e3f64f:17555
    at CallbackQueue.notifyAll (modules.js?hash=5e8d74fec46c1bc7983fab6dc430f84952e3f64f:10182)
    at ReactReconcileTransaction.close (modules.js?hash=5e8d74fec46c1bc7983fab6dc430f84952e3f64f:20583)
    at ReactReconcileTransaction.closeAll (modules.js?hash=5e8d74fec46c1bc7983fab6dc430f84952e3f64f:11341)
    at ReactReconcileTransaction.perform (modules.js?hash=5e8d74fec46c1bc7983fab6dc430f84952e3f64f:11288)

[maka-io]

Got it, must be wrapped in svg tag!