Добавление функциональности Gaugejs для реагирования приложения с использованием библиотеки реагировать-gaugejs

Question

Я использую эту * библиотеку для добавления Gouge в приложение реагирования

*https://www.npmjs.com/package/react-gaugejs

Проблема в том, что я сейчас получаю следующую ошибку, и у меня естьабсолютно не знаю, что его генерирует или как его решить.

Error: Module parse failed: Unexpected token (79:4)
You may need an appropriate loader to handle this file type.
| 
|   return (
>     <>
|       <canvas ref={canvas} {...passThroughProps}></canvas>
|       <span ref={span} style={{display: 'none'}}></span>

, на случай, если это будет полезно, так как реактивный компонент используется для правильной оценки, а также выполняется импорт

import Gauge from 'react-gaugejs';

class BigNumberVis extends React.PureComponent {
  constructor(props) {
    super(props);
    this.gradientId = shortid.generate();
    this.state = {value: formatBigNumber(bigNumber)};  ******!!!!
  }

  getClassName() {
    const { className, showTrendLine } = this.props;
    const names = `superset-legacy-chart-big-number ${className}`;
    if (showTrendLine) {
      return names;
    }

    return `${names} no-trendline`;
  }

  createTemporaryContainer() {
    const container = document.createElement('div');
    container.className = this.getClassName();
    container.style.position = 'absolute'; // so it won't disrupt page layout
    container.style.opacity = 0; // and not visible

    return container;
  }

  handleResultTextChange(value) {        ******!!!!
    this.setState({value: value});       ******!!!!
  }

  renderHeader(maxHeight) {
    const { bigNumber, formatBigNumber, width } = this.props;

    const container = this.createTemporaryContainer();
    document.body.appendChild(container);
    const fontSize = computeMaxFontSize({
      text,
      maxWidth: Math.floor(width),
      maxHeight,
      className: 'header-line',
      container,
    });
    document.body.removeChild(container);

    return (
      <React.Fragment>                           ******!!!!
        <div                                     ******!!!!
          className="header-line"                ******!!!!
          style={{height:maxHeight,              ******!!!!
          }}                                     ******!!!!
          >
            <p>Value: {this.state.text}</p>       ******!!!!
              <Gauge                             ******!!!!
                value={50}                       ******!!!!
                minValue={0}                     ******!!!!
                maxValue={100}                   ******!!!!
                animationSpeed={32}              ******!!!!
                options={{                       ******!!!!
                  angle: 0.35,                   ******!!!!
                  lineWidth: 0.1,                ******!!!!
                  radiusScale: 1,                it keeps going!
                  pointer: {
                    length: 0.6,
                    strokeWidth: 0.035,
                    color: '#000000',
                  },
                  limitMax: false,
                  limitMin: false,
                  colorStart: '#6F6EA0',
                  colorStop: '#C0C0DB',
                  strokeColor: '#EEEEEE',
                  generateGradient: true,
                  highDpiSupport: true,
                }}
                textChangeHandler={handleResultTextChange}
                donut

                // any other props are passed through to the canvas element
          className='gauge-canvas'
          style={{height: '150px'}}
          />
          </div>
          </React.Fragment>                        Until you get here *****!!!!
        );
      }

Этот компонент основан на другом компоненте, который уже был закончен.

Я отметил различия с другим файлом. Функция handleResultTextChange была изменена, и значение теперь является переменной состояния, а не константой.

Любая помощь приветствуется. Заранее спасибо:)