emotion-js/emotion · error · Error

You have specified that '${importSource}' re-exports '${reex

Error message

You have specified that '${importSource}' re-exports '${reexported}' from '@emotion/react' but it doesn't also re-export 'css' from '@emotion/react', 'css' is necessary for certain optimisations, please re-export it from '${importSource}'

What it means

When you configure @emotion/babel-plugin's `importMap` to point at a module that re-exports `jsx` (or other @emotion/react exports), that module must also re-export `css` from @emotion/react. The `css` export is required for label/optimization rewriting, so the plugin validates it when building the export mapping and throws if absent.

Source

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

  createEmotionMacro,
  transformers as vanillaTransformers
} from './emotion-macro'
import { createStyledMacro, styledTransformer } from './styled-macro'
import coreMacro, {
  transformers as coreTransformers,
  transformCsslessArrayExpression,
  transformCsslessObjectExpression
} from './core-macro'
import { getStyledOptions, createTransformerMacro } from './utils'

const getCssExport = (reexported, importSource, mapping) => {
  const cssExport = Object.keys(mapping).find(localExportName => {
    const [packageName, exportName] = mapping[localExportName].canonicalImport
    return packageName === '@emotion/react' && exportName === 'css'
  })

  if (!cssExport) {
    throw new Error(
      `You have specified that '${importSource}' re-exports '${reexported}' from '@emotion/react' but it doesn't also re-export 'css' from '@emotion/react', 'css' is necessary for certain optimisations, please re-export it from '${importSource}'`
    )
  }

  return cssExport
}

let webStyledMacro = createStyledMacro({
  importSource: '@emotion/styled/base',
  originalImportSource: '@emotion/styled',
  isWeb: true
})
let nativeStyledMacro = createStyledMacro({
  importSource: '@emotion/native',
  originalImportSource: '@emotion/native',
  isWeb: false
})
let primitivesStyledMacro = createStyledMacro({

View on GitHub (pinned to b882bcba85)

Solutions

1. Add `export { css } from '@emotion/react'` to the module listed in your importMap
2. Add a css entry to the importMap mapping (e.g. css: { canonicalImport: ['@emotion/react','css'] }) if it's already exported under a different name
3. Remove the importMap entry if you don't need a custom re-export module

Example fix

// before (my-emotion.ts)
export { jsx } from '@emotion/react'
// after
export { jsx, css } from '@emotion/react'

// in the re-export module, before using it as an importMap target
export { jsx, css } from '@emotion/react';
// sanity check in a test:
import * as m from './my-emotion';
if (!m.css) throw new Error('importMap target must re-export css from @emotion/react');

const exportsCss = (mod) => typeof mod === 'object' && mod !== null && typeof mod.css === 'function';

When it happens

Trigger: Passing an `importMap` entry like { './my-emotion': { jsx: { canonicalImport: ['@emotion/react','jsx'] } } } where the module re-exports jsx but not css from @emotion/react.

Common situations: Creating a custom barrel module that cherry-picks exports, or upgrading the emotion babel plugin after adding an importMap that predates the css requirement.

Related errors

• @emotion/babel-plugin-jsx-pragmatic: You must specify `modul
• The 'autoLabel' option must be undefined, or one of the foll
• The `runtime` option has been removed. If you want to config
• There is no transformer for the export '${exportName}' in '$
• You have to configure `key` for your cache. Please make sure

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