remotion-dev/remotion · error · Error

useTimelineMarqueeSelectableItem must be used inside…

Error message

useTimelineMarqueeSelectableItem must be used inside TimelineSelectionProvider

What it means

useTimelineMarqueeSelectableItem is an internal Studio hook that registers an element as marquee-selectable in the Timeline. It reads TimelineRowSelectionContext and throws if that context is null, meaning the hook was called outside TimelineSelectionProvider.

Solutions

Wrap the component calling the hook inside <TimelineSelectionProvider> (or move it back under the Timeline's provider subtree).
Check the component's position in the React tree with React DevTools to confirm TimelineRowSelectionContext is provided above it.
If the hook was called from a module-level or event-handler context instead of a component body, move the call into a component/hook render path.
Compare against the upstream TimelineSelection.tsx usage to restore the intended provider nesting.

Example fix

// before
<CustomRow>{/* hook called inside */}</CustomRow>
// after
<TimelineSelectionProvider>
  <CustomRow>{/* hook called inside */}</CustomRow>
</TimelineSelectionProvider>

Defensive patterns

Strategy: validation

Validate before calling

// guard before calling the hook
const inProvider = useContext(TimelineRowSelectionContext) !== null; // conceptually
// only call useTimelineMarqueeSelectableItem when rendering inside TimelineSelectionProvider

Try / catch

try {
  registerItem();
} catch (e) {
  if (e.message.includes('must be used inside TimelineSelectionProvider')) {
    console.warn('Component rendered outside TimelineSelectionProvider');
  } else throw e;
}

Prevention

Keep all selection hooks' consumers as descendants of TimelineSelectionProvider.
When extracting Timeline components, preserve the provider subtree.
Render custom Timeline items inside the provider in tests and Storybook.

When it happens

Trigger: Calling useTimelineMarqueeSelectableItem from a custom Studio component rendered outside the Timeline's TimelineSelectionProvider, or a custom Timeline row/item composition that omits the provider.

Common situations: Forking or extending Studio's Timeline UI and moving a row component to a different subtree; writing a custom timeline plugin; refactoring that reordered providers so the consumer is no longer a descendant.

Understand the failure class

Background: "missing required argument" and "the following required arguments were not provided": what required-argument errors mean and how to fix them — this error's family across 20 libraries.

Related errors

AI-assisted analysis of remotion-dev/remotion@46a3a6bf13 (2026-09-18). Data as JSON: /api/errors/d08709bd744ce0bb. Report an issue: GitHub.

Appendix: source

Thrown at packages/studio/src/components/Timeline/TimelineSelection.tsx:1606

		[
			canSelect,
			getMarqueeSelection,
			isHighestContext,
			selectedItems,
			selectItems,
		],
	);

	return {marqueeRect, onPointerDownCapture};
};

export const useTimelineMarqueeSelectableItem = (
	item: TimelineSelection | null,
	ref: React.RefObject<Element | null>,
) => {
	const selectionContext = useContext(TimelineRowSelectionContext);
	if (selectionContext === null) {
		throw new Error(
			'useTimelineMarqueeSelectableItem must be used inside TimelineSelectionProvider',
		);
	}

	const {registerMarqueeSelectableItem} = selectionContext;

	useEffect(() => {
		if (item === null) {
			return;
		}

		return registerMarqueeSelectableItem(
			item,
			() => ref.current?.getBoundingClientRect() ?? null,
		);
	}, [item, ref, registerMarqueeSelectableItem]);
};

View on GitHub (pinned to 46a3a6bf13)