Migrating React 17 & Emotion 11: "pragma and pragmaFrag cannot be set when runtime is automatic."

#react #emotion

Hi there!

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

I'm developing Lilac, 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😑

pragma and pragmaFrag cannot be set when runtime is automatic.

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

Here is my environment.

{
  "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.

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

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

Example

/** @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;