Emotion CSS Prop and Nextjs new JSX runtime - error: pragma and pragmaFrag cannot be set when runtime is automatic

Question

我正在尝试将 CSS Prop of Emotion 11 与 Nextjs 10.1 一起使用按照文档，我的 .babelrc 文件如下：

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

我的 Nextjs 页面：

/** @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>)
}

我收到以下错误：

pragma and pragmaFrag cannot be set when runtime is automatic.

如果我删除 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>

这些是我的依赖项：

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

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

Answer 3

我意识到我是运行 nodejs 12。刚刚使用 nvm 将节点版本更改为 14，它成功了。

Emotion CSS Prop and Nextjs new JSX runtime - error: pragma and pragmaFrag cannot be set when runtime is automatic

Emotion CSS Prop and Nextjs new JSX runtime - error: pragma and pragmaFrag cannot be set when runtime is automatic

emotion

next.js