TimeSlider.Value throws TypeError in Next.js production after client navigation

[GlebKodrik]

Current Behavior:

In a Next.js App Router production build, TimeSlider.Value can crash when navigating client-side to a route containing the player.

Opening /player directly or reloading it renders correctly. Navigating to the same route through next/link causes the route error boundary to render.

The runtime error is:

TypeError: e is not a function
    at SliderValue.getValueText

The issue is still reproducible with @vidstack/react@1.15.6. Replacing only TimeSlider.Value with a value calculated through useSliderState and useMediaState prevents the crash.

Expected Behavior:

TimeSlider.Value should render the pointer time after both a direct page load and repeated client-side navigations.

Steps To Reproduce:

1. Create a Next.js App Router application with React 19.
2. Add a home page linking to /player with next/link.
3. Add the player component shown below to /player.
4. Run a production build with next build and next start.
5. Open / and navigate to /player through the link.
6. Navigate back and open /player again if the first transition succeeds.
7. Observe TypeError: e is not a function from SliderValue.getValueText.
8. Hard-reload /player; the component renders correctly.

Minimal player component:

'use client';

import { MediaPlayer, MediaProvider, TimeSlider } from '@vidstack/react';

export function Player() {
  return (
    <MediaPlayer
      src={{
        src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
        type: 'application/x-mpegurl',
      }}
    >
      <MediaProvider />
      <TimeSlider.Root>
        <TimeSlider.Preview>
          <TimeSlider.Value />
        </TimeSlider.Preview>
        <TimeSlider.Track>
          <TimeSlider.TrackFill />
        </TimeSlider.Track>
        <TimeSlider.Thumb />
      </TimeSlider.Root>
    </MediaPlayer>
  );
}

Reproduction Link: The minimal reproduction code is included above. I can provide a standalone repository if required.

Environment:

• @vidstack/react: 1.15.6
• Also reproduced with: 1.12.13
• React: 19.1.2
• Next.js: 16.2.9
• Router: App Router
• Bundler: Rspack via next-rspack
• Build mode: production
• Browser: Chrome 150
• OS: macOS

Anything Else?

This workaround remains stable across repeated client-side navigations:

import { formatTime, useMediaState, useSliderState } from '@vidstack/react';

export function SliderPreviewValue() {
  const duration = useMediaState('duration');
  const pointerRate = useSliderState('pointerRate');
  const pointerTime = Math.round(pointerRate * duration * 100_000) / 100_000;

  return <div>{Number.isFinite(pointerTime) ? formatTime(pointerTime) : "LIVE"}</div>;
}

The stack points to SliderValue.getValueText, so this appears related to the formatter/context used internally by TimeSlider.Value rather than the media source itself.