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!
Oldest comments (7)
Dope. Worked for me
Great! 🎉
Thank you, saved my day!
Happy to hear that👍!
Thank you this saved me!
Glad to be your help✨
I created an account here, just to follow you.