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"
  }

Answer 1

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>)
}

Answer 2

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

Answer 3

In my case I added classic jsxrun time

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