{"record":{"id":"2c8135c250a56cd4","repo":"remotion-dev/remotion","slug":"you-must-pass-either-component-or-lazycomponent","errorCode":null,"errorMessage":"You must pass either 'component' or 'lazyComponent'","messagePattern":"You must pass either 'component' or 'lazyComponent'","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/core/src/use-lazy-component.ts","lineNumber":91,"sourceCode":"\n\t\tif (\n\t\t\t'lazyComponent' in compProps &&\n\t\t\ttypeof compProps.lazyComponent !== 'undefined'\n\t\t) {\n\t\t\tif (typeof compProps.lazyComponent === 'undefined') {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`A value of \\`undefined\\` was passed to the \\`lazyComponent\\` prop. Check the value you are passing to the <${componentName}/> component.`,\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn React.lazy(\n\t\t\t\tcompProps.lazyComponent as () => Promise<{\n\t\t\t\t\tdefault: ComponentType<Props>;\n\t\t\t\t}>,\n\t\t\t);\n\t\t}\n\n\t\tthrow new Error(\"You must pass either 'component' or 'lazyComponent'\");\n\n\t\t// Very important to leave the dependencies as they are, or instead\n\t\t// the player will remount on every frame.\n\t\t// For the 'component' case, we intentionally do NOT depend on\n\t\t// compProps.component — the stable wrapper reads from componentRef instead.\n\n\t\t// @ts-expect-error\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [compProps.lazyComponent]);\n\treturn lazy;\n};\n","sourceCodeStart":73,"sourceCodeEnd":103,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/use-lazy-component.ts#L73-L103","documentation":"Thrown by useLazyComponent when the compProps object contains neither a `component` nor a defined `lazyComponent` key. Remotion's <Composition>, <Player>, and <Still> require exactly one of these props so they know what to render; reaching this branch means the discriminated union was violated at runtime (TypeScript normally prevents it). It is a hard failure that stops the composition from mounting.","triggerScenarios":"Calling <Composition>/<Still>/<Player> while spreading a props object whose `component`/`lazyComponent` keys are both absent or both explicitly undefined, or constructing compProps dynamically (e.g. from a lookup that returned nothing). Also reachable from JS consumers that bypass the TS union check.","commonSituations":"Registering compositions from a config array/map where some entries forgot the component field; conditionally building props and the condition evaluated to neither branch; migrating from `component` to `lazyComponent` and leaving both unset during refactor; dynamic registration loops in entry files.","solutions":["Pass either `component={MyComponent}` or `lazyComponent={React.lazy(() => import('./MyComponent'))}` to the <Composition>/<Player>/<Still>.","If building props dynamically, default to a real component: `const comp = entry.component ?? DefaultComp; <Composition component={comp} .../>`.","Search the codebase for the composition id named in the surrounding error trace and confirm its registration object has a component key.","Add a runtime assert in your registration helper: `if (!entry.component && !entry.lazyComponent) throw new Error('missing component for ' + entry.id);`."],"exampleFix":"// before\n<Composition id=\"x\" durationInFrames={120} fps={30} width={1920} height={1080} {...maybeEmptyProps} />\n\n// after\n<Composition id=\"x\" durationInFrames={120} fps={30} width={1920} height={1080} component={MyVideo} />","handlingStrategy":"type-guard","validationCode":"const hasComponent = (p) => Boolean(p && ('component' in p && p.component) || ('lazyComponent' in p && typeof p.lazyComponent === 'function'));\nif (!hasComponent(props)) throw new Error('Composition needs component or lazyComponent');","typeGuard":"function hasRenderable(p: object): p is { component: unknown } | { lazyComponent: () => Promise<unknown> } {\n  return ('component' in p && p.component != null) || ('lazyComponent' in p && typeof (p as any).lazyComponent === 'function');\n}","tryCatchPattern":null,"preventionTips":["Always pass component or lazyComponent explicitly; never spread an unvalidated object as the composition props.","When registering compositions from a config array, type each entry as the CompProps union so TS enforces the key.","Add a unit test that asserts every entry in your composition registry has a component or lazyComponent."],"tags":["remotion","composition","props","runtime-validation"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}