jsxImportSource not working on cra

[testerez]

Current behavior:

I followed the Typescript instructions to add emotion to a fresh create-react-app project: testerez/cra-ts-emotion@086cc35

But when I try to use css prop in any way:

<div>
  <div css={{ color: "red" }}>Hello!</div>
  <div css={css({ color: "red" })}>Hello!</div>
  <div
    css={css`
      color: red;
    `}
  >
    Hello!
  </div>
</div>

Here is the result I get:

<div>
  <div css="[object Object]">Hello!</div>
  <div
    css="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)."
  >
    Hello!
  </div>
  <div
    css="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)."
  >
    Hello!
  </div>
</div>

Did I miss something?

To reproduce:

1. checkout this sample project https://github.com/testerez/cra-ts-emotion
2. run npm i && npm run start

Expected behavior:

I would expect the css prop to work with this setup.

Environment information:

• react version: 18.1.0
• @emotion/react version: 11.9.0

[Andarist]

IIRC you need to use an explicit pragma in CRA, see this issue: facebook/create-react-app#9847

[srmagura]

Yes, you need to add /** @jsxImportSource @emotion/react */ to the top of every file where you use the css prop.

Sorry for the confusion — this is an area where we need to improve our documentation (documentation issue here: #2662).

[testerez]

Thanks @Andarist and @srmagura , It would be nice if CRA could respect jsxImportSource in tsconfig. It's a bit annoying to have to remember to add this comment on each new file.
I guess I could alternatively use react-app-rewired to setup the emotion babel plugin.