{"record":{"id":"21226e82103c6382","repo":"emotion-js/emotion","slug":"you-are-trying-to-create-a-styled-element-with-an","errorCode":null,"errorMessage":"You are trying to create a styled element with an undefined component.\nYou may have forgotten to import it.","messagePattern":"You are trying to create a styled element with an undefined component\\.\nYou may have forgotten to import it\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/styled/src/base.tsx","lineNumber":67,"sourceCode":"      next = next.next\n    }\n    return (\n      <style\n        {...{\n          [`data-emotion`]: `${cache.key} ${serializedNames}`,\n          dangerouslySetInnerHTML: { __html: rules },\n          nonce: cache.sheet.nonce\n        }}\n      />\n    )\n  }\n  return null\n}\n\nconst createStyled = (tag: ElementType, options?: StyledOptions) => {\n  if (isDevelopment) {\n    if (tag === undefined) {\n      throw new Error(\n        'You are trying to create a styled element with an undefined component.\\nYou may have forgotten to import it.'\n      )\n    }\n  }\n  const isReal = tag.__emotion_real === tag\n  const baseTag = (isReal && tag.__emotion_base) || tag\n\n  let identifierName: string | undefined\n  let targetClassName: string | undefined\n  if (options !== undefined) {\n    identifierName = options.label\n    targetClassName = options.target\n  }\n\n  const shouldForwardProp = composeShouldForwardProps(tag, options, isReal)\n  const defaultShouldForwardProp =\n    shouldForwardProp || getDefaultShouldForwardProp(baseTag)\n  const shouldUseAs = !defaultShouldForwardProp('as')","sourceCodeStart":49,"sourceCodeEnd":85,"githubUrl":"https://github.com/emotion-js/emotion/blob/b882bcba85132554992e4bd49e94c95939bbf810/packages/styled/src/base.tsx#L49-L85","documentation":"createStyled() in @emotion/styled throws when the tag argument passed to styled() is undefined. This almost always means the component variable referenced at module scope (styled.div or styled(Component)) was undefined at that point — typically a missing or misnamed import. Because styled() runs at module evaluation time, the failure is immediate and synchronous.","triggerScenarios":"styled(MyComponent) where MyComponent is undefined — e.g. importing a named export that doesn't exist, a default/named import mismatch, a circular import where the module hasn't finished initializing, or a typo'd identifier. Thrown only when isDevelopment.","commonSituations":"import { Button } from './Button' when Button is a default export; circular dependency between a styled-components module and the component file; tree-shaken/renamed exports after refactor; wrong casing in import path on case-sensitive filesystems.","solutions":["Check the import of the component passed to styled(): verify the export name and default vs named export","Break circular imports by moving the styled definition below the component module or into its own file","Log the value (console.log(MyComponent)) right before styled(MyComponent) to confirm it's undefined and trace why","Fix path casing/typos in the import specifier"],"exampleFix":"// before\nimport { Button } from './button'\nexport const ButtonStyled = styled(Button)``\n// after\nimport Button from './button'\nexport const ButtonStyled = styled(Button)``","handlingStrategy":"validation","validationCode":"if (tag === undefined) {\n  throw new Error(`styled() received undefined component — check your import of ${name}`)\n}\nif (typeof tag !== 'string' && typeof tag !== 'function' && typeof tag !== 'object') {\n  throw new TypeError('styled() requires a string tag or React component')\n}","typeGuard":"function isValidStyledTarget(tag: unknown): tag is React.ComponentType<any> | keyof JSX.IntrinsicElements {\n  return typeof tag === 'string' || (typeof tag === 'function') || (tag != null && typeof tag === 'object' && '$$typeof' in tag)\n}","tryCatchPattern":"try {\n  const S = styled(Target)``\n} catch (e) {\n  if (String(e.message).includes('undefined component')) {\n    console.error('Import of styled target failed:', Target)\n  } else throw e\n}","preventionTips":["Verify default vs named imports for every component passed to styled()","Avoid circular imports between styled-* modules and component modules","Enable ESLint import/no-unresolved and TypeScript noUncheckedIndexedAccess to catch broken imports early","Keep styled definitions in files that import components, not the other way around"],"tags":["react","styled-components","undefined","import-error"],"backgroundTag":"undefined-component","analyzedSha":"b882bcba85132554992e4bd49e94c95939bbf810","analyzedAt":"2026-09-02T22:27:13.739Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}