pragma and pragmaFrag cannot be set when runtime is automatic – jsx runtime error – Quick Solution – React and Emotion

JSX runtime error pragma and pragmaFrag cannot be set when runtime is automatic is thrown when using certain versions of React and Emotion more specifically React 17 and Emotion 10 and using the css prop

/** @jsx jsx */

For eg: The following package versions throws the jsx runtime error

 "@emotion/core": "^10.0.35",
 "@emotion/react": "^11.11.1",
 "@emotion/styled": "^10.0.27",
 "react": "^17.0.2",
 "react-dom": "^17.0.2",

There are few options to fix this and the quick solution with minimal code change for this error is to use the following css prop

/** @jsxRuntime classic */
/** @jsx jsx */
import {jsx} from '@emotion/core'

Leave a Reply