emotion-js/emotion · error · Error

The `runtime` option has been removed. If you want to config

Error message

The `runtime` option has been removed. If you want to configure `runtime: "automatic"`, replace `@emotion/babel-preset-css-prop` with `@babel/preset-react` and `@emotion/babel-plugin`. You can find out how to configure things properly here: https://emotion.sh/docs/css-prop#babel-preset

What it means

@emotion/babel-preset-css-prop previously accepted a `runtime` option, which has been removed. The preset now throws immediately if `runtime` is present, directing users to use @babel/preset-react with @emotion/babel-plugin for the automatic runtime instead.

Source

Thrown at packages/babel-preset-css-prop/src/index.js:17

import jsx from '@babel/plugin-transform-react-jsx'
import pragmatic from '@emotion/babel-plugin-jsx-pragmatic'
import emotion from '@emotion/babel-plugin'

let pragmaName = '___EmotionJSX'

// pull out the emotion options and pass everything else to the jsx transformer
// this means if @babel/plugin-transform-react-jsx adds more options, it'll just work
// and if @emotion/babel-plugin adds more options we can add them since this lives in
// the same repo as @emotion/babel-plugin

export default (
  api,
  { pragma, sourceMap, autoLabel, labelFormat, importMap, ...options } = {}
) => {
  if (options.runtime) {
    throw new Error(
      'The `runtime` option has been removed. If you want to configure `runtime: "automatic"`, replace `@emotion/babel-preset-css-prop` with `@babel/preset-react` and `@emotion/babel-plugin`. You can find out how to configure things properly here: https://emotion.sh/docs/css-prop#babel-preset'
    )
  }

  return {
    plugins: [
      [
        pragmatic,
        {
          export: 'jsx',
          module: '@emotion/react',
          import: pragmaName
        }
      ],
      [
        jsx,
        {
          pragma: pragmaName,

View on GitHub (pinned to b882bcba85)

Solutions

1. Remove the `runtime` option from the preset config
2. Replace @emotion/babel-preset-css-prop with ['@babel/preset-react', { runtime: 'automatic' }] plus '@emotion/babel-plugin'
3. Follow https://emotion.sh/docs/css-prop#babel-preset for the current preset configuration

Example fix

// before
presets: ['@emotion/babel-preset-css-prop'] // with { runtime: 'automatic' }
// after
presets: [['@babel/preset-react', { runtime: 'automatic' }]],
plugins: ['@emotion/babel-plugin']

const presetOptions = { pragma, sourceMap, autoLabel, labelFormat, importMap };
if ('runtime' in presetOptions) throw new Error('runtime option removed from @emotion/babel-preset-css-prop');

const isValidPresetOpts = (o) => o == null || !('runtime' in o);

When it happens

Trigger: Passing { runtime: 'automatic' } (or any truthy runtime value) to @emotion/babel-preset-css-prop in babel presets array, typically copied from React 17 automatic-JSX-runtime migration guides.

Common situations: Upgrading emotion after migrating to React 17/18's automatic JSX runtime while keeping the old preset options, or following outdated docs.

Related errors

• @emotion/babel-plugin-jsx-pragmatic: You must specify `modul
• You have specified that '${importSource}' re-exports '${reex
• The 'autoLabel' option must be undefined, or one of the foll
• 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/6d682260b0876f01. Report an issue: GitHub.