emotion-js/emotion · error · Error

There is no transformer for the export '${exportName}' in '$

Error message

There is no transformer for the export '${exportName}' in '${packageName}'

What it means

@emotion/babel-plugin only knows how to transform exports registered for known packages (like @emotion/react's jsx, css, etc.). When it encounters an import of an export from a package that has no registered transformer, it throws rather than silently mis-transforming styled code.

Source

Thrown at packages/babel-plugin/src/index.js:190

        state.jsxReactImport = jsxReactImports[0]
        Object.keys(state.opts.importMap || {}).forEach(importSource => {
          let value = state.opts.importMap[importSource]
          let transformers = {}
          Object.keys(value).forEach(localExportName => {
            let { canonicalImport, ...options } = value[localExportName]
            let [packageName, exportName] = canonicalImport
            if (packageName === '@emotion/react' && exportName === 'jsx') {
              jsxReactImports.push({
                importSource,
                export: localExportName,
                cssExport: getCssExport('jsx', importSource, value)
              })
              return
            }
            let packageTransformers = transformersSource[packageName]

            if (packageTransformers === undefined) {
              throw new Error(
                `There is no transformer for the export '${exportName}' in '${packageName}'`
              )
            }

            let extraOptions

            if (packageName === '@emotion/react' && exportName === 'Global') {
              // this option is not supposed to be set in importMap
              extraOptions = {
                cssExport: getCssExport('Global', importSource, value)
              }
            } else if (
              packageName === '@emotion/styled' &&
              exportName === 'default'
            ) {
              // this is supposed to override defaultOptions value
              // and let correct value to be set if coming in options
              extraOptions = {

View on GitHub (pinned to b882bcba85)

Solutions

Fix the import to a supported export (jsx, css, keyframes, Global, etc. from @emotion/react)
Check spelling of the imported export name
If importing a custom module, verify your importMap maps that export to a canonical @emotion/react export
If the import isn't emotion-related, adjust plugin config (importMap) so it isn't treated as an emotion export

Example fix

// before
import { Css } from '@emotion/react'
// after
import { css } from '@emotion/react'

Defensive patterns

Strategy: validation

Validate before calling

const SUPPORTED = new Set(['jsx', 'css', 'keyframes', 'Global', 'ClassNames', 'withEmotionCache', 'useTheme', 'createElement']);
const name = 'Css';
if (!SUPPORTED.has(name)) throw new Error(`Unknown emotion export: ${name}`);

Prevention

Verify import names against @emotion/react's public API before using them
Let TypeScript catch bad named imports at compile time
Don't extend emotion packages with custom re-exports unless mapped via importMap

When it happens

Trigger: Importing an export (e.g. `import { thing } from '@emotion/react'` where `thing` isn't a supported export) that gets passed through the plugin's mapping logic and has no transformer registered in transformersSource.

Common situations: Importing nonexistent or non-emotion exports from emotion packages, mistyping an export name, or using an importMap pointing at packages the plugin doesn't handle.

Related errors

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