SyntaxError: 当运行时为自动时，无法设置 pragma 和 pragmaFrag

Question

我正在将一个项目从 Next 9 迁移到 Next 11，默认情况下使用 webpack5。修复加载器问题（如 next.config.js 文件中所示）后，出现以下错误：

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

我尝试使用这些解决方案进行调试，但仍然触发相同的错误。

我的代码：

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 文件

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