remotion-dev/remotion · error · TypeError

direction passed to blurSlide() must be one of ${VALID_DIREC

Error message

direction passed to blurSlide() must be one of ${VALID_DIRECTIONS.map((d) => `"${d}"`).join(', ')}, received ${JSON.stringify(direction)}

What it means

validateProps throws a TypeError when the direction prop passed to blurSlide() is not one of the four valid string literals. Unlike error 93 this runs on the public blurSlide() entry point, so it is the primary defense against bad direction values.

Source

Thrown at packages/transitions/src/presentations/blur-slide.tsx:190

		case 'from-left':
			return [1, 0];
		case 'from-right':
			return [-1, 0];
		case 'from-top':
			return [0, 1];
		case 'from-bottom':
			return [0, -1];
		default:
			throw new Error(`Invalid direction: ${direction}`);
	}
};

const validateProps = (props: BlurSlideProps) => {
	const direction = props.direction ?? DEFAULT_DIRECTION;
	const blur = props.blur ?? DEFAULT_BLUR;

	if (!VALID_DIRECTIONS.includes(direction)) {
		throw new TypeError(
			`direction passed to blurSlide() must be one of ${VALID_DIRECTIONS.map((d) => `"${d}"`).join(', ')}, received ${JSON.stringify(direction)}`,
		);
	}

	if (typeof blur !== 'number' || !Number.isFinite(blur)) {
		throw new TypeError(
			`blur passed to blurSlide() must be a finite number, received ${blur}`,
		);
	}

	if (blur < 0) {
		throw new TypeError(
			`blur passed to blurSlide() must be greater than or equal to 0, received ${blur}`,
		);
	}
};

export const blurSlideShader = (

View on GitHub (pinned to b2f4e34732)

Solutions

Pass exactly 'from-left', 'from-right', 'from-top', or 'from-bottom'
Validate dynamic values against the union type before calling blurSlide()
Omit direction entirely to use DEFAULT_DIRECTION
Enable TypeScript strict mode so the union type rejects invalid literals at compile time

Example fix

// before
blurSlide({direction: 'down'})
// after
blurSlide({direction: 'from-bottom'})

Defensive patterns

Strategy: validation

Validate before calling

const dirs = ['from-left','from-right','from-top','from-bottom'] as const;
if (!dirs.includes(props.direction as any)) {
  throw new TypeError(`direction must be one of ${dirs.join(', ')}`);
}

Type guard

const isBlurSlideDirection = (d: unknown): d is 'from-left'|'from-right'|'from-top'|'from-bottom' =>
  typeof d === 'string' && ['from-left','from-right','from-top','from-bottom'].includes(d);

Try / catch

try {
  presentation = blurSlide({direction: rawDirection as any});
} catch (err) {
  if (err instanceof TypeError && err.message.includes('direction passed to blurSlide()')) {
    presentation = blurSlide({}); // default direction
  }
}

Prevention

Type props as the literal union so tsc rejects invalid values
Normalize/trim dynamic direction strings before use
Omit direction to accept the default
Add a unit test covering all four valid values

When it happens

Trigger: Calling blurSlide({direction: 'up'}), passing a non-string (number, null cast), or a misspelled direction through the presentation factory.

Common situations: Building transitions from dynamic config/UI selections; TypeScript omitted or value typed loosely; typos in direction names.

Understand the failure class

Background: Invalid enum value errors: "Unknown type", "Invalid scope", "must be one of" — when a string is not on the library's allowed list — this error's family across 23 libraries.

Related errors

AI-assisted analysis of remotion-dev/remotion@b2f4e34732 (2026-09-09). Data as JSON: /api/errors/81b60e45eee08f1c. Report an issue: GitHub.