Open mkarajohn opened 3 years ago
if you are using typescript make sure that tsconfig have "jsx": "react"
also import like this
/** @jsx jsx */
import { css, jsx } from '@emotion/react'
the first line /** @jsx jsx */
is important, this comment enables pragma
@saulpalv
I have been doing all these things already, since before upgrading.
Describe the bug
Up until today I was using react 16.9.0, CRA 3.x.x and emotionjs making use of their jsx pragma. Today I upgraded in this order: CRA to 4.x.x first and React to 17.x.x second.
While I was on CRA 4 and react 16 I had no issues. After upgrading to React 17 sometimes, it's quite random, the build process fails, with the error
'jsx' must be in scope when using JSX
(see bellow).Did you try recovering your dependencies?
Yes
Which terms did you search for in User Guide?
"Disable JSX transform"
Environment
Also, Typescript version 4.1.3
Steps to reproduce
DISABLE_NEW_JSX_TRANSFORM
flag in the project's.env
file, byDISABLE_NEW_JSX_TRANSFORM=true
jsx
by setting the pragma in order for the css prop to work without needing to ejectActual behavior
Most of the times the compiling fails, with the following error
The strange thing is that this happens sometimes. Triggering another build may actually result in a successful compilation.
Expected behavior
I am aware of the fact that currently there are some issues between emotion and the new JSX transform, but my understanding is that enabling the
DISABLE_NEW_JSX_TRANSFORM
flag should actually make the project build/behave like in react versions <16.14.0 ?Related issues: https://github.com/system-ui/theme-ui/issues/1160#issuecomment-715530924 https://github.com/emotion-js/emotion/issues/2041
Demo
This demo reflects the important parts of the configuration in my project, however I could not reproduce it there. https://codesandbox.io/s/awesome-browser-mzv6u?file=/src/App.js