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.