SyntaxError: pragma and pragmaFrag cannot be set when runtime is automatic

Question

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:

SyntaxError: pragma and pragmaFrag cannot be set when runtime is automatic

I've tried debugging with these solutions, and I still trigger the same error.

My code:

next.config.js

const withImages = require("next-images");
const { PHASE_DEVELOPMENT_SERVER } = require("next/constants");
const withYaml = require("next-plugin-yaml");
const babel = require('babel-plugin-import-glob-array');

module.exports = (phase) =>
  withYaml(
    withImages(
({
        target: "serverless",
        env: {
          isDev: phase === PHASE_DEVELOPMENT_SERVER,
        },
        webpack5: true,
        webpack: (config, options) => {
          config.module.rules.push({
            test: /\.mdx/,
            use: [
              options.defaultLoaders.babel,
              {
                loader: '@mdx-js/loader',
                options: babel.options,
              },
            ],
          });
          config.module.rules.unshift({
            test: /\.svg$/,
            use: ["@svgr/webpack"]
          });
          console.log(options.webpack.version); // 5.18.0
          // eslint-disable-next-line no-param-reassign
          config.experiments = {};
          return config;
        },
      })
    )
  );

babel.config.json

{
  "presets": ["next/babel", "@emotion/babel-preset-css-prop"],
  "plugins": ["import-glob-array", "emotion"]
}

.tsx files

/** @jsx jsx */
import { css, jsx } from "@emotion/core";