10.0.7 not working with Create React App

• emotion version: 10.0.7
• react version: 16.8.1

Relevant code:

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

const CloseButton = ({ onClick, children }) => (
  <button css={css`
      background: red;
   `}
   onClick={() => onClick()}>
    { children }
  </button>
)

What you did:

1. Created a new project with Create React App.
2. Installed Emotion
3. Tried to use css

What happened: It renders [object Object]:

<button class="[object Object]">Close</button>

Reproduction: https://codesandbox.io/s/7k11o3q1q1

Problem description: I may be missing something here… Every example I find in the docs makes it seem this simple, but I can’t seem to get it working with CRA. See example (https://codesandbox.io/s/7k11o3q1q1). Maybe an issue with CRA’s implementation of babel, and the dependencies of emotion?

Suggested solution: It’d be nice to get an error instead of just [object Object].

[km860]

Is there a better way to utilize emotion in CRA that doesn’t require using that comment in any component that you need to use emotion in?

Not according to the docs (https://emotion.sh/docs/css-prop). 😞

[km860]

You have to add this code snippet (from: https://emotion.sh/docs/install) at the top before you import, /** @jsx jsx */