remotion-dev/remotion · error · Error

AbsoluteTimeContext is not available. This hook must be used

Error message

AbsoluteTimeContext is not available. This hook must be used inside a <Player> or the Remotion Studio.

What it means

useAbsoluteTimelinePosition() reads Remotion's AbsoluteTimeContext, which is provided by <Player> or the Remotion Studio. Unlike the regular timeline position, this one returns a frame not adjusted by Sequence offsets. The hook throws when the context is null because there is no absolute timeline outside a Remotion render.

Source

Thrown at packages/core/src/timeline-position-state.ts:106

	const state = useContext(PlaybackRateContext);
	if (state === null) {
		throw new Error(
			'PlaybackRateContext is not available. This hook must be used inside a <Player> or the Remotion Studio.',
		);
	}

	return state;
};

export const useTimelinePosition = (): number => {
	const state = useTimelineContext();
	return useTimelinePositionFromContext(state);
};

export const useAbsoluteTimelinePosition = (): number => {
	const state = useContext(AbsoluteTimeContext);
	if (state === null) {
		throw new Error(
			'AbsoluteTimeContext is not available. This hook must be used inside a <Player> or the Remotion Studio.',
		);
	}

	return useTimelinePositionFromContext(state);
};

export const useTimelineSetFrame = (): ((
	u: React.SetStateAction<Record<string, number>>,
) => void) => {
	const {setFrame} = useContext(SetTimelineContext);
	return setFrame;
};

type PlayingReturnType = readonly [
	boolean,
	(u: React.SetStateAction<boolean>) => void,
	RefObject<boolean>,

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Render the calling component only inside <Player> or a registered <Composition>.
2. Pass the frame down as a prop instead of reading the context if the component must work in multiple contexts.
3. Run `npx remotion versions` to confirm context providers and consumers share a version.

Example fix

// before
function Overlay() {
  const frame = useAbsoluteTimelinePosition();
  return <Badge frame={frame} />;
}
render(<Overlay />);

// after
render(
  <Player component={Overlay} durationInFrames={30} fps={30} width={640} height={360} />
);

// Prefer: only mount this component inside <Player> or a <Composition>.
// If you need the frame outside Remotion, pass it as a prop instead.
type OverlayProps = {frame: number};
function Overlay({frame}: OverlayProps) {
  return <Badge frame={frame} />;
}

try {
  return useAbsoluteTimelinePosition();
} catch (e) {
  if (/AbsoluteTimeContext/.test((e as Error).message)) return 0;
  throw e;
}

When it happens

Trigger: Calling useAbsoluteTimelinePosition() from a component rendered outside <Player>/Studio, or from a component reused in non-Remotion contexts such as a design system preview.

Common situations: Extracting a subcomponent that uses this hook and mounting it in isolation; version mismatch where the AbsoluteTimeContext provider is absent; SSR rendering of a component that depends on the absolute frame.

Related errors

• TimelineContext is not available. This hook must be used ins
• PlaybackRateContext is not available. This hook must be used
• Tried to enable the buffering state, but a Remotion context
• useCurrentFrame can only be called inside a component that w
• useCurrentScale() was called outside of a Remotion context.

AI-assisted analysis of remotion-dev/remotion@78fe4bb3fd (2026-08-12). Data as JSON: /api/errors/ac5234ac426d631e. Report an issue: GitHub.