{"record":{"id":"91e2129f27228e98","repo":"preactjs/preact","slug":"undefined-component-passed-to-createelement-you","errorCode":null,"errorMessage":"Undefined component passed to createElement()\n\nYou likely forgot to export your component or might have mixed up default and named imports${serializeVNode(vnode)}\n\n${getOwnerStack(vnode)}","messagePattern":"Undefined component passed to createElement\\(\\)\n\nYou likely forgot to export your component or might have mixed up default and named imports(.+?)\n\n(.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"critical","filePath":"debug/src/debug.js","lineNumber":148,"sourceCode":"\t\t}\n\n\t\tif (!isValid) {\n\t\t\tlet componentName = getDisplayName(vnode);\n\t\t\tthrow new Error(\n\t\t\t\t`Expected a valid HTML node as a second argument to render.\tReceived ${parentNode} instead: render(<${componentName} />, ${parentNode});`\n\t\t\t);\n\t\t}\n\n\t\tif (oldRoot) oldRoot(vnode, parentNode);\n\t};\n\n\toptions._diff = vnode => {\n\t\tlet { type } = vnode;\n\n\t\thooksAllowed = true;\n\n\t\tif (type === undefined) {\n\t\t\tthrow new Error(\n\t\t\t\t'Undefined component passed to createElement()\\n\\n' +\n\t\t\t\t\t'You likely forgot to export your component or might have mixed up default and named imports' +\n\t\t\t\t\tserializeVNode(vnode) +\n\t\t\t\t\t`\\n\\n${getOwnerStack(vnode)}`\n\t\t\t);\n\t\t} else if (type != null && typeof type == 'object') {\n\t\t\tif (type._children !== undefined && type._dom !== undefined) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`Invalid type passed to createElement(): ${type}\\n\\n` +\n\t\t\t\t\t\t'Did you accidentally pass a JSX literal as JSX twice?\\n\\n' +\n\t\t\t\t\t\t`  let My${getDisplayName(vnode)} = ${serializeVNode(type)};\\n` +\n\t\t\t\t\t\t`  let vnode = <My${getDisplayName(vnode)} />;\\n\\n` +\n\t\t\t\t\t\t'This usually happens when you export a JSX literal and not the component.' +\n\t\t\t\t\t\t`\\n\\n${getOwnerStack(vnode)}`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tthrow new Error(","sourceCodeStart":130,"sourceCodeEnd":166,"githubUrl":"https://github.com/preactjs/preact/blob/e881e7e8386d7a430f87498a41c6a532992b4599/debug/src/debug.js#L130-L166","documentation":"Thrown from options._diff when a vnode's type is strictly undefined. In Preact the vnode type is the component function/class or tag string; undefined means createElement received nothing usable as the first argument. The message points at a missing export or a default/named import mismatch, and it appends the serialized vnode and the owner component stack for diagnosis.","triggerScenarios":"Named import where the module uses default export: import { Foo } from './Foo' when Foo is exported default; default import where the module uses a named export: import Foo from './Foo' when Foo is a named export; circular import that evaluates to undefined at first use; barrel file (index.js) re-exporting a component that has not yet been defined; dynamic import used synchronously before resolution.","commonSituations":"Interop between ESM and CommonJS where default becomes { default: Component }; tree-shaking misconfiguration stripping a used export; HMR stale module where the replaced module lost the export; conditional export that resolves to undefined in the current environment; forgetting to add `export` to a function component declaration.","solutions":["Check the source module: confirm the component is exported with the matching syntax — `export default function Foo` vs `export function Foo`.","Adjust the import to match: use `import Foo from` for default, `import { Foo } from` for named, or `import Foo, { Bar } from` for both.","For ESM/CJS interop use `import pkg from './mod'; const Foo = pkg.default || pkg`.","Eliminate circular imports — log the imported value at module top to confirm it is defined before render."],"exampleFix":"// before — Foo.js has `export default function Foo()`\nimport { Foo } from './Foo'; // Foo is undefined\nrender(<Foo />, root);\n\n// after\nimport Foo from './Foo';\nrender(<Foo />, root);","handlingStrategy":"type-guard","validationCode":"function assertComponent(component, name) {\n  if (component === undefined || component === null) {\n    throw new Error(`Component \"${name}\" is ${String(component)}. Check the export/import style.`);\n  }\n  if (typeof component !== 'function') {\n    throw new Error(`Expected a component function/class for \"${name}\", got ${typeof component}.`);\n  }\n  return component;\n}\n\nimport * as Mod from './Foo';\nconst Foo = assertComponent(Mod.default ?? Mod.Foo, 'Foo');\nrender(<Foo />, root);","typeGuard":"/** @param {unknown} c */\nfunction isPreactComponentType(c) {\n  return typeof c === 'function' || typeof c === 'string';\n}","tryCatchPattern":null,"preventionTips":["Match import syntax to export syntax precisely (default vs named).","For ESM/CJS interop use `const C = mod.default ?? mod`.","Eliminate circular imports — they often resolve to undefined at first evaluation.","Add an eslint rule (import/no-named-as-default-member, import/no-cycle) to catch these statically."],"tags":["preact","createelement","import","export","jsx","debug-build"],"backgroundTag":null,"analyzedSha":"e881e7e8386d7a430f87498a41c6a532992b4599","analyzedAt":"2026-08-13T04:27:04.532Z","schemaVersion":2},"datasetVersion":"2026-08-13T09:17:06.757Z"}