Merge pull request #4855 from remotion-dev/error-when-passing-undefin…

…ed-to-composition
remotion-dev · Feb 4, 2025 · 0c67836 · 0c67836
2 parents 1a88854 + d863cb6
commit 0c67836
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 10 deletions.
diff --git a/packages/core/src/Composition.tsx b/packages/core/src/Composition.tsx
@@ -135,7 +135,10 @@ export const Composition = <
 		useContext(CompositionManager);
 	const video = useVideo();
 
-	const lazy = useLazyComponent<Props>(compProps as CompProps<Props>);
+	const lazy = useLazyComponent<Props>({
+		compProps: compProps as CompProps<Props>,
+		componentName: 'Composition',
+	});
 	const nonce = useNonce();
 	const isPlayer = useIsPlayer();
 	const environment = getRemotionEnvironment();

diff --git a/packages/core/src/use-lazy-component.ts b/packages/core/src/use-lazy-component.ts
@@ -13,14 +13,24 @@ type LazyExoticComponent<T extends ComponentType<any>> = ExoticComponent<
 };
 
 // Expected, it can be any component props
-export const useLazyComponent = <Props>(
-	compProps: CompProps<Props>,
-): LazyExoticComponent<ComponentType<Props>> => {
+export const useLazyComponent = <Props>({
+	compProps,
+	componentName,
+}: {
+	compProps: CompProps<Props>;
+	componentName: string;
+}): LazyExoticComponent<ComponentType<Props>> => {
 	const lazy = useMemo(() => {
 		if (
 			'lazyComponent' in compProps &&
 			typeof compProps.lazyComponent !== 'undefined'
 		) {
+			if (typeof compProps.lazyComponent === 'undefined') {
+				throw new Error(
+					`A value of \`undefined\` was passed to the \`lazyComponent\` prop. Check the value you are passing to the <${componentName}/> component.`,
+				);
+			}
+
 			return React.lazy(
 				compProps.lazyComponent as () => Promise<{
 					default: ComponentType<Props>;
@@ -36,6 +46,12 @@ export const useLazyComponent = <Props>(
 				>;
 			}
 
+			if (typeof compProps.component === 'undefined') {
+				throw new Error(
+					`A value of \`undefined\` was passed to the \`component\` prop. Check the value you are passing to the <${componentName}/> component.`,
+				);
+			}
+
 			return React.lazy(() =>
 				Promise.resolve({default: compProps.component as ComponentType<Props>}),
 			);

diff --git a/packages/player/src/Player.tsx b/packages/player/src/Player.tsx
@@ -199,9 +199,10 @@ const PlayerFn = <
 		),
 	);
 
-	const component = Internals.useLazyComponent(
-		componentProps,
-	) as LazyExoticComponent<ComponentType<unknown>>;
+	const component = Internals.useLazyComponent({
+		compProps: componentProps,
+		componentName: 'Player',
+	}) as LazyExoticComponent<ComponentType<unknown>>;
 
 	validateInitialFrame({initialFrame, durationInFrames});
 

diff --git a/packages/player/src/Thumbnail.tsx b/packages/player/src/Thumbnail.tsx
@@ -99,9 +99,10 @@ const ThumbnailFn = <
 
 	useImperativeHandle(ref, () => rootRef.current as ThumbnailMethods, []);
 
-	const Component = Internals.useLazyComponent(
-		componentProps,
-	) as LazyExoticComponent<ComponentType<unknown>>;
+	const Component = Internals.useLazyComponent({
+		compProps: componentProps,
+		componentName: 'Thumbnail',
+	}) as LazyExoticComponent<ComponentType<unknown>>;
 
 	const [emitter] = useState(() => new ThumbnailEmitter());