Migrating React 17 & Emotion 11: "pragma and pragmaFrag cannot be set when runtime is automatic."
Tags: react, emotion
Published: 2021-03-16 03:16:30

Hi there!

I'm Arisa, a freelance Full Stack Developer living in Germany🇩🇪

I'm developing [Lilac](https://note.com/frontendlifeinde/m/m9b8feda1d547), an online school with hands-on Frontend e-books and tutoring👩‍💻

# Who is this article for?

- Anyone migrated React 17 & Emotion 11
- Anyone got depression with the error below

# What was the error?

Oh yea, it was a super stubborn one😑

![gif](https://media.giphy.com/media/Hxvk1oWNaV42Y/giphy.gif)

```javascript
pragma and pragmaFrag cannot be set when runtime is automatic.

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

Here is my environment.

```javascript
{
  "name": "woot-woot",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.1.5",
    "@emotion/styled": "^11.1.5",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "devDependencies": {
    "@emotion/babel-plugin": "^11.2.0"
  }
}
```

- **css prop with String Styles**
- **create-react-app v4.0.3**

To prevent dragging lazy dogs(errors) every time, here is the solution that worked for me👇

# A solution

Instead of just `/** @jsx jsx */` as it's instructed in Emotion's documentation, add this.

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

Without `/** @jsx jsx */` will fail to apply styles.

# Example

```javascript
/** @jsxRuntime classic */
/** @jsx jsx */
import styled from '@emotion/styled';
import { css, jsx } from '@emotion/react'

function App() {
  const color = '#454343';

  const ItemName = styled.h1`
    font-size: 3rem;
  `

  const Description = styled.p`
    font-size: 1.5rem;
  `

  return (
    <div className="App">
      <ItemName css={css`
        color: ${color};
      `}>
        Swag Sticker Pack
      </ItemName>
      <Description css={css`
        color: ${color};
      `}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <br />Sed pharetra consequat diam. In metus risus, aliquam non massa tempus,
        <br />gravida commodo orci. Praesent interdum pharetra quam eu pharetra.
      </Description>

    </div>
  );
}

export default App;
```

#### Results in a browser

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1g2li32go0iqao1exnm4.png)

It still shows a warning of `"'React' is defined but never used"` though, it's because we still need to insert `/** @jsx jsx */`.

Hope you find this blog post helpful 🙌

It still looks like Emotion teams are working on it.

This means could be a change in the very near future to follow up [React New JSX Transform.](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)

Strongly recommend you to check their GitHub repo too!

# Sources:

- [Emotion: Install](https://emotion.sh/docs/install)
- [Emotion 11](https://emotion.sh/docs/emotion-11)
- [The css prop: String Styles](https://emotion.sh/docs/css-prop#string-styles)
- [Syntax error: pragma and pragmaFrag cannot be set when runtime is automatic. #1160](https://github.com/system-ui/theme-ui/issues/1160)