CODEWITHSUNDEEP
reactjsemotioncss-in-js
Peter
Peter

Reputation: 2394

emotion css feature is not rendering the styles (React)

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?

Upvotes: 11

Views: 15047

Answers (5)

Benji
Benji

Reputation: 59

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"
}

Upvotes: 0

Skylar Brown
Skylar Brown

Reputation: 3462

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',
}),

Upvotes: 0

Moffen
Moffen

Reputation: 2003

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.

Upvotes: 2

mohammad barzegar
mohammad barzegar

Reputation: 387

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.

Upvotes: 6

童Michael
童Michael

Reputation: 176

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

Upvotes: 13

Related Questions