remotion-dev/remotion · error · TypeError

Cannot use both endAt and trimAfter props. Use trimAfter ins

Error message

Cannot use both endAt and trimAfter props. Use trimAfter instead as endAt is deprecated.

What it means

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

Source

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

	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);
	} else if (hasOldProps) {
		validateStartFromProps(startFrom, endAt);
	}
};

export const resolveTrimProps = ({

View on GitHub (pinned to 78fe4bb3fd)

Solutions

Remove the deprecated endAt prop and keep only trimAfter.
If you must keep the old prop temporarily, remove trimAfter 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} endAt={200} trimAfter={180} />
// after
<Video src={src} trimAfter={180} />

Defensive patterns

Strategy: validation

Validate before calling

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

Type guard

const hasNoEndAtConflict = (
  endAt: unknown,
  trimAfter: unknown,
): boolean => endAt === undefined || trimAfter === undefined;

Prevention

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

When it happens

Trigger: Passing both endAt and trimAfter on the same media component, e.g. <Video src={src} endAt={200} trimAfter={180} />.

Common situations: Partially migrating a component from endAt to trimAfter and forgetting to remove the old prop; merging two configs/props objects where one sets endAt and the other sets trimAfter; 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/dc516905685173f3. Report an issue: GitHub.