Emotion CSS Prop 和 Nextjs 新 JSX 运行时 - 错误:运行时自动时无法设置 pragma 和 pragmaFrag [英] Emotion CSS Prop and Nextjs new JSX runtime - error: pragma and pragmaFrag cannot be set when runtime is automatic

问题描述

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

{预设":[[下一个/通天塔"，{预设反应":{运行时":自动"，importSource":@emotion/react"}}]],插件":[@emotion/babel-plugin"]}

我的 Nextjs 页面:

/** @jsx jsx */从'@emotion/react'导入 { css, jsx }导出默认函数 testPage() {常量颜色 = '深绿色'返回 (

我收到以下错误:

<块引用>

运行时自动时不能设置pragma和pragmaFrag.

如果我删除编译指示 /** @jsx jsx */ 我会在 HTML 代码中得到这个:

<div css="您尝试对从 `css` 函数返回的对象进行字符串化.它不应该被直接使用(例如，作为 `className` 属性的值)，而是交给情感以便它可以处理它(例如，作为 `css` 属性的值).">这有一个热点背景.</div>

这些是我的依赖项:

依赖":{@emotion/react":^11.1.5"，@emotion/babel-plugin":^11.2.0"，下一个":^10.0.0"，反应":17.0.1"，react-dom":17.0.1"；}

解决方案

最简单的解决办法就是把 /** @jsx jsx */ 替换成 /** @jsxImportSource @emotion/react */ 我什至不需要再导入 jsx 了:

/** @jsxImportSource @emotion/react */从@emotion/react"导入 { css }导出默认函数 testPage() {常量颜色 = '深绿色'返回 (

I'm trying to use the CSS Prop of Emotion 11 with Nextjs 10.1 Following the documentation, my .babelrc file is the following:

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

An my Nextjs page:

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

I get the following error :

pragma and pragmaFrag cannot be set when runtime is automatic.

If I remove the pragma /** @jsx jsx */ I get this in the HTML code:

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

These are my dependencies:

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

解决方案

The easiest way to solve it was to replace the /** @jsx jsx */ by /** @jsxImportSource @emotion/react */ and I don't even need to import jsx anymore:

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

这篇关于Emotion CSS Prop 和 Nextjs 新 JSX 运行时 - 错误:运行时自动时无法设置 pragma 和 pragmaFrag的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！