emotion-js/emotion · error · Error

noComponentSelectorMessage

Error message

noComponentSelectorMessage

What it means

When an interpolation is a styled component (has __emotion_styles), emotion serializes it into a CSS selector like .css-xxx. Using the literal string 'NO_COMPONENT_SELECTOR' as an interpolation is a placeholder error marker: in development builds it throws to warn that component selectors (e.g. `${StyledButton}` misuse or targeting components by name) aren't supported. The real fix is to use the styled component itself or a class selector.

Source

Thrown at packages/serialize/src/index.ts:191

  'Component selectors can only be used in conjunction with ' +
  '@emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware ' +
  'compiler transform.'

function handleInterpolation(
  mergedProps: unknown | undefined,
  registered: RegisteredCache | undefined,
  interpolation: Interpolation
): string | number {
  if (interpolation == null) {
    return ''
  }
  const componentSelector = interpolation as ComponentSelector
  if (componentSelector.__emotion_styles !== undefined) {
    if (
      isDevelopment &&
      String(componentSelector) === 'NO_COMPONENT_SELECTOR'
    ) {
      throw new Error(noComponentSelectorMessage)
    }
    return componentSelector as unknown as string
  }

  switch (typeof interpolation) {
    case 'boolean': {
      return ''
    }
    case 'object': {
      const keyframes = interpolation as Keyframes
      if (keyframes.anim === 1) {
        cursor = {
          name: keyframes.name,
          styles: keyframes.styles,
          next: cursor
        }

        return keyframes.name

View on GitHub (pinned to b882bcba85)

Solutions

1. Interpolate the actual styled component (e.g. ${StyledButton}) instead of a string name
2. Target elements via a className or the css prop instead of component selectors
3. Clear stale build caches (webpack/babel) that may embed the NO_COMPONENT_SELECTOR sentinel
4. Upgrade @emotion/* packages — newer versions handle component selectors differently

Example fix

// before
css`
  ${'NO_COMPONENT_SELECTOR'} { color: red; }
`

// after
css`
  ${StyledButton} { color: red; }
`

// verify interpolations are real styled components before use
if (typeof C === 'string' && C === 'NO_COMPONENT_SELECTOR') {
  throw new Error('Use the styled component itself, not its name')
}

function isStyledComponent(x) {
  return typeof x === 'function' && x.__emotion_styles !== undefined
}

When it happens

Trigger: In development, interpolating a value whose String() is 'NO_COMPONENT_SELECTOR' inside css``/styled — typically produced by tooling (like the Babel macro or older stylis plugins) that replaces unsupported component selectors with this sentinel string.

Common situations: Trying to compose selectors like `${Component} &` where Component is not a styled component; stale build artifacts or minifiers that replaced a styled component with the sentinel; using component names as selectors after migrating from styled-components.

Related errors

• You seem to be using a value for 'content' without quotes, t
• speedy must be changed before any rules are inserted
• Could not get unrendered element reliably from the Enzyme's
• css can only be used during render
• cx can only be used during render

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