emotion-js/emotion · error · Error

You are trying to create a styled element with an undefined

Error message

You are trying to create a styled element with an undefined component.
You may have forgotten to import it.

What it means

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.

Source

Thrown at packages/styled/src/base.tsx:67

      next = next.next
    }
    return (
      <style
        {...{
          [`data-emotion`]: `${cache.key} ${serializedNames}`,
          dangerouslySetInnerHTML: { __html: rules },
          nonce: cache.sheet.nonce
        }}
      />
    )
  }
  return null
}

const createStyled = (tag: ElementType, options?: StyledOptions) => {
  if (isDevelopment) {
    if (tag === undefined) {
      throw new Error(
        'You are trying to create a styled element with an undefined component.\nYou may have forgotten to import it.'
      )
    }
  }
  const isReal = tag.__emotion_real === tag
  const baseTag = (isReal && tag.__emotion_base) || tag

  let identifierName: string | undefined
  let targetClassName: string | undefined
  if (options !== undefined) {
    identifierName = options.label
    targetClassName = options.target
  }

  const shouldForwardProp = composeShouldForwardProps(tag, options, isReal)
  const defaultShouldForwardProp =
    shouldForwardProp || getDefaultShouldForwardProp(baseTag)
  const shouldUseAs = !defaultShouldForwardProp('as')

View on GitHub (pinned to b882bcba85)

Solutions

1. Check the import of the component passed to styled(): verify the export name and default vs named export
2. Break circular imports by moving the styled definition below the component module or into its own file
3. Log the value (console.log(MyComponent)) right before styled(MyComponent) to confirm it's undefined and trace why
4. Fix path casing/typos in the import specifier

Example fix

// before
import { Button } from './button'
export const ButtonStyled = styled(Button)``
// after
import Button from './button'
export const ButtonStyled = styled(Button)``

if (tag === undefined) {
  throw new Error(`styled() received undefined component — check your import of ${name}`)
}
if (typeof tag !== 'string' && typeof tag !== 'function' && typeof tag !== 'object') {
  throw new TypeError('styled() requires a string tag or React component')
}

function isValidStyledTarget(tag: unknown): tag is React.ComponentType<any> | keyof JSX.IntrinsicElements {
  return typeof tag === 'string' || (typeof tag === 'function') || (tag != null && typeof tag === 'object' && '$$typeof' in tag)
}

try {
  const S = styled(Target)``
} catch (e) {
  if (String(e.message).includes('undefined component')) {
    console.error('Import of styled target failed:', Target)
  } else throw e
}

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• css can only be used during render
• cx can only be used during render
• Strings are not allowed as css prop values, please wrap it i
• [ThemeProvider] Please return an object from your theme func
• [ThemeProvider] Please make your theme prop a plain object

AI-assisted analysis of emotion-js/emotion@b882bcba85 (2026-09-02). Data as JSON: /api/errors/21226e82103c6382. Report an issue: GitHub.