Next9升级Next11报SyntaxError: pragma and pragmaFrag cannot be set错误如何解决

错误原因 #

该报错是React 17+ 新增的JSX自动运行时（automatic runtime）特性导致的冲突：Next 11内置的React版本默认启用自动运行时模式，该模式下不允许手动设置/** @jsx jsx */这类自定义pragma注释，和你当前使用的Emotion旧版css prop写法、MDX loader默认配置冲突。

解决步骤 #

1. 调整Babel配置兼容自动运行时
   修改你的babel.config.json，给next/babel预设添加React运行时配置，指定Emotion为JSX导入源：

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

如果你的项目依赖里安装的是旧版@emotion/core，需要先替换为@emotion/react。

2. 移除TSX文件里的冗余pragma声明
   删除.tsx文件开头的/** @jsx jsx */注释，同时调整导入语句，不需要再手动导入jsx：

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

// 修改后
import { css } from "@emotion/react";

3. 修复MDX Loader配置
   你当前的@mdx-js/loader没有指定JSX运行时模式，默认会使用classic模式并生成pragma声明，需要在next.config.js里补充配置：

// next.config.js中MDX loader部分修改为
{
  test: /\.mdx/,
  use: [
    options.defaultLoaders.babel,
    {
      loader: '@mdx-js/loader',
      options: {
        ...babel.options,
        jsxRuntime: 'automatic',
        jsxImportSource: '@emotion/react'
      },
    },
  ],
}

备选降级方案 #

如果以上调整仍有兼容问题，可以强制改回经典JSX运行时模式，保留原有pragma写法：
修改babel.config.json中next/babel的配置：

["next/babel", {
  "preset-react": {
    "runtime": "classic"
  }
}]

该方案无需修改原有TSX文件的pragma和导入逻辑。

内容的提问来源于stack exchange，提问作者Kelly