If you use Emotion in your project and you're migrating to react 17, you might run into this error if you use the css
prop:
pragma and pragmaFrag cannot be set when runtime is automatic.
> 1 | /**@jsx jsx */
| ^
2 | import {
This error is due to the new JSX runtime feature introduced by React 17
After researching several solutions, here are some solutions that fix this:
Solution 1
Add another jsx pragma that configures the new jsx runtime to classic
mode.
+/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@emotion/core';
Solution 2
Change the jsx pragma
- /**@jsx jsx */
+ /** @jsxImportSource @emotion/core */
Solution 3
- Remove the jsx pragma
/**@jsx jsx*/
from all files - Install
@emotion/babel-preset-css-prop
asdevDependency
- Upgrade
@emotion/core
to10.1.1
{
"presets": ["@emotion/babel-preset-css-prop"]
}
If you find this useful, feel free to like this post and share it.
Cheers!
If you had this issue in your project and managed to solve it a different way, feel free to comment below.
Top comments (2)
@emotion/core package has been renamed to
@emotion/react
If you are using a zero-config tool with automatic detection of which runtime (classic vs. automatic) should be used and you are already using a React version that has the new JSX runtimes (hence runtime: 'automatic' being configured automatically for you) such as Create React App 4 then /** @jsx jsx / pragma might not work and you should use /* @jsxImportSource @emotion/react */ instead.
Source: emotion.sh/docs/css-prop
This is awesome article! I used both Solution 1 & 3 to solve my headaches.