Skip to content

TypeScript build fails on macOS due to incorrect timer type in AudioQuestionRenderer #50

@Bahati308

Description

@Bahati308

Component

  • formulus (React Native mobile app)
  • formulus-formplayer (React web app)
  • synkronus (Go backend server)
  • synkronus-cli (Command-line utility)
  • Documentation
  • Other (please specify)

User Story

As a developer, I want to run the form player locally on different operating systems so that the project builds consistently across environments.

Description

TypeScript compilation fails on macOS due to an incorrect timer type (Timeout) being used in browser-based React code. The issue does not appear on some Linux environments, leading to inconsistent build behavior across platforms.

Details

  • The bug occurs during TypeScript compilation when running npm start.
  • It is triggered when @types/node typings are included in the environment.
  • The code uses a Node.js timer type (Timeout) for setInterval in a browser (DOM) context.
  • The issue appears on macOS but not on Linux due to differences in TypeScript type resolution and installed typings.

Steps to Reproduce

  1. Clone the repository on macOS.
  2. cd formulas-formplayer
  3. Ensure @types/node is installed or included via dependencies.
  4. Run npm install.
  5. Run npm start.
  6. Observe the TypeScript error in AudioQuestionRenderer.tsx.

Expected Behavior

The project should compile successfully on all supported operating systems without TypeScript type errors.

Actual Behavior

TypeScript compilation fails with the following error:
TS2322: Type number is not assignable to type Timeout

Acceptance Criteria

The project compiles successfully on macOS, Linux, and Windows.
Timer references are typed in a browser-safe, cross-platform way.
No TypeScript timer-related errors occur during npm start

Environment

OS: macOS (observed), Linux (not observed)
Node.js version:
Go version:
Docker version:
Brwser: Chrome, Safari (error observed on Mac), Firefox , Chrome(on Linux, no error)

Additional Context

Compiled with problems:

ERROR in src/AudioQuestionRenderer.tsx:159:9
TS2322: Type 'number' is not assignable to type 'Timeout'.
    157 |         setIsPlaying(true);
    158 |         // Update progress more frequently for smoother UI
  > 159 |         progressInterval.current = setInterval(() => {
        |         ^^^^^^^^^^^^^^^^^^^^^^^^
    160 |           setCurrentTime(audio.currentTime);
    161 |         }, 100);
    162 |       }).catch((error) => {

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingformplayerIssues related to the FormPlayer React applicationgood first issueGood for newcomers

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions