remotion-dev/remotion · error

TimelineFontWeightField rendered for non-font-weight field

Error message

TimelineFontWeightField rendered for non-font-weight field

What it means

TimelineFontWeightField is a Studio timeline field component specialized for editing the CSS font-weight property. Its field schema is expected to have type 'font-weight'. If it receives a field whose schema type is anything else, it throws 'TimelineFontWeightField rendered for non-font-weight field' because rendering logic (values, drag behavior) only makes sense for font-weight schemas.

Source

Thrown at packages/studio/src/components/Timeline/TimelineFontWeightField.tsx:33

export const TimelineFontWeightField: React.FC<{
	readonly field: SchemaFieldInfo;
	readonly propStatus: CanUpdateSequencePropStatusStatic;
	readonly effectiveValue: unknown;
	readonly onSave: TimelineFieldOnSave;
	readonly onDragValueChange: TimelineFieldOnDragValueChange;
	readonly onDragEnd: () => void;
}> = ({
	field,
	propStatus,
	effectiveValue,
	onSave,
	onDragValueChange,
	onDragEnd,
}) => {
	const {fieldSchema} = field;
	if (fieldSchema.type !== 'font-weight') {
		throw new Error(
			'TimelineFontWeightField rendered for non-font-weight field',
		);
	}

	const sourceValue = propStatus.codeValue ?? fieldSchema.default;
	const currentValue = effectiveValue ?? sourceValue;

	const onSelectKeyword = useCallback(
		(newValue: string) => {
			if (newValue === propStatus.codeValue) {
				return;
			}

			onDragValueChange(newValue);
			onSave(newValue).finally(onDragEnd);
		},
		[onDragEnd, onDragValueChange, onSave, propStatus.codeValue],
	);

View on GitHub (pinned to a6a7485a9a)

Solutions

  1. Verify the field schema actually has type: 'font-weight' before rendering this component (inspect field.fieldSchema.type at the call site)
  2. Fix the schema-type → field-component dispatch table so non-font-weight fields route to the correct component
  3. If you added a custom schema type, register a matching timeline field component for it instead of reusing TimelineFontWeightField
  4. Report as a bug if it happens with a plain Zod field in stock Remotion Studio

Example fix

// before
<TimelineFontWeightField field={field} />
// after
{field.fieldSchema.type === 'font-weight'
  ? <TimelineFontWeightField field={field} />
  : <TimelineGenericField field={field} />}
Defensive patterns

Strategy: type-guard

Validate before calling

if (field.fieldSchema.type !== 'font-weight') {
  throw new Error('wrong field component'); // at the dispatch site
}

Type guard

const isFontWeightField = (f: TimelineField): f is TimelineField & {fieldSchema: {type: 'font-weight'}} =>
  f.fieldSchema.type === 'font-weight';

Try / catch

try {
  return <TimelineFontWeightField field={field} />;
} catch (err) {
  if (err instanceof Error && err.message.includes('non-font-weight field')) {
    return <TimelineGenericField field={field} />;
  }
  throw err;
}

Prevention

When it happens

Trigger: Passing a field whose fieldSchema.type is not 'font-weight' (e.g. 'color', 'number', 'text') to TimelineFontWeightField — typically a schema-type/field-component mapping mistake in Studio's Zod-schema-to-component dispatch.

Common situations: Adding a new Zod schema type and forgetting to update the field-to-component mapping; custom schema extensions misrouted to the font-weight component; Studio version mismatch where schemas and field components disagree.

Related errors


AI-assisted analysis of remotion-dev/remotion@a6a7485a9a (2026-09-02). Data as JSON: /api/errors/1806b5f5858525cc. Report an issue: GitHub.