Blog Engineering

Guarding Vidstack's TimeSlider.Value After Client-Side Navigation

Articolo in inglese. TimeSlider.Value threw 'e is not a function' in Next.js production after client navigation. A guard returns empty text when the instance is gone.

TypeScriptvidstack/playerNext.jsReactvideo player

A method called on a component that was already torn down.

Risposta breve

In a Next.js App Router production build, navigating client-side to a page with a Vidstack player could crash with TypeError: e is not a function at SliderValue.getValueText. The method could run on a destroyed component instance, or before its slider state and format context were resolved. The fix returns an empty string in that case. It was merged as PR #1853 and closed issue #1852.

The problem

Issue #1852 included a minimal player and clear steps: a direct load or reload of /player rendered correctly, but navigating there through next/link triggered the route error boundary. The reporter confirmed it with @vidstack/react@1.15.6.

The fix

   @method
   getValueText() {
+    if (!this.scope || !this.#slider || !this.#format) return '';
+

The PR description notes this follows the existing if (!this.scope) return; pattern in slider-chapters.ts.

By the numbers

  • Repository: vidstack/player, 3,720 stars (Nov 3, 2026), TypeScript, MIT
  • Files changed: 1
  • Lines: +2 / -0
  • Commits: 1
  • Opened and merged: Aug 21, 2026. Time to merge: 58 minutes
  • Review: merged by a maintainer

Domande frequenti

Did the PR include the claimed regression test?

The description claimed a regression test, but the merged diff contains only the two-line guard and no test.

Is Vidstack still maintained?

As recorded in the supplied research on Nov 3, 2026, the repository described itself as "Deprecated in favour of Video.js 10; security fixes only until January 2028."

Where can I read more?

See the pull request and the original issue.

L'obiettivo

Components that outlive their lifecycle should fail quietly, not take the page down with them.

Esegui il ciclo

Trasforma i segnali di produzione in fix revisionati.

Avvia una prova gratuita e scopri come Prilog collega incidenti reali a pull request a livello di codice.