Unable to figure out what the error is in 'Build a 25+5 clock'

I’m trying to complete the ‘Build a 25 + 5 Clock’ project in FCC, and I can’t seem to reproduce the “error” that is showing up in Debug mode. Based on what I’m seeing in Editor view, there’s no reason why it shouldn’t pass. If anyone could please help identify what the issue is, I’d really appreciate it. The test that is failing is test 11:

When I click the element with the id of “reset”, any running timer should be stopped, the value within id=“break-length” should return to 5, the value within id=“session-length” should return to 25, and the element with id=“time-left” should reset to it’s default state.

The error that shows up is:

Script error. (:0)
Error: Script error. (:0)
    at a.onerror (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:581:13785)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:581:112350
    at p (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:581:94539)
    at Generator.<anonymous> (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:581:95876)
    at Generator.next (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:581:94902)
    at r (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:1:1169)
    at s (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:1:1380)

var t=this,a=arguments;return new Promise((function(n,o){var i=e.apply(t,a);function s(e){r(i,n,o,s,u,"next",e)}function u(e){r(i,n,o,s,u,"throw",e)}s(void 0)}))

My code is pasted below, and is also available on CodePen (https://codepen.io/lukerFCC/pen/pomgqQp). Any help would be greatly appreciated! Thank you!

const initState = () => {
  return {
    status: 'session',
    breakTime: 5,
    sessTime: 25,
    currTime: ['25','00'],
    running: 'no',
    timerID: '',
  }
}

// Starting from sratch without any Redux
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.toggleStatus = this.toggleStatus.bind(this);
    this.decCurrTime = this.decCurrTime.bind(this);
    this.toggleRun = this.toggleRun.bind(this);
    this.endOfStatus = this.endOfStatus.bind(this);
    this.convertToArray = this.convertToArray.bind(this);
    this.clearInt = this.clearInt.bind(this);
    this.state = initState();
  }
  
  // Handle the click here - switch the action creator that is dispatched based on the id of the element
  // Note that clicks are handled differently depending on whether the timer is running (state.running) - this is handled by the if statement in each case
  handleClick(e) {
    switch(e.target.id) {
      case 'start_stop':
        this.toggleRun();
        break;
      case 'break-decrement':
        if (this.state.running === "no") {
          this.updateBreak(-1);}
        break;
      case 'break-increment':
        if (this.state.running === "no") {
          this.updateBreak(1)}
        break;
      case 'session-decrement':
        if (this.state.running === "no") {
          this.updateSess(-1);
          const newTime = [
          String(this.state.sessTime-1).length == 1 ?
          '0' + String(this.state.sessTime-1) :
          String(this.state.sessTime-1),
          '00'
        ]
          this.updateCurrTime(newTime)
        }
        break;
      case 'session-increment':
        if (this.state.running === "no") {
          this.updateSess(1);
          const newTime = [
          String(this.state.sessTime+1).length == 1 ?
          '0' + String(this.state.sessTime+1) :
          String(this.state.sessTime+1),
          '00'
        ]
          this.updateCurrTime(newTime)
        }
        break;
      case 'reset':
        this.clearInt();
        this.setState(initState());
    }
  }
  
  clearInt() {
    clearInterval(this.state.timerID);
  }
  
  toggleRun() {
    let running
    if (this.state.running === 'yes') {
      running = 'no'
      this.clearInt();
    } else {
      running = 'yes'
      this.decCurrTime(this.state.currTime);
    }
    this.setState({
      running: running
    })
  }
  
  toggleStatus() {
    let status
    if (this.state.status === 'session') {
      status = 'break'
    } else {
      status = 'session'
    }
    this.setState({
      status: status
    })
  }
  
  updateBreak(dir) {
    if (this.state.breakTime + dir < 0 ||
        this.state.breakTime + dir > 60) {
      return state;
    }
    this.setState({
      breakTime: this.state.breakTime + dir
    })
  }
  
  updateSess(dir) {
    if (this.state.sessTime + dir < 0 ||
        this.state.sessTime + dir > 60) {
      return state;
    }
    this.setState({
      sessTime: this.state.sessTime + dir
    })
  }
  
  updateCurrTime(time) {
    this.setState({
      currTime: time
    })
  }
  
  // Create a function that will decrease time by 1 second
  decCurrTime(prevTime) {
    const id = setInterval(() => {
      switch (prevTime[1]) {
        case '00':
          prevTime[0] = prevTime[0] - 1;
          prevTime[1] = 59;
          break;
        default:
          prevTime[1] = prevTime[1] - 1;
          break;
      }
      prevTime = prevTime.map((num) => {
        return String(num).length == 1 ?
          '0' + String(num) :
        String(num)
      })
      this.updateCurrTime(prevTime);
    },1000);
    this.setState({
      timerID: id
    })
  }
  
  convertToArray(time) {
    return [String(time).length == 1 ?
      '0' + String(time) :
    String(time),
      '00']
  }
  
  endOfStatus(newTime) {
    this.updateCurrTime(newTime);
    this.clearInt();
    this.decCurrTime(newTime);
    this.toggleStatus();
  }
  
  render() {
    if (this.state.currTime.join("") === "0000" && this.state.running === 'yes') {
      const audio = document.getElementById("beep");
      audio.play()
      if (this.state.status === "session") {
        const newTime =
              this.convertToArray(this.state.breakTime);
        this.endOfStatus(newTime);
      } else {
        const newTime =
              this.convertToArray(this.state.sessTime);
        this.endOfStatus(newTime);
      } 
    } 
    
    return(
      <div id="container-div">
        <div id="navbar">
          <h3 id="navbar-title">
            Luke's Coding Projects
          </h3>
          <img id="navbar-img" src="https://www.creativefabrica.com/wp-content/uploads/2018/12/Computer-icon-by-rudezstudio-5-580x386.jpg" />
        </div>
        <div id="timer-div">
          <div id="timer-title">
            <h2>25 + 5 clock</h2>
            <h4 id="subtitle">Manage your time with our easy to use clock</h4>
          </div>
          <div id="timer-labels">
            <div id="break-div">
              <h3 id="break-label">Break Length</h3>
              <div id="break-controls">
                <i id="break-decrement"
                  onClick={this.handleClick}
                  className="fa-solid fa-arrow-down icon button"></i>
                <h3 id="break-length">{this.state.breakTime}</h3>
                <i id="break-increment"
                  onClick={this.handleClick}
                  className="fa-solid fa-arrow-up icon button"></i>
              </div>
            </div>
            <div id="sess-div">
              <h3 id="session-label">Session Length</h3>
              <div id="sess-controls">
                <i id="session-decrement"
                  onClick={this.handleClick}
                  className="fa-solid fa-arrow-down icon button"></i>
                <h3 id="session-length">{this.state.sessTime}</h3>
                <i id="session-increment"
                  onClick={this.handleClick}
                  className="fa-solid fa-arrow-up icon button"></i>
              </div>
            </div>
          </div>
          <div id="timer">
            <h2 id="timer-label">{this.state.status}</h2>
            <h1 id="time-left">
              {this.state.currTime.join(":")}
            </h1>
            <audio id="beep" src="https://www.soundjay.com/buttons/sounds/beep-01a.mp3"/>
          </div>
          <div id="timer-controls">
            <i onClick={this.handleClick}
              id="start_stop"
              className="fa-solid fa-play button"></i>
            <i className="fa fa-refresh button"
              onClick={this.handleClick}
              id="reset"></i>
          </div>
        </div>
      </div>
    )
  }
}

// Render Clock to the DOM
ReactDOM.render(<Clock />,
  document.getElementById("clock"));

Edit: after looking over the project more closely my comment might not be very useful, I don’t see how you can even access the package file with the way this project is set up :cry:

So that error isn’t coming from your code its coming from the fCC scripts it looks like? I haven’t done this project yet but I noticed this at the top of the page:

Note: React 18 has known incompatibilities with the tests for this project (see issue)

The linked issue recommends trying it with React 17. So if you haven’t already, you could try updating your package.json dependencies to use React 17.0.2

Thanks for the reply! I’m using React 17.0.0 on this project, so I think that incompatibility probably isn’t the issue (I’ve also imported the same React scripts in previous projects and they’ve passed). In terms of your first comment - what do you mean? And could you recommend how to set up the project better?

Thanks!

I meant that, in other projects I’ve seen using GitPod you would have full access to the server environment, including the package JSON, but then I noticed this project just uses a codepen template and I could not find how to edit dependencies in that. But if you’re already using version 17 my comment doesn’t help anyway :confused: At any rate, if you don’t get better help from someone else on this and can’t get past it, maybe consider opening a ticket in the Support category cuz it looks to me like it’s not an issue with you but an issue with the tests