remotion-dev/remotion · error · TypeError

The <Series /> component only accepts a list of <Series.Sequ

Error message

The <Series /> component only accepts a list of <Series.Sequence /> components as its children, but got ${castedChild} instead

What it means

After the string check, each child's `type` must equal `SeriesSequence`. Any other React element type (a <div>, <Img>, custom component, or the core <Sequence>) throws because Series needs Series.Sequence to read its durationInFrames/offset props.

Source

Thrown at packages/core/src/series/index.tsx:172

			const castedChild = child as unknown as
				| {
						props: InternalSeriesSequenceProps;
						type: typeof SeriesSequence;
				  }
				| string;
			if (typeof castedChild === 'string') {
				// Don't throw if it's just some accidential whitespace
				if (castedChild.trim() === '') {
					return renderChildren(i + 1, startFrame);
				}

				throw new TypeError(
					`The <Series /> component only accepts a list of <Series.Sequence /> components as its children, but you passed a string "${castedChild}"`,
				);
			}

			if (castedChild.type !== SeriesSequence) {
				throw new TypeError(
					`The <Series /> component only accepts a list of <Series.Sequence /> components as its children, but got ${castedChild} instead`,
				);
			}

			const castedElement = castedChild as React.ReactElement<
				InternalSeriesSequenceProps,
				typeof SeriesSequence
			>;
			validateSeriesSequenceProps({
				durationInFrames: castedElement.props.durationInFrames,
				offset: castedElement.props.offset,
				index: i,
				childrenLength: flattenedChildren.length,
			});

			return React.cloneElement(castedElement, {
				_remotionInternalRender: (resolvedProps, ref) => {
					const durationInFramesProp = resolvedProps.durationInFrames;

View on GitHub (pinned to 78fe4bb3fd)

Solutions

1. Use <Series.Sequence> for every direct child of <Series>.
2. Move non-sequence content inside a <Series.Sequence>'s children.

Example fix

// before
<Series>
  <Sequence durationInFrames={30}><Content/></Sequence>
</Series>
// after
<Series>
  <Series.Sequence durationInFrames={30}><Content/></Series.Sequence>
</Series>

React.Children.forEach(children, (c) => {
  if (React.isValidElement(c) && c.type !== SeriesSequence) {
    throw new TypeError('Direct <Series> child must be <Series.Sequence>');
  }
});

const isSeriesSequence = (
  el: React.ReactElement,
): boolean => (el.type as any) === SeriesSequence;

When it happens

Trigger: <Series><div/></Series>, <Series><MyComp/></Series>, or <Series><Sequence/></Series> using the plain core Sequence instead of Series.Sequence.

Common situations: Using core <Sequence> where <Series.Sequence> is required; nesting arbitrary components directly under <Series>.

Related errors

• The <Series /> component only accepts a list of <Series.Sequ
• The "offset" property of a <Series.Sequence /> must not be N
• The "offset" property of a <Series.Sequence /> must be finit
• This component must be inside a <Series /> component.
• The "durationInFrames" prop ${component} is missing.

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