emotion css feature is not rendering the styles (React)

Question

I'm using Webpack 4, Babel 7 and Emotion 10.

I installed @emotion/core, @emotion/styled, and the recommended plugin babel-plugin-emotion.

styled is working properly. I can create a styled component and use it. However, if I try to use the native css`` feature it renders the object but not the styles.

import { css, jsx } from '@emotion/core';

const bold = css`
  font-weight: 'bold';
`;

render(
...
<div css={bold}>Something!</div>
...
)

If I inspect the markup, I see:

<div css="[object Object]">Something!</div>

If I use className instead of css, is the same. Also if I do it inline or if I use the css() feature.

And If I console.log() that Object the result is:

{
  "name": "15b6lyx-bold",
  "styles": "font-weight:'bold';label:bold;",
  "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkM6XFxwcmFjdGljZVxcbm9jcmFcXHNyY1xcQXBwLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFCZ0IiLCJmaWxlIjoiQzpcXHByYWN0aWNlXFxub2NyYVxcc3JjXFxBcHAuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgQ29tcG9uZW50IH0gZnJvbSAncmVhY3QnO1xyXG5pbXBvcnQgeyBjb25uZWN0IH0gZnJvbSAncmVhY3QtcmVkdXgnO1xyXG5cclxuaW1wb3J0IHsgZmV0Y2hDb21tZW50cyB9IGZyb20gJy4vYWN0aW9ucyc7XHJcbmltcG9ydCB7IGNzcywganN4IH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XHJcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuXHJcbmltcG9ydCBzdHlsZXMgZnJvbSAnLi9BcHAuY3NzJztcclxuaW1wb3J0IGNzc0luSnMgZnJvbSAnLi9BcHAuY3NzLmpzJztcclxuXHJcbmltcG9ydCByUEkgZnJvbSAnLi9pbWFnZXMvclBJLTQwMHg0MDAuanBnJztcclxuXHJcbmNvbnN0IENvbW1lbnRzQm94ID0gc3R5bGVkKCdkaXYnKWBcclxuICBiYWNrZ3JvdW5kLWNvbG9yOiBsYXZlbmRlcjtcclxuYDtcclxuXHJcbmNvbnN0IGxpc3RJdGVtID0gY3NzYFxyXG4gIGxpc3Qtc3R5bGU6IG5vbmU7XHJcbiAgcGFkZGluZzogMDtcclxuYDtcclxuXHJcbmNvbnN0IGJvbGQgPSBjc3NgXHJcbiAgZm9udC13ZWlnaHQ6ICdib2xkJztcclxuYDtcclxuXHJcbmNsYXNzIEFwcCBleHRlbmRzIENvbXBvbmVudCB7XHJcbiAgY29tcG9uZW50RGlkTW91bnQoKSB7XHJcbiAgICB0aGlzLnByb3BzLmZldGNoQ29tbWVudHMoKTtcclxuICB9XHJcblxyXG4gIHJlbmRlckNvbW1lbnRzID0gKCkgPT4ge1xyXG4gICAgcmV0dXJuIHRoaXMucHJvcHMuY29tbWVudHMubWFwKGNvbW1lbnQgPT4ge1xyXG4gICAgICByZXR1cm4gPGxpIGtleT17Y29tbWVudC5pZH0+e2NvbW1lbnQubmFtZX08L2xpPjtcclxuICAgIH0pO1xyXG4gIH07XHJcblxyXG4gIHJlbmRlcigpIHtcclxuICAgIHJldHVybiAoXHJcbiAgICAgIDxkaXY+XHJcbiAgICAgICAgPGgxIHN0eWxlPXtjc3NJbkpzLnNlY3Rpb25UaXRsZX0+TGlzdCBvZiBjb21tZW50cyAxMDE8L2gxPlxyXG4gICAgICAgIDxDb21tZW50c0JveD57dGhpcy5yZW5kZXJDb21tZW50cygpfTwvQ29tbWVudHNCb3g+XHJcbiAgICAgICAgPGltZyBzcmM9e3JQSX0gYWx0PVwiUmFzcC4gUGkgTG9nb1wiIGNsYXNzTmFtZT17c3R5bGVzLnJQaX0gLz5cclxuICAgICAgICA8ZGl2IGNzcz17Y29uc29sZS5sb2coYm9sZCl9PlNvbWV0aGluZyE8L2Rpdj5cclxuICAgICAgPC9kaXY+XHJcbiAgICApO1xyXG4gIH1cclxufVxyXG5cclxuY29uc3QgbWFwU3RhdGVUb1Byb3BzID0gKHsgY29tbWVudHMgfSkgPT4ge1xyXG4gIHJldHVybiB7XHJcbiAgICBjb21tZW50c1xyXG4gIH07XHJcbn07XHJcblxyXG5leHBvcnQgZGVmYXVsdCBjb25uZWN0KG1hcFN0YXRlVG9Qcm9wcywgeyBmZXRjaENvbW1lbnRzIH0pKEFwcCk7XHJcbiJdfQ== */"
}

Does anybody know what's going wrong?

Optimize

Answer 1

You might end up with class="[object Object]" in div element. If that is all your codes, you should add JSX pragma /** @jsx jsx */ thing on top before jsx module

/** @jsx jsx */
import { css, jsx } from '@emotion/core'

...

and no single quote at 'bold', it is not valid css writing style

https://emotion.sh/docs/css-prop

Pinnatiped

Thank you. You should add /** @jsx jsx */ – Reprobative

Answer 2

you should add JSX pragma the top of the module like this:

/** @jsx jsx */

pragma might not work and you should use

 /** @jsxImportSource @emotion/react */

instead.

Theodor

your worked but I try this doesn't work: "presets": [ [ "@babel/preset-react", { "runtime": "automatic", "importSource": "@emotion/react" } ] ] – Tetrapody

Answer 3

You need to make sure you have the JSX pragma compiler directive specified at the top of your file:

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@emotion/react'

See this tutorial for more info.

Verada

Answer 4

with create-react-app using @emotion/react 11, React 18, and Typescript 4.4, I was initially just getting css="[object Object]" in the DOM. Using the jsxImportSource pragma worked for me, but I did not want to add it to every file, so adding this to tsconfig.json instead worked for me:

// tsconfig.json
"compilerOptions": {
  ...,
  "jsxImportSource": "@emotion/react"
}

Just a few days layer I also ran into this exact same issue using rollup + esbuild (rollup-plugin-esbuild), and this solved it for me

esbuild({
  ...
  jsx: 'automatic',
  jsxImportSource: '@emotion/react',
}),

Gustavogustavus

Answer 5

Different front-end tooling provides various ways to transform JSX. Sometimes you need to provide an explicit way for the tool to handle the JSX. My problem was when using Vite. You can add a custom plugin in your plugins section in your vite.config.ts handle the jsxImportSource problem:

Add this as the first plugin in your plugins array:

    {
      name: 'add-emotion-jsx-pragma',
      enforce: 'pre',
      transform(code: string, id: string): TransformResult | null {
        if (/\.[jt]sx?$/.test(id)) {
          return {
            code: `/** @jsxImportSource @emotion/react */\n${code}`,
            map: null,
          };
        }
        return null;
      },
    },

Note, like others mentioned - you still need to add the following to your tsconfig

// tsconfig.json
"compilerOptions": {
  ...,
  "jsxImportSource": "@emotion/react"
}

Margalo