title: Emotion CSS Prop and Nextjs new JSX runtime - error: pragma and pragmaFrag cannot be set when runtime is automatic
body: <p>I'm trying to use the CSS Prop of Emotion 11 with Nextjs 10.1
  Following the documentation, my .babelrc file is the following:</p>
  <pre class="lang-js prettyprint-override"><code>{
    &quot;presets&quot;: [
      [
        &quot;next/babel&quot;,
        {
          &quot;preset-react&quot;: {
            &quot;runtime&quot;: &quot;automatic&quot;,
            &quot;importSource&quot;: &quot;@emotion/react&quot;
          }
        }
      ]
    ],
    &quot;plugins&quot;: [&quot;@emotion/babel-plugin&quot;]
  }
  </code></pre>
  <p>An my Nextjs page:</p>
  <pre class="lang-js prettyprint-override"><code>/** @jsx jsx */
  import { css, jsx } from '@emotion/react'
  
  export default function testPage() {
    const color = 'darkgreen'
    return (&lt;div
      css={css`
        background-color: hotpink;
        &amp;:hover {
          color: ${color};
        }
      `}
    &gt;
      This has a hotpink background.
    &lt;/div&gt;)
  }
  </code></pre>
  <p>I get the following error :</p>
  <blockquote>
  <p>pragma and pragmaFrag cannot be set when runtime is automatic.</p>
  </blockquote>
  <p>If I remove the pragma <code>/** @jsx jsx */</code> I get this in the HTML code:</p>
  <pre><code>&lt;div css=&quot;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).&quot;&gt;This has a hotpink background.&lt;/div&gt;
  </code></pre>
  <p>These are my dependencies:</p>
  <pre><code>&quot;dependencies&quot;: {
      &quot;@emotion/react&quot;: &quot;^11.1.5&quot;,
      &quot;@emotion/babel-plugin&quot;: &quot;^11.2.0&quot;,
      &quot;next&quot;: &quot;^10.0.0&quot;,
      &quot;react&quot;: &quot;17.0.1&quot;,
      &quot;react-dom&quot;: &quot;17.0.1&quot;
    }
  </code></pre>