Emotion CSS Prop and Nextjs new JSX runtime - error: pragma and pragmaFrag cannot be set when runtime is automatic

Question

I'm trying to use the CSS Prop of Emotion 11 with Nextjs 10.1 Following the documentation, my .babelrc file is the following:

{
  "presets": [
    [
      "next/babel",
      {
        "preset-react": {
          "runtime": "automatic",
          "importSource": "@emotion/react"
        }
      }
    ]
  ],
  "plugins": ["@emotion/babel-plugin"]
}

An my Nextjs page:

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

export default function testPage() {
  const color = 'darkgreen'
  return (<div
    css={css`
      background-color: hotpink;
      &:hover {
        color: ${color};
      }
    `}
  >
    This has a hotpink background.
  </div>)
}

I get the following error :

pragma and pragmaFrag cannot be set when runtime is automatic.

If I remove the pragma /** @jsx jsx */ I get this in the HTML code:

<div css="You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).">This has a hotpink background.</div>

These are my dependencies:

"dependencies": {
    "@emotion/react": "^11.1.5",
    "@emotion/babel-plugin": "^11.2.0",
    "next": "^10.0.0",
    "react": "17.0.1",
    "react-dom": "17.0.1"
  }

score 53 · Accepted Answer · answered Apr 06 '21 at 12:11

53

The easiest way to solve it was to replace the /** @jsx jsx */ by /** @jsxImportSource @emotion/react */ and I don't even need to import jsx anymore:

/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react"

export default function testPage() {
  const color = 'darkgreen'
  return (<div
    css={css`
      background-color: hotpink;
      &:hover {
        color: ${color};
      }
    `}
  >
    This has a hotpink background.
  </div>)
}

answered Apr 06 '21 at 12:11

alentejo

950
1
4
13

This isn't working for me with latest versions of React and Emotion. (using CRA) – dcclassics Aug 23 '22 at 13:47
Awesome, works first time. Enabled me to remove all sorts of horrific custom config – serlingpa Dec 28 '22 at 14:00

score 8 · Answer 2 · answered Aug 29 '21 at 16:43

8

In my case I added classic jsxrun time

/** @jsxRuntime classic */
/** @jsx jsx */
import { css } from "@emotion/react"

answered Aug 29 '21 at 16:43

Amir Nabaei

1,582
1
15
26

score 2 · Answer 3 · answered Sep 30 '21 at 05:37

2

I realized that I was running with nodejs 12. Just changed node version to 14 using nvm and it worked.

answered Sep 30 '21 at 05:37

LuizAsFight

222
1
7

Emotion CSS Prop and Nextjs new JSX runtime - error: pragma and pragmaFrag cannot be set when runtime is automatic

3 Answers3

Linked