DEV Community

Cover image for Migrating React 17 & Emotion 11: "pragma and pragmaFrag cannot be set when runtime is automatic."
Arisa Fukuzaki
Arisa Fukuzaki

Posted on

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

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😑

gif

pragma and pragmaFrag cannot be set when runtime is automatic.

> 1 | /**@jsx jsx */
    | ^
  2 | import {
Enter fullscreen mode Exit fullscreen mode

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

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

Results in a browser

Alt Text

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.

Strongly recommend you to check their GitHub repo too!

Sources:

Top comments (7)

Collapse
 
n0f3 profile image
Alessandro Metta

Thank you this saved me!

Collapse
 
arisa_dev profile image
Arisa Fukuzaki

Glad to be your help✨

Collapse
 
samby_mahapatra profile image
Sambit Mahapatra

Dope. Worked for me

Collapse
 
arisa_dev profile image
Arisa Fukuzaki

Great! 🎉

Collapse
 
oldbrazil profile image
olivier HERGAULT

Thank you, saved my day!

Collapse
 
arisa_dev profile image
Arisa Fukuzaki

Happy to hear that👍!

Collapse
 
ricardo_flixgomez_f653d profile image
Ricardo Félix Gomez

I created an account here, just to follow you.