{"record":{"id":"dc7d95f86d763d96","repo":"emotion-js/emotion","slug":"nocomponentselectormessage","errorCode":null,"errorMessage":"noComponentSelectorMessage","messagePattern":"noComponentSelectorMessage","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/serialize/src/index.ts","lineNumber":191,"sourceCode":"  'Component selectors can only be used in conjunction with ' +\n  '@emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware ' +\n  'compiler transform.'\n\nfunction handleInterpolation(\n  mergedProps: unknown | undefined,\n  registered: RegisteredCache | undefined,\n  interpolation: Interpolation\n): string | number {\n  if (interpolation == null) {\n    return ''\n  }\n  const componentSelector = interpolation as ComponentSelector\n  if (componentSelector.__emotion_styles !== undefined) {\n    if (\n      isDevelopment &&\n      String(componentSelector) === 'NO_COMPONENT_SELECTOR'\n    ) {\n      throw new Error(noComponentSelectorMessage)\n    }\n    return componentSelector as unknown as string\n  }\n\n  switch (typeof interpolation) {\n    case 'boolean': {\n      return ''\n    }\n    case 'object': {\n      const keyframes = interpolation as Keyframes\n      if (keyframes.anim === 1) {\n        cursor = {\n          name: keyframes.name,\n          styles: keyframes.styles,\n          next: cursor\n        }\n\n        return keyframes.name","sourceCodeStart":173,"sourceCodeEnd":209,"githubUrl":"https://github.com/emotion-js/emotion/blob/b882bcba85132554992e4bd49e94c95939bbf810/packages/serialize/src/index.ts#L173-L209","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Interpolate the actual styled component (e.g. ${StyledButton}) instead of a string name","Target elements via a className or the css prop instead of component selectors","Clear stale build caches (webpack/babel) that may embed the NO_COMPONENT_SELECTOR sentinel","Upgrade @emotion/* packages — newer versions handle component selectors differently"],"exampleFix":"// before\ncss`\n  ${'NO_COMPONENT_SELECTOR'} { color: red; }\n`\n\n// after\ncss`\n  ${StyledButton} { color: red; }\n`","handlingStrategy":"type-guard","validationCode":"// verify interpolations are real styled components before use\nif (typeof C === 'string' && C === 'NO_COMPONENT_SELECTOR') {\n  throw new Error('Use the styled component itself, not its name')\n}","typeGuard":"function isStyledComponent(x) {\n  return typeof x === 'function' && x.__emotion_styles !== undefined\n}","tryCatchPattern":null,"preventionTips":["Only interpolate components created by styled/css into selectors","Never hardcode or copy the NO_COMPONENT_SELECTOR sentinel","Clear build caches when migrating emotion versions"],"tags":["css","component-selector","development","serialization"],"backgroundTag":"unsupported-component-selector","analyzedSha":"b882bcba85132554992e4bd49e94c95939bbf810","analyzedAt":"2026-09-02T22:27:13.739Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}