情感CSS支持和Nextjs新的JSX运行时错误:当运行时是自动的，不能设置pragma和pragmaFrag。

Question

在文档后面的Nextjs10.1中，我尝试使用CSSPropofEmotion11和Nextjs10.1，.babelrc文件如下：

{
  "presets": [
    [
      "next/babel",
      {
        "preset-react": {
          "runtime": "automatic",
          "importSource": "@emotion/react"
        }
      }
    ]
  ],
  "plugins": ["@emotion/babel-plugin"]
}

我的下一页：

/** @jsx jsx */
import { css, jsx } from '@emotion/react'

export default function testPage() {
  const color = 'darkgreen'
  return (<div
    css={css`
      background-color: hotpink;
      &:hover {
        color: ${color};
      }
    `}
  >
    This has a hotpink background.
  </div>)
}

我得到以下错误：

当运行时是自动的时，不能设置

实用化和pragmaFrag。

如果删除/** @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>

这些是我的依赖：

"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"
  }

Answer 1

解决这个问题的最简单方法是用/** @jsx jsx */替换/** @jsxImportSource @emotion/react */，我甚至不需要再导入jsx了：

/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react"

export default function testPage() {
  const color = 'darkgreen'
  return (<div
    css={css`
      background-color: hotpink;
      &:hover {
        color: ${color};
      }
    `}
  >
    This has a hotpink background.
  </div>)
}

Answer 2

在我的例子中，我添加了经典的jsxrun时间。

/** @jsxRuntime classic */
/** @jsx jsx */
import { css } from "@emotion/react"

Answer 3

我意识到我正在使用nodejs 12运行，只是使用nvm将节点版本更改为14，并且它工作了。