DEV Community

Cover image for Migrating to React 17 and Fixing the JSX Runtime Error with Emotion
Segun Adebayo
Segun Adebayo

Posted on

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 {
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

Solution 2

Change the jsx pragma

🔗 Reference

- /**@jsx jsx */
+ /** @jsxImportSource @emotion/core */
Enter fullscreen mode Exit fullscreen mode

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"]
}
Enter fullscreen mode Exit fullscreen mode

🔗 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.

Discussion (2)

Collapse
troelsagergaard profile image
Troels Agergaard • Edited

@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

Collapse
wucun profile image
wucun

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