Setting up a basic React/Emotion project results in Exception: pragma and pragmaFrag cannot be set

Current behavior:

First time attempting to use Emotion with React, first created an app using Create React App, then added @emotion/react as a dependency. Finally, followed docs to include:

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

Result is an exception at compile time:

./src/App.js
SyntaxError: <project_root>/src/App.js: pragma and pragmaFrag cannot be set when runtime is automatic.

Sample repo can be found here: https://github.com/feefhq/react-emotion-baseline

To reproduce:

1. Setup a project:

$ npx create-react-app react-emotion-baseline
$ cd react-emotion-baseline
$ yarn add @emotion/react

1. Then, add the following to the top of src/App.js (as per introduction docs:

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

1. Run:

$ yarn start

Expected behavior:

It should compile.

Environment information:

• react version: ^17.0.2
• @emotion/react version: ^11.4.0

[Andarist]

If you are using Emotion 11 then yes - IIRC /** @jsxImportSource @emotion/react */ is the correct way to use this. An improvement to our ESLint plugin has just been merged: https://github.com/emotion-js/emotion/pull/2353 so you could soon use it to automate this in your codebase. Note that I’ve been trying to improve this and related issues: https://github.com/facebook/create-react-app/issues/9847 https://github.com/babel/babel/pull/12542

Unfortunately, those PRs/issues got stale and there is nothing happening in those directions.

[agiledots]

Create React App 4 then /** @jsx jsx */ pragma might not work and you should use /** @jsxImportSource @emotion/react */ instead.

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