remotion-dev/remotion · error

Component-owned Element initial props must not override…

Error message

Component-owned Element initial props must not override from, durationInFrames, or name

What it means

When installing an Element into a composition whose Sequence is owned by the parent component, the Element's initialProps must not contain keys like 'from', 'durationInFrames', or 'name', because those timing/identity props are controlled by the owning component, not the Element. Overriding them would create a conflict between the component's Sequence placement and the Element's requested props. The operation rejects such a request before applying the codemod.

Solutions

  1. Remove from, durationInFrames, and name from request.element.initialProps and let the owning component control timing.
  2. If timing must change, edit the owning component's Sequence props instead of the Element's initialProps.
  3. Regenerate the request so initialProps only contains visual/prop values.

Example fix

// before
initialProps: {from: 30, durationInFrames: 90, color: 'red'}
// after
initialProps: {color: 'red'}
Defensive patterns

Strategy: validation

Validate before calling

const forbidden = ['from','durationInFrames','name'];
if (forbidden.some((k) => Object.hasOwn(initialProps ?? {}, k)))
  throw new Error('initialProps must not override from/durationInFrames/name');

Type guard

const hasNoTimingProps = (p: Record<string, unknown> | null): boolean =>
  !['from','durationInFrames','name'].some((k) => Object.hasOwn(p ?? {}, k));

Try / catch

try {
  await applyOperation(request);
} catch (e) {
  if (String(e).includes('must not override')) stripTimingProps(request);
}

Prevention

When it happens

Trigger: A browser-studio install/apply request where request.element.initialProps includes from, durationInFrames, or name and the target Sequence is component-owned (componentOwnsSequence).

Common situations: Agents or tooling generating Element specs that copy timing props from standalone compositions into component-owned Sequences; migrations of existing Element configs into Studio-managed components.

Understand the failure class

Background: Conflicting config options: "cannot be used together" — configuration validation errors across open-source libraries — this error's family across 162 libraries.

Related errors


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

Appendix: source

Thrown at packages/browser-studio/src/browser-studio-operations.ts:2024

		getCompositionFile: (compositionId) =>
			getCompositionFile({compositionId, project: getProject()}),
		getCompositionComponentInfo: (request) =>
			Promise.resolve(
				getCompositionComponentInfo({project: getProject(), request}),
			),
		insertElement: async (request) => {
			try {
				const installationMode = request.element.installationMode ?? 'wrapped';
				const componentOwnsSequence =
					installationMode === 'component-owned-sequence';
				if (
					componentOwnsSequence &&
					request.element.initialProps !== null &&
					['from', 'durationInFrames', 'name'].some((prop) =>
						Object.hasOwn(request.element.initialProps ?? {}, prop),
					)
				) {
					throw new Error(
						'Component-owned Element initial props must not override from, durationInFrames, or name',
					);
				}

				if (
					componentOwnsSequence &&
					request.element.initialProps?.style !== undefined &&
					(request.element.initialProps.style === null ||
						typeof request.element.initialProps.style !== 'object' ||
						Array.isArray(request.element.initialProps.style))
				) {
					throw new Error(
						'Component-owned Element initial style must be an object',
					);
				}

				const originalProject = getProject();
				let project = originalProject;

View on GitHub (pinned to 46a3a6bf13)