почему нельзя отобразить приложение на экране и получить сообщение «невозможно вызвать класс как ошибку функции»

Question

Я пытаюсь отобразить свой компонент ClockApp, но я получаю эту ошибку и не могу отобразить ее на экране. Мой компонент приложения является компонентом класса, а другие являются функциональными компонентами без сохранения состояния. этот же код работал в codepen без проблем, так что я что-то упустил при импорте компонентов из правильных каталогов? Спасибо уже.

Код

Компонент таймера

Timer component

function Timer(props) {

    return (
        <div className="timer">
          <h2 id="timer-label">{props.name}</h2>
          <span id="time-left">{props.time}</span>
          <div className="controls">
            <button 
              id="start_stop"
              onClick={props.onPlayPause}>&#8227;&#8214;
            </button>
            <button 
              id="reset" 
              onClick={props.onReset}>&#8634;
            </button>
          </div>  
        </div>
    )
}

export default Timer

TimerSettings component

function TimerSettings(props) {
  return (
    <div className="timer-settings">
      <h3 id={`${props.label}-label`}>
        {props.label === "session" ? "Session " : "Break "}Length
      </h3>
      <div className="timer-buttons">
        <button
          id={`${props.label}-decrement`}
          onClick={() => props.handleClick(`${props.label}Value`, false)}
        >
          &darr;
        </button>
        <div id={`${props.label}-length`}>{props.value}</div>
        <button
          id={`${props.label}-increment`}
          onClick={() => props.handleClick(`${props.label}Value`, true)}
        >
          &uarr;
        </button>
      </div>
    </div>
  );
}

export default TimerSettings;

ClockApp Component

import React from "react";
import Timer from "./timer";
import TimerSettings from "./timer-settings";
import Moment from "react-moment";
import "./App.css";

class ClockApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      breakValue: 5,
      sessionValue: 25,
      currentTimer: "Session",
      timeLeft: 1500000,
      going: false,
      changedLength: false
    };
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.timeLeft === 0 && prevState.currentTimer === "Session") {
      this.setState({
        timeLeft: this.state.breakValue * 60 * 1000,
        currentTimer: "Break"
      });
      this.audio.play();
    }
    if (prevState.timeLeft === 0 && prevState.currentTimer === "Break") {
      this.setState({
        timeLeft: this.state.sessionValue * 60 * 1000,
        currentTimer: "Session"
      });
      this.audio.play();
    }
  }

  handleTimers = (label, inc) => {
    if (this.state[label] === 60 && inc) return undefined;
    if (this.state[label] === 1 && !inc) return undefined;
    this.setState({
      [label]: this.state[label] + (inc ? 1 : -1)
    });
  };

  handleReset = () => {
    this.setState({
      breakValue: 5,
      sessionValue: 25,
      currentTimer: "Session",
      timeLeft: 1500000,
      going: false,
      changedLength: false
    });
    this.audio.pause();
    this.audio.currentTime = 0;
    clearInterval(this.clock);
  };

  handleTimerStatus = () => {
    this.setState({ going: !this.state.going });
    if (this.state.going) {
      clearInterval(this.clock);
      this.setState({ going: false });
    } else {
      if (this.state.changedLength) {
        this.clock = setInterval(
          () => this.setState({ timeLeft: this.state.timeLeft - 1000 }),
          1000
        );
        this.setState({ going: true });
      } else {
        this.setState(
          {
            timeLeft: this.state.sessionValue * 60 * 1000,
            changedLength: true,
            going: true
          },
          () => {
            return (this.clock = setInterval(
              () => this.setState({ timeLeft: this.state.timeLeft - 1000 }),
              1000
            ));
          }
        );
      }
    }
  };

  render() {
    return (
      <div>
        <h1>Pomodoro Clock</h1>
        <TimerSettings
          value={this.state.breakValue}
          label="break"
          handleClick={this.handleTimers}
        />
        <TimerSettings
          value={this.state.sessionValue}
          label="session"
          handleClick={this.handleTimers}
        />
        <Timer
          name={this.state.currentTimer}
          time={Moment(this.state.timeLeft).format("mm:ss")}
          onReset={this.handleReset}
          onPlayPause={this.handleTimerStatus}
        />
        <audio
          id="beep"
          src="https://s3-us-west-1.amazonaws.com/benjaminadk/Data+synth+beep+high+and+sweet.mp3"
          ref={element => (this.audio = element)}
        />
      </div>
    );
  }
}

export default ClockApp;

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import ClockApp from './clockapp';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<ClockApp />, document.getElementById('root'));
serviceWorker.unregister();

Error


TypeError: Cannot call a class as a function
Anonymous function
C:/Users/Jari/Desktop/pomodoro-clock/node_modules/react-moment/dist/index.js:892
  889 | function t(e) {
  890 |   var n, r, o;
  891 |   return function (e, t) {
> 892 |     if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
      | ^
  893 |   }(this, t), r = this, o = m(t).call(this, e), n = !o || "object" !== s(o) && "function" != typeof o ? f(r) : o, h(f(n), "setTimer", function () {
  894 |     var e = n.props.interval;
  895 |     n.clearTimer(), t.pooledTimer || 0 === e || (n.timer = setInterval(function () {
View compiled
t


C:/Users/Jari/Desktop/pomodoro-clock/node_modules/react-moment/dist/index.js:891
  888 |   S = function (e) {
  889 | function t(e) {
  890 |   var n, r, o;
> 891 |   return function (e, t) {
      | ^
  892 |     if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
  893 |   }(this, t), r = this, o = m(t).call(this, e), n = !o || "object" !== s(o) && "function" != typeof o ? f(r) : o, h(f(n), "setTimer", function () {
  894 |     var e = n.props.interval;


View compiled
ClockApp.prototype.render
C:/Users/Jari/Desktop/pomodoro-clock/src/clockapp.js:90
  87 | };
  88 | 
  89 | render() {
> 90 |   return (
     | ^
  91 |     <div>
  92 |       <h1>Pomodoro Clock</h1>
  93 |       <TimerSettings```