CODEWITHSUNDEEP
next.jsemotion
alentejo
alentejo

Reputation: 1130

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

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

Upvotes: 21

Views: 17701

Answers (3)

LuizAsFight
LuizAsFight

Reputation: 242

I realized that I was running with nodejs 12. Just changed node version to 14 using nvm and it worked.

Upvotes: 2

Amir Nabaei
Amir Nabaei

Reputation: 1642

In my case I added classic jsxrun time

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

Upvotes: 10

alentejo
alentejo

Reputation: 1130

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

Upvotes: 58

Related Questions