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

[philp]

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

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

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

3. Run:

$ yarn start

Expected behavior:

It should compile.

Environment information:

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

[mverissimo]

You need to add the JSX runtime directive to force the classic runtime or use this approach

Try this:

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

[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";

[marcselman]

Is using /** @jsxImportSource @emotion/react */ the correct way and should the docs be updated or will a future release fix this?

[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: #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:
facebook/create-react-app#9847
babel/babel#12542

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

[toffalori]

Is there any way to enable this line globally so you don't have to add it to each file individually?

Something like this solution for next.js adding it to the next-env.d.ts file?

https://pretagteam.com/question/what-is-the-proper-way-to-enable-the-css-prop-in-emotion-11next-js-10-apps

[Andarist]

@toffalori it depends on the tools that you are using. If your tools allow customization of configs etc it should be possible to configure them to do this automatically.

[srmagura]

Closing in favor of #2662 since this issue is about configuring Emotion in Create React App.

In the latest CRA, you just add /** @jsxImportSource @emotion/react */. You can see this in action in our CodeSandbox.

We do need to improve our documentation in this area, hence the existence of #2662.