{"id":19048,"library":"babel-plugin-emotion","title":"@emotion/babel-plugin","description":"A Babel plugin for Emotion, the CSS-in-JS library, that enables automatic JSX pragma, source maps, and minification of styles. The current stable version is 11.14.0 (last updated late 2024). It is released regularly alongside the main Emotion monorepo. Unlike the older `babel-plugin-emotion` (v10), this package is scoped under `@emotion` and requires Babel 7+. Key differentiator: it is the recommended plugin for Emotion v11+, providing optimizations like label generation and dead code elimination.","status":"active","version":"11.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-emotion","tags":["javascript","styles","emotion","react","css","css-in-js"],"install":[{"cmd":"npm install babel-plugin-emotion","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-emotion","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-emotion","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used internally for JSX pragma, must be installed for automatic JSX runtime.","package":"@emotion/babel-plugin-jsx-pragmatic","optional":false}],"imports":[{"note":"In v10 the package was named `babel-plugin-emotion`, in v11+ it is `@emotion/babel-plugin`. Use the scoped name.","wrong":"module.exports = { presets: ['babel-plugin-emotion'] }","symbol":"@emotion/babel-plugin","correct":"module.exports = { presets: ['@emotion/babel-plugin'] }"},{"note":"The old package `babel-plugin-emotion` only goes up to v10. The v11 version is `@emotion/babel-plugin`.","wrong":"npm install babel-plugin-emotion@11","symbol":"babel-plugin-emotion","correct":"npm install @emotion/babel-plugin@11"},{"note":"In babel config, use the string `\"@emotion\"` as plugin name for v11+.","wrong":"{\n  \"plugins\": [\"babel-plugin-emotion\"]\n}","symbol":"config for Babel","correct":"{\n  \"plugins\": [\"@emotion\"]\n}"}],"quickstart":{"code":"// Install: npm install --save-dev @emotion/babel-plugin\n// .babelrc\n{\n  \"presets\": [\n    [\"@babel/preset-react\", { \"runtime\": \"automatic\" }]\n  ],\n  \"plugins\": [\"@emotion\"]\n}\n\n// Component\nimport { css } from '@emotion/react'\nconst style = css`\n  color: hotpink;\n`\nfunction App() {\n  return <div css={style}>Hello Emotion</div>\n}","lang":"javascript","description":"Shows Babel config with @emotion plugin and basic styled component using css prop."},"warnings":[{"fix":"Replace all references from 'babel-plugin-emotion' to '@emotion/babel-plugin'.","message":"The package was renamed from `babel-plugin-emotion` to `@emotion/babel-plugin` in v11. Old imports will not work.","severity":"breaking","affected_versions":">=11.0.0"},{"fix":"Consult the new options documentation. Common options like `sourceMap` and `autoLabel` are still supported but need to be passed differently.","message":"Options API changed between v10 and v11. For example, `sourceMap` option is now under `@emotion/babel-plugin` options.","severity":"breaking","affected_versions":">=11.0.0"},{"fix":"Update to Babel 7 or later. The package `@emotion/babel-plugin` does not support Babel 6.","message":"The plugin requires Babel 7+. Using with older Babel versions will fail.","severity":"gotcha","affected_versions":">=11.0.0"},{"fix":"Use `autoLabel: true` or `autoLabel: 'dev-only'` instead of `labelFormat`.","message":"The `labelFormat` option is deprecated in favor of `autoLabel`.","severity":"deprecated","affected_versions":">=11.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install --save-dev @emotion/babel-plugin` and ensure config uses the scoped name.","cause":"Package not installed or wrong name used in config.","error":"Error: Cannot find module '@emotion/babel-plugin'"},{"fix":"Install `@babel/plugin-proposal-class-properties` or use the `@babel/preset-env` preset.","cause":"Missing Babel plugins for modern JavaScript syntax.","error":"Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: ... Support for the experimental syntax 'classProperties' isn't currently enabled"},{"fix":"Set `runtime: 'automatic'` in `@babel/preset-react` options.","cause":"Babel preset-react runtime mismatch.","error":"Warning: You are using the automatic JSX runtime with Emotion's babel plugin. If you don't..."},{"fix":"Either add `import React from 'react'` in every file or use the automatic runtime with `@babel/preset-react`.","cause":"Missing import of React when using JSX without automatic runtime.","error":"TypeError: Cannot read properties of undefined (reading 'createElement')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}