remotion-dev/remotion · error · TypeError

component-owned-sequence initialProps must not define from…

Error message

component-owned-sequence initialProps must not define from, durationInFrames, or name, and style must be an object when provided

What it means

assertCreateElementPayloadInput throws this TypeError when installationMode is 'component-owned-sequence' but the initialProps violate the constraints for that mode: they must not define 'from', 'durationInFrames', or 'name' (the component owns the Sequence timing), and 'style', if present, must be an object. These props are managed by the generated sequence itself, so user-supplied copies would conflict.

Solutions

  1. Delete the from, durationInFrames, and name keys from initialProps when using component-owned-sequence
  2. Ensure style, if provided, is a plain object (e.g. {width: 100}) not a string or null
  3. Switch installationMode to 'wrapped' if you need to control from/durationInFrames yourself
  4. Split shared prop objects and strip Sequence-managed keys before payload creation

Example fix

// before
createElementPayload({..., installationMode: 'component-owned-sequence', initialProps: {from: 30, durationInFrames: 120, name: 'Seq'}});
// after
createElementPayload({..., installationMode: 'component-owned-sequence', initialProps: {volume: 1}});
Defensive patterns

Strategy: validation

Validate before calling

const FORBIDDEN = ['from', 'durationInFrames', 'name'];
if (installationMode === 'component-owned-sequence') {
  for (const k of FORBIDDEN) delete initialProps?.[k];
  if (initialProps && 'style' in initialProps &&
      (typeof initialProps.style !== 'object' || initialProps.style === null || Array.isArray(initialProps.style))) {
    delete initialProps.style;
  }
}

Type guard

const isComponentOwnedProps = (p: unknown): p is Record<string, unknown> =>
  typeof p === 'object' && p !== null &&
  !(['from','durationInFrames','name'] as const).some((k) => k in p) &&
  (!('style' in p) || (typeof p.style === 'object' && p.style !== null && !Array.isArray(p.style)));

Try / catch

try {
  const payload = createElementPayload(input);
} catch (e) {
  if (e instanceof TypeError && e.message.startsWith('component-owned-sequence initialProps must not define')) {
    const {from, durationInFrames, name, ...rest} = (input.initialProps ?? {}) as Record<string, unknown>;
    return createElementPayload({...input, initialProps: rest});
  }
  throw e;
}

Prevention

When it happens

Trigger: Calling createElementPayload with installationMode: 'component-owned-sequence' and initialProps containing from, durationInFrames, or name keys, or a style value that is not a plain object (string, null, array).

Common situations: Reusing the same initialProps object across both 'wrapped' and 'component-owned-sequence' payloads, or copying props from an existing Sequence element (which includes from/durationInFrames) into a new component-owned payload.

Understand the failure class

Background: "Must be a positive integer", "Invalid value", "Unsupported": the invalid-argument-value error family, when a library rejects the value you pass — this error's family across 35 libraries.

Related errors

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

Appendix: source

Thrown at packages/studio-protocol/src/element-payload.ts:108

		throw new TypeError(
			'installationMode must be "wrapped" or "component-owned-sequence"',
		);
	}

	const initialProps = input.initialProps ?? null;
	if (!isElementInitialProps(initialProps)) {
		throw new TypeError(
			'initialProps must be null or an object containing JSON-compatible values with valid JSX attribute names',
		);
	}

	if (
		!hasValidElementInitialPropsForInstallationMode({
			initialProps,
			installationMode: input.installationMode,
		})
	) {
		throw new TypeError(
			'component-owned-sequence initialProps must not define from, durationInFrames, or name, and style must be an object when provided',
		);
	}
};

export const createElementPayload = (
	input: CreateElementPayloadInput,
): StudioElementPayload => {
	assertCreateElementPayloadInput(input);
	const constructed = makeDragData({
		type: 'element',
		dependencies: [...input.dependencies],
		dimensions: input.dimensions,
		displayName: input.displayName,
		durationInFrames: input.durationInFrames,
		initialProps: input.initialProps ?? null,
		slug: input.slug,
		sourceCode: input.sourceCode,

View on GitHub (pinned to 46a3a6bf13)