fix: guard React transition runtime APIs

[cursor]

Bug and impact

React 19.2.8 in this repository does not export addTransitionType or ViewTransition at runtime. Recent navigation/search/past-paper components imported those APIs directly from react, so common client paths could crash when rendering <ViewTransition> or when a navigation/search handler called addTransitionType(...).

Root cause

The installed @types/react exposes canary transition APIs, but the installed react runtime reports both exports as undefined. TypeScript/build can therefore pass while the client bundle still breaks at runtime.

Fix

• Added app/components/common/react-transition.tsx as a runtime-safe compatibility wrapper.
• Routed programmatic transition labels through addOptionalTransitionType(...).
• Routed direct <ViewTransition> render sites through OptionalViewTransition, which renders children directly when the runtime API is unavailable.
• Added scripts/test-react-transition-runtime-imports.ts to prevent direct runtime imports/rendering from coming back.

Validation

• CI=true corepack pnpm exec tsx scripts/test-react-transition-runtime-imports.ts passes and prints addTransitionType=undefined ViewTransition=undefined Activity=symbol.
• CI=true corepack pnpm build compiles successfully and finishes TypeScript, then fails only during page data collection because local DATABASE_URL is unset.

  

spent a lot of water and tokens to review your slop

Greptile Summary

The compatibility layer avoids direct use of React transition APIs that are absent at runtime. Two non-blocking maintenance gaps remain: its regression guard is not run automatically, and it can miss qualified React API access.

Confidence Score: 4/5

The reproduced issues are non-blocking guard-maintenance gaps; the compatibility implementation itself is not shown to fail in the current code.

Both confirmed findings concern incomplete regression protection rather than a currently reproduced product failure.

Files Needing Attention: scripts/test-react-transition-runtime-imports.ts should be connected to an automatically run check and expanded to recognize qualified React API access. package.json and .github/workflows/deploy-appservice.yml are the available locations for connecting the guard.

T-Rex Logs

What T-Rex did

• T-Rex produced a proof for a posted P2 finding.
• T-Rex produced a proof for another posted P2 finding.
• T-Rex validated a general-contract scenario by running the guard script, and observed an invocation result indicating no CI invocation.
• T-Rex produced a proof for a posted P1 finding.
• T-Rex demonstrated the bypass with a namespace-access fixture and verified cleanup afterward.

_{Ran code and verified through T-Rex}

Comments Outside Diff (2)

1. General comment

   React transition runtime-import guard is not automated

   • Bug
     • The runnable guard at scripts/test-react-transition-runtime-imports.ts has no invocation from either tracked package manifest or the tracked GitHub Actions workflow. Consequently, future unsafe React runtime imports can be merged and deployed without this guard executing.
   • Cause
     • The script exists as a standalone file but is absent from package.json scripts and .github/workflows/deploy-appservice.yml; no separate test workflow is tracked.
   • Fix
     • Add a package script such as test:react-transition-runtime-imports: tsx scripts/test-react-transition-runtime-imports.ts, then invoke it from the CI/deploy validation sequence (or a dedicated pull-request test workflow).

   _{Ran code and verified through T-Rex}

2. General comment

   React transition import guard misses namespace ViewTransition access

   • Bug
     • A source file using import * as React from 'react'; and <React.ViewTransition /> passes scripts/test-react-transition-runtime-imports.ts. This bypasses the guard intended to prevent direct use of React's runtime ViewTransition API outside the compatibility wrapper.
   • Cause
     • The import check skips runtime React imports that have no {...} named-import block (lines 70–71), and the JSX check only matches bare <ViewTransition> tags (line 86), not member expressions such as <React.ViewTransition>.
   • Fix
     • Extend the scanner to recognize namespace/default/CommonJS React bindings and reject member accesses to ViewTransition and addTransitionType, including JSX tags such as <React.ViewTransition /> and calls such as React.addTransitionType(...).

   _{Ran code and verified through T-Rex}

_{Reviews (1): Last reviewed commit: "fix: guard React transition runtime APIs" | Re-trigger Greptile}

Greptile also left 2 inline comments on this PR.

Context used:

• Knowledge Base — Study content experience
• Knowledge Base — Past papers

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
❌ Deployment failed View logs	examcooker	b5aafe5	Sep 07 2026, 11:14 AM

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
examcooker-dev	Error		Sep 7, 2026 11:15am UTC

[greptile-apps]

Automate the regression guard

This guard is only run manually: no package script or workflow invokes it. Future direct imports of React APIs missing at runtime can therefore be merged and deployed without this protection running, recreating a client-side crash. This is a non-blocking maintenance concern; add the guard to an automatically run check.

Artifacts

Evidence from the check

• The authored executable command enumerates tracked manifests and workflows, then searches tracked files for a candidate invocation; it makes the absence check reproducible.

Command output from the check

• Executed `CI=true pnpm exec tsx scripts/test-react-transition-runtime-imports.ts` in `/home/user/repo` and captured exit code 0; the standalone guard itself is runnable and passes.

Command output from the check

• Executed the authored invocation audit in `/home/user/repo` and captured the two manifests, one workflow, no candidate references, and exit code 0; no automatic package or CI invocation exists.

_{Ran code and verified through T-Rex}

[greptile-apps]

Detect qualified React access

The guard skips React imports without named specifiers and only matches bare <ViewTransition> tags. A file using import * as React from "react" with <React.ViewTransition /> passes the guard despite directly using the unavailable runtime API. This is a non-blocking gap that makes the regression check unreliable; recognize namespace, default, and CommonJS React bindings as well.

Artifacts

Evidence from the check

• This authored shell harness creates the isolated fixture, runs the scanner before and after it, and removes the fixture on exit; it provides the exact executable repro.

Command output from the check

• The candidate scanner was executed with no temporary fixture and exited 0 after printing its pass message; this establishes the baseline.

Command output from the check

• The candidate scanner was executed after creating a fixture with `import * as React from 'react'` and `<React.ViewTransition />`, yet exited 0 and reported a pass; this confirms the bypass.

Command output from the check

• A command checked that the temporary fixture no longer exists and exited 0; the fixture was cleaned up.

_{Ran code and verified through T-Rex}