Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Playground static-assets example throws ReferenceError on Submit because message is undefined, hidden by another example's ambient global

Open Beginner friendly
  • Is something wrong?
#1,805 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
85/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
frontend, testing

Research direction

Start with apps/playground/src/instruments/examples/interactive/Interactive-With-Static-Assets/index.ts and its fragment.html; compare the Submit handler with the example’s validationSchema. Also read Interactive-With-Legacy-Script/legacy.d.ts to understand why type-checking misses the undefined identifier. Add an end-to-end check in testing/src/specs/playground.spec.ts; done means submitting this example completes successfully with a valid message.

Written by the indexing model from the issue text.

Description

Area: Playground Bug Difficulty: Low Good First Issue Priority: Low

The playground's "Interactive Instrument with Static Assets" example can never be completed. Its Submit handler calls done({ message }), but nothing in the instrument defines message, so clicking Submit throws ReferenceError: message is not defined and done is never called. Type-checking does not catch it, because a different example, Interactive-With-Legacy-Script/legacy.d.ts, declares declare let message: 'hello' as an ambient global. That declaration is in scope for every file under apps/playground/src, so tsc (and pnpm lint) accept the undefined identifier.

Where

apps/playground/src/instruments/examples/interactive/Interactive-With-Static-Assets/index.ts:18-23:

render(done) {
  const button = document.getElementById('submit-btn')!;
  button.addEventListener('click', () => {
    done({ message });
  });
},

The global that hides it, apps/playground/src/instruments/examples/interactive/Interactive-With-Legacy-Script/legacy.d.ts:1:

declare let message: 'hello';

fragment.html has no element with id="message" either, so no named-element global exists at runtime.

Reproduce

  1. Open the playground and select Examples → Interactive Instrument with Static Assets.
  2. Click Submit in the preview.

Actual: the browser console shows ReferenceError: message is not defined, and the instrument never completes.
Expected: the instrument completes with a message string that satisfies its validationSchema.

Tests

The playground's vitest project only covers pure modules, so the e2e test is the guard: in testing/src/specs/playground.spec.ts, select this example, click Submit in the preview frame, and assert that the instrument reaches its completed state.

Suggested fix

Pass a literal, e.g. done({ message: 'Hello' }). Then scope the legacy example's ambient declaration so it cannot mask undefined identifiers in other examples, for example by declaring it as window.message (declare global { interface Window { message: 'hello' } }) and reading it as window.message in that example.

Dominant language
TypeScript
Stars
119
Forks
19
Avg merge
1d 2h
Merged PRs (30d)
56

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from DouglasNeuroInformatics/OpenDataCapture

All issues in DouglasNeuroInformatics/OpenDataCapture

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.