Skip to content

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

Open

Description

@joshunrau

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.

Activity

  1. added
    BugType: existing behavior is wrong
    Priority: LowNice to have, cosmetic or speculative
    Difficulty: LowIsolated change, about 2 hours or less
    Area: Playgroundapps/playground (in-browser instrument editor)
    Good First IssueWell-scoped, low-risk and self-contained; a good entry point for a new contributor
    on Oct 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Area: Playgroundapps/playground (in-browser instrument editor)BugType: existing behavior is wrongDifficulty: LowIsolated change, about 2 hours or lessGood First IssueWell-scoped, low-risk and self-contained; a good entry point for a new contributorPriority: LowNice to have, cosmetic or speculative

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions