Migrating to React 17 and Fixing the JSX Runtime Error with Emotion

If you use Emotion in your project and you're migrating to react 17, you might run into this error if you use the css prop:

pragma and pragmaFrag cannot be set when runtime is automatic.

> 1 | /**@jsx jsx */
    | ^
  2 | import {

This error is due to the new JSX runtime feature introduced by React 17

After researching several solutions, here are some solutions that fix this:

Solution 1

Add another jsx pragma that configures the new jsx runtime to classic mode.

🔗 Reference

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

Solution 2

Change the jsx pragma

🔗 Reference

- /**@jsx jsx */
+ /** @jsxImportSource @emotion/core */

Solution 3

• Remove the jsx pragma /**@jsx jsx*/ from all files
• Install @emotion/babel-preset-css-prop as devDependency
• Upgrade @emotion/core to 10.1.1

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

🔗 Reference

If you find this useful, feel free to like this post and share it.

Cheers!

If you had this issue in your project and managed to solve it a different way, feel free to comment below.

Comments

[Troels Agergaard]

@emotion/core package has been renamed to @emotion/react

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.

Source: emotion.sh/docs/css-prop

[wucun]

This is awesome article! I used both Solution 1 & 3 to solve my headaches.