22

This is my code

import { css, jsx } from '@emotion/core'
       
return (
       <>
       <img css={css`height: 200px; height: 200px;`} fluid={image.sharp.fluid} />
       <List>
           <li>Our Clients</li>
           <li>What We Do</li>
           <li>Contact</li>
       </List>
       </>
   )

This is the error I'm getting

You have tried to stringify object returned from css function. It isn't supposed to be used directly (e.g. as value of the className prop), but rather handed to emotion so it can handle it (e.g. as value of css prop).

This error seems to be telling me that I need to do what I am already doing? Or am I missing something here.

Ahmet Emre Kilinc
  • 5,489
  • 12
  • 30
  • 42
Tom Hanks
  • 594
  • 1
  • 5
  • 21

7 Answers7

28

Just wanted to note I had this issue and adding this fixed the error for me:

/** @jsx jsx */
import { jsx } from '@emotion/core';

Just to clarify, you have to add /** @jsx jsx */; at the top of the file.

coreyward
  • 77,547
  • 20
  • 137
  • 166
Farrukh Malik
  • 746
  • 9
  • 13
  • Thanks. I think this should highlight in the emotion documentation too – Sameera K Oct 21 '20 at 08:35
  • This is highlighted in the emotion docs now under the Typescript section. Note that it precludes you from using <>> shorthand. You can still use Fragment https://emotion.sh/docs/typescript – shallow.alchemy Mar 25 '21 at 01:56
  • 1
    @shallow.alchemy What if we're not using typescript ? – Monstar Jul 21 '22 at 15:37
  • 1
    Thanks this saved me a lot of messing around i thought that was a comment! I found this updated version: /** @jsxImportSource @emotion/react */ – cowley05 Aug 30 '22 at 12:53
20

This method solved my problem:

/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react"

export default function somepage() {

  const color = 'red'

  return (<div
    css={css`
      background-color: hotpink;
      &:hover {
        color: ${color};
      }
    `}
  >
    Hello World.
  </div>)
}
adelbbj
  • 241
  • 2
  • 4
  • What does it do ? – Monstar Jul 21 '22 at 15:35
  • 2
    @Monstar read this: [https://emotion.sh/docs/css-prop#jsx-pragma](https://emotion.sh/docs/css-prop#jsx-pragma) – adelbbj Jul 23 '22 at 05:38
  • 2
    This worked for me! From that link above: `If you are using a zero-config tool with automatic detection of which runtime (classic vs. automatic) should be used and you are already using a React version that has the new JSX runtimes (hence runtime: 'automatic' being configured automatically for you) such as Create React App 4 then /** @jsx jsx */ pragma might not work and you should use /** @jsxImportSource @emotion/react */ instead.` – dmikester1 Aug 24 '22 at 15:58
17

As detailed in the Emotion documentation, use of the css prop requires you to replace React with jsx as the target function for JSX elements (known as the “pragma”), which will enable Emotion to intercept the css prop and transform it into a className prop for React.

For example:

<p>Hi</p>

// Becomes the following by default:
React.createElement("p", {}, "Hi")

// But with the `jsx` pragma, it becomes:
jsx("p", {}, "Hi")

There are two outlined approaches to achieve this. You only need to select one. If you are able to configure Babel in your application, the first is the recommended approach, but either one works fine:

  1. Install a Babel plugin that will configure jsx as the default handler for all code in your app

    The most direct way to do this is by adding the relevant Babel preset to your Babel configuration like so:

    // Option 1A — Good
    // Add @emotion/babel-preset-css-prop to your dev dependencies, then
    // add the preset to your .babelrc configuration:
    
    {
      "presets": ["@emotion/babel-preset-css-prop"]
    }
    

    If you are able to do this, though, I recommend instead configuring babel-plugin-emotion, which includes the css prop configuration as well other features like minification, dead code elimination, and hoisting:

    // Option 1B — Better
    // Add babel-plugin-emotion to your dev dependencies, then add
    // the plugin to your Babel configuration (e.g. .babelrc)
    {
      "plugins": ["emotion"]
    }
    
  2. Import the jsx function from Emotion and instruct Babel to use this imported function on a per-file basis using pragma

    /** @jsx jsx */
    import { jsx } from '@emotion/core'
    
Ramin Firooz
  • 506
  • 8
  • 25
coreyward
  • 77,547
  • 20
  • 137
  • 166
  • 2
    In my case after following your suggestion I was encountering **[this]( https://stackoverflow.com/questions/66965774/emotion-css-prop-and-nextjs-new-jsx-runtime-error-pragma-and-pragmafrag-canno) problem and replacing step 2 with`/** @jsxImportSource @emotion/react */` fixed it. – Abhik Banerjee Oct 27 '21 at 20:13
3

You need to install this babel plugin, babel-preset-css-prop

Lalit Yadav
  • 889
  • 9
  • 16
3

In addition to include the @emotion/babel-plugin, there was some configuration that I have missed that created that error.

{
  "presets": [
    [
      "@babel/preset-react",
      { "runtime": "automatic", "importSource": "@emotion/react" }
    ]
  ],
  "plugins": ["@emotion/babel-plugin"]
}

The "importSource": "@emotion/react" was missing. After adding it, the error was gone and the styles were implemented correc5y.

elpddev
  • 4,314
  • 4
  • 26
  • 47
2

There are 2 ways to get started with the css prop.

  1. Babel Preset
  2. JSX Pragma

Both methods result in the same compiled code.


JSX Pragma

Set the jsx pragma at the top of your source file that uses the css prop. This option works best for testing out the css prop feature or in projects where the babel configuration is not configurable (create-react-app, codesandbox, etc.).

/** @jsx jsx */

if it didn't work use:

/** @jsxImportSource @emotion/react */

Babel Preset

This method will not work with Create React App or other projects that do not allow custom Babel configurations. Use the JSX Pragma method instead.

.babelrc

{
  "presets": ["@emotion/babel-preset-css-prop"]
}

Couldn't solve your problem? Consider reading official documentation: https://emotion.sh/docs/css-prop

ARiyou Jahan
  • 622
  • 6
  • 7
-6

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

  • 6
    Welcome to Stack Overflow. Code-only answers are discouraged on Stack Overflow because they don't explain how it solves the problem. Please edit your answer to explain what the code does and how it answers the question, so that it is also useful for other users with similar a problem, as well as the OP. Also, please format your code correctly. – Greenonline Aug 03 '20 at 01:37