{"record":{"id":"2f352244ba3283c4","repo":"remotion-dev/remotion","slug":"a-value-of-undefined-was-passed-to-the-componen","errorCode":null,"errorMessage":"A value of `undefined` was passed to the `component` prop. Check the value you are passing to the <${componentName}/> component.","messagePattern":"A value of `undefined` was passed to the `component` prop\\. Check the value you are passing to the <(.+?)/> component\\.","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/core/src/use-lazy-component.ts","lineNumber":58,"sourceCode":"\t// (e.g. change volume={1} to volume={2}) and save. Without this fix,\n\t// Component would fully remount instead of fast-refreshing in place.\n\tconst componentRef = useRef<ComponentType<Props> | null>(null);\n\n\tif ('component' in compProps) {\n\t\tcomponentRef.current = compProps.component as ComponentType<Props>;\n\t}\n\n\tconst lazy = useMemo(() => {\n\t\tif ('component' in compProps) {\n\t\t\t// In SSR, suspense is not yet supported, we cannot use React.lazy\n\t\t\tif (typeof document === 'undefined' || noSuspense) {\n\t\t\t\treturn compProps.component as unknown as React.LazyExoticComponent<\n\t\t\t\t\tComponentType<Props>\n\t\t\t\t>;\n\t\t\t}\n\n\t\t\tif (typeof compProps.component === 'undefined') {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`A value of \\`undefined\\` was passed to the \\`component\\` prop. Check the value you are passing to the <${componentName}/> component.`,\n\t\t\t\t);\n\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'","sourceCodeStart":40,"sourceCodeEnd":76,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/use-lazy-component.ts#L40-L76","documentation":"useLazyComponent() resolves the component/lazyComponent prop of higher-level Remotion components like <Composition>, <Still>, <Sequence>, or <Player>. When `component` is present but undefined, the lazy wrapper cannot be built and the hook throws, naming the offending component so you can locate the bad prop.","triggerScenarios":"Passing `<Composition component={undefined} />` (or <Still>, <Player>, etc.), often because the imported component is undefined due to a missing or misnamed import, or a conditional that yields undefined.","commonSituations":"Named/default import mismatch (`import {Foo}` vs `import Foo`); circular imports that resolve to undefined at first render; dynamic component selection where one branch returns undefined; tree-shaking removing an unused-looking export.","solutions":["Verify the imported component is defined: log it or add a TypeScript check before passing it.","Fix the import (switch default <-> named) to match what the module actually exports.","Break circular imports by moving the component into its own module or lazy-loading it."],"exampleFix":"// before\nimport {MyVideo} from './MyVideo'; // wrong: MyVideo is a default export\n<Composition id=\"x\" component={MyVideo} ... />;\n\n// after\nimport MyVideo from './MyVideo';\n<Composition id=\"x\" component={MyVideo} ... />;","handlingStrategy":"type-guard","validationCode":"import MyVideo from './MyVideo';\n\nif (typeof MyVideo !== 'function') {\n  throw new Error('MyVideo import is undefined - check the import style');\n}\n\n<Composition id=\"x\" component={MyVideo} durationInFrames={30} fps={30} width={1920} height={1080} />;","typeGuard":"const isComponent = (v: unknown): v is React.ComponentType<any> =>\n  typeof v === 'function';","tryCatchPattern":null,"preventionTips":["Double-check named vs default imports after adding or moving a component.","Break circular imports by isolating composition components in their own files.","Add a TypeScript assertion that the component prop is a non-undefined ComponentType."],"tags":["react","composition","import","undefined","lazy-component"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}