title: SyntaxError: pragma and pragmaFrag cannot be set when runtime is automatic
body: <p>I'm migrating a project from Next 9 to Next 11 which uses webpack5 by default. After fixing the loader issue as shown in the next.config.js file, I get this error:</p>
  <p><code>SyntaxError: pragma and pragmaFrag cannot be set when runtime is automatic</code></p>
  <p>I've tried debugging with <a href="https://stackoverflow.com/questions/66965774/emotion-css-prop-and-nextjs-new-jsx-runtime-error-pragma-and-pragmafrag-canno">these</a> solutions, and I still trigger the same error.</p>
  <p>My code:</p>
  <p><em><strong>next.config.js</strong></em></p>
  <pre><code>const withImages = require(&quot;next-images&quot;);
  const { PHASE_DEVELOPMENT_SERVER } = require(&quot;next/constants&quot;);
  const withYaml = require(&quot;next-plugin-yaml&quot;);
  const babel = require('babel-plugin-import-glob-array');
  
  module.exports = (phase) =&gt;
    withYaml(
      withImages(
  ({
          target: &quot;serverless&quot;,
          env: {
            isDev: phase === PHASE_DEVELOPMENT_SERVER,
          },
          webpack5: true,
          webpack: (config, options) =&gt; {
            config.module.rules.push({
              test: /\.mdx/,
              use: [
                options.defaultLoaders.babel,
                {
                  loader: '@mdx-js/loader',
                  options: babel.options,
                },
              ],
            });
            config.module.rules.unshift({
              test: /\.svg$/,
              use: [&quot;@svgr/webpack&quot;]
            });
            console.log(options.webpack.version); // 5.18.0
            // eslint-disable-next-line no-param-reassign
            config.experiments = {};
            return config;
          },
        })
      )
    );
  </code></pre>
  <p><em><strong>babel.config.json</strong></em></p>
  <pre><code>{
    &quot;presets&quot;: [&quot;next/babel&quot;, &quot;@emotion/babel-preset-css-prop&quot;],
    &quot;plugins&quot;: [&quot;import-glob-array&quot;, &quot;emotion&quot;]
  }
  </code></pre>
  <p><em><strong>.tsx files</strong></em></p>
  <pre><code>/** @jsx jsx */
  import { css, jsx } from &quot;@emotion/core&quot;;
  </code></pre>