remotion-dev/remotion · error · TypeError

Cannot use both startFrom and trimBefore props. Use trimBefo

Error message

Cannot use both startFrom and trimBefore props. Use trimBefore instead as startFrom is deprecated.

What it means

Media components support both the deprecated startFrom prop and its non-deprecated replacement trimBefore, but not both at once. validateMediaTrimProps detects the conflict because allowing both would make the intended trim ambiguous. The error message directs you to use trimBefore, since startFrom is deprecated.

Source

Thrown at packages/core/src/validate-start-from-props.ts:104

	if ((trimAfter as number) <= (trimBefore as number)) {
		throw new TypeError('trimAfter prop must be greater than trimBefore prop.');
	}
};

export const validateMediaTrimProps = ({
	startFrom,
	endAt,
	trimBefore,
	trimAfter,
}: {
	startFrom: number | undefined;
	endAt: number | undefined;
	trimBefore: number | undefined;
	trimAfter: number | undefined;
}) => {
	// Check for conflicting props
	if (typeof startFrom !== 'undefined' && typeof trimBefore !== 'undefined') {
		throw new TypeError(
			'Cannot use both startFrom and trimBefore props. Use trimBefore instead as startFrom is deprecated.',
		);
	}

	if (typeof endAt !== 'undefined' && typeof trimAfter !== 'undefined') {
		throw new TypeError(
			'Cannot use both endAt and trimAfter props. Use trimAfter instead as endAt is deprecated.',
		);
	}

	// Validate using the appropriate validation function
	const hasNewProps =
		typeof trimBefore !== 'undefined' || typeof trimAfter !== 'undefined';
	const hasOldProps =
		typeof startFrom !== 'undefined' || typeof endAt !== 'undefined';

	if (hasNewProps) {
		validateTrimProps(trimBefore, trimAfter);

View on GitHub (pinned to 78fe4bb3fd)

Solutions

Remove the deprecated startFrom prop and keep only trimBefore.
If you must keep the old prop temporarily, remove trimBefore until migration is complete.
Search the codebase for both props on the same element to catch spread-merge conflicts.

Example fix

// before
<Video src={src} startFrom={30} trimBefore={40} />
// after
<Video src={src} trimBefore={40} />

Defensive patterns

Strategy: validation

Validate before calling

if (startFrom !== undefined && trimBefore !== undefined) {
  throw new Error('Pass only trimBefore; startFrom is deprecated');
}

Type guard

const hasNoStartFromConflict = (
  startFrom: unknown,
  trimBefore: unknown,
): boolean => startFrom === undefined || trimBefore === undefined;

Prevention

Complete the migration from startFrom to trimBefore and remove all startFrom usages.
When merging props objects, delete the deprecated key before assigning the new one.
Add an ESLint ban rule or codemod for startFrom to prevent reintroduction.

When it happens

Trigger: Passing both startFrom and trimBefore on the same media component, e.g. <Video src={src} startFrom={30} trimBefore={40} />.

Common situations: Partially migrating a component from startFrom to trimBefore and forgetting to remove the old prop; merging two configs/props objects where one sets startFrom and the other sets trimBefore; copy-pasting examples that mix old and new APIs.

Related errors

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