Hi there!
I'm Arisa, a freelance Full Stack Developer living in Germany🇩🇪
I'm developing Lilac, an online school with hands-on Frontend e-books and tutoring👩💻
Who is this article for?
- Anyone migrated React 17 & Emotion 11
- Anyone got depression with the error below
What was the error?
Oh yea, it was a super stubborn one😑
pragma and pragmaFrag cannot be set when runtime is automatic.
> 1 | /**@jsx jsx */
| ^
2 | import {
Here is my environment.
{
"name": "woot-woot",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.1.5",
"@emotion/styled": "^11.1.5",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"devDependencies": {
"@emotion/babel-plugin": "^11.2.0"
}
}
- css prop with String Styles
- create-react-app v4.0.3
To prevent dragging lazy dogs(errors) every time, here is the solution that worked for me👇
A solution
Instead of just /** @jsx jsx */
as it's instructed in Emotion's documentation, add this.
/** @jsxRuntime classic */
/** @jsx jsx */
import { css, jsx } from '@emotion/react';
Without /** @jsx jsx */
will fail to apply styles.
Example
/** @jsxRuntime classic */
/** @jsx jsx */
import styled from '@emotion/styled';
import { css, jsx } from '@emotion/react'
function App() {
const color = '#454343';
const ItemName = styled.h1`
font-size: 3rem;
`
const Description = styled.p`
font-size: 1.5rem;
`
return (
<div className="App">
<ItemName css={css`
color: ${color};
`}>
Swag Sticker Pack
</ItemName>
<Description css={css`
color: ${color};
`}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br />Sed pharetra consequat diam. In metus risus, aliquam non massa tempus,
<br />gravida commodo orci. Praesent interdum pharetra quam eu pharetra.
</Description>
</div>
);
}
export default App;
Results in a browser
It still shows a warning of "'React' is defined but never used"
though, it's because we still need to insert /** @jsx jsx */
.
Hope you find this blog post helpful 🙌
It still looks like Emotion teams are working on it.
This means could be a change in the very near future to follow up React New JSX Transform.
Strongly recommend you to check their GitHub repo too!
Top comments (7)
Thank you this saved me!
Glad to be your help✨
Dope. Worked for me
Great! 🎉
Thank you, saved my day!
Happy to hear that👍!
I created an account here, just to follow you.