Next.js 情感CSS道具和Nextjs新JSX运行时-错误：运行时为自动时无法设置pragma和pragmaFrag

我试图在Nextjs 10.1中使用情感11的CSS道具 根据文档，my.babelrc文件如下所示：

{
“预设”：[
[
“下一个/巴贝尔”，
{
“预设反应”：{
“运行时”：“自动”，
“importSource”：“@emotion/react”
}
}
]
],
“插件”：[“@emotion/babel plugin”]
}

my Nextjs页面：

/**@jsx-jsx*/
从'@emotion/react'导入{css，jsx}
导出默认函数testPage（）{
常量颜色='darkgreen'
返回(
这有一个火红的背景。
)
}

我得到以下错误：

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

如果我删除pragma

/**@jsx jsx*/

，我会在HTML代码中得到：

<div css="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).">This has a hotpink background.</div>

---

最简单的解决方法是用

/***@jsx jsx*/

替换

/***@jsxImportSource@emotion/react*/

，我甚至不需要再导入jsx了：

/**@jsxImportSource@emotion/react*/
从“@emotion/react”导入{css}
导出默认函数testPage（）{
常量颜色='darkgreen'
返回(
这有一个火红的背景。
)
}

最简单的解决方法是用

/***@jsx jsx*/

替换

/***@jsxImportSource@emotion/react*/

，我甚至不需要再导入jsx了：

/**@jsxImportSource@emotion/react*/
从“@emotion/react”导入{css}
导出默认函数testPage（）{
常量颜色='darkgreen'
返回(
这有一个火红的背景。
)
}

"dependencies": {
    "@emotion/react": "^11.1.5",
    "@emotion/babel-plugin": "^11.2.0",
    "next": "^10.0.0",
    "react": "17.0.1",
    "react-dom": "17.0.1"
  }