{"record":{"id":"04481f587a855588","repo":"remotion-dev/remotion","slug":"a-value-of-undefined-was-passed-to-the-lazycomp","errorCode":null,"errorMessage":"A value of `undefined` was passed to the `lazyComponent` prop. Check the value you are passing to the <${componentName}/> component.","messagePattern":"A value of `undefined` was passed to the `lazyComponent` prop\\. Check the value you are passing to the <(.+?)/> component\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/core/src/use-lazy-component.ts","lineNumber":79,"sourceCode":"\t\t\t}\n\n\t\t\tconst Wrapper = (props: Props) => {\n\t\t\t\tconst Comp = componentRef.current!;\n\t\t\t\treturn React.createElement(\n\t\t\t\t\tComp as React.ComponentType<{}>,\n\t\t\t\t\tprops as {},\n\t\t\t\t);\n\t\t\t};\n\n\t\t\treturn Wrapper as ComponentType<Props>;\n\t\t}\n\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","sourceCodeStart":61,"sourceCodeEnd":97,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/use-lazy-component.ts#L61-L97","documentation":"useLazyComponent() resolves the lazyComponent prop for code-split compositions. NOTE: in the current source this branch is effectively unreachable - the outer condition already requires `typeof compProps.lazyComponent !== 'undefined'`, so the inner check that throws can never be true. If you ever see this error, you are likely on a forked or older version where the guards differ; on main, the real failure mode for a missing lazyComponent is the separate \"You must pass either 'component' or 'lazyComponent'\" error.","triggerScenarios":"On the current source: not reachable through normal API use. On forks/older versions: passing `<Composition lazyComponent={undefined} />` with the lazyComponent key present but undefined.","commonSituations":"Custom forks of Remotion that changed the guard ordering; older versions where this branch was reachable; static analysis tools flagging the throw without noting the dead-code surrounding it.","solutions":["If you genuinely hit this, upgrade or realign to upstream @remotion/core and reproduce - the modern code path emits a different message.","Ensure you pass a real lazy loader (e.g. `lazyComponent={() => import('./Video')}`) and not undefined.","If neither component nor lazyComponent is right, expect 'You must pass either component or lazyComponent' instead."],"exampleFix":"// before\n<Composition id=\"x\" lazyComponent={undefined} ... />;\n\n// after\n<Composition id=\"x\" lazyComponent={() => import('./Video')} ... />;","handlingStrategy":"validation","validationCode":"const lazyVideo = () => import('./Video');\n\nif (typeof lazyVideo !== 'function') {\n  throw new Error('lazyComponent must be a function');\n}\n\n<Composition id=\"x\" lazyComponent={lazyVideo} durationInFrames={30} fps={30} width={1920} height={1080} />;","typeGuard":"const isLazyLoader = (\n  v: unknown,\n): v is () => Promise<{default: React.ComponentType<any>}> =>\n  typeof v === 'function';","tryCatchPattern":null,"preventionTips":["Pass a real dynamic-import function as lazyComponent, never undefined.","If you hit this on a fork, realign to upstream @remotion/core - on main the surrounding guard makes this branch unreachable.","For missing-component cases, expect the 'You must pass either component or lazyComponent' error and handle that instead."],"tags":["react","composition","import","undefined","lazy-component","dead-code"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}