Build fails with error 'jsx' must be in scope when using JSX but DISABLE_NEW_JSX_TRANSFORM flag is enabled

mkarajohn commented 3 years ago

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

Environment Info:

  current version of create-react-app: 4.0.1
  running from /home//.npm/_npx/862177/lib/node_modules/create-react-app

  System:
    OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i5-6600K CPU @ 3.50GHz
  Binaries:
    Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm
  Browsers:
    Chrome: Not Found (I use chromium)
    Firefox: 84.0
  npmPackages:
    react: ^17.0.1 => 17.0.1 
    react-dom: ^17.0.1 => 17.0.1 
    react-scripts: 4.0.1 => 4.0.1 
  npmGlobalPackages:
    create-react-app: Not Found

Also, Typescript version 4.1.3

Steps to reproduce

Enable the new DISABLE_NEW_JSX_TRANSFORM flag in the project's .env file, by DISABLE_NEW_JSX_TRANSFORM=true
Make use of emotion's jsx by setting the pragma in order for the css prop to work without needing to eject
Compile the project

Actual behavior

Most of the times the compiling fails, with the following error

'jsx' must be in scope when using JSX                                                                 react/react-in-jsx-scope
The css prop can only be used if jsx from @emotion/react is imported and it is set as the jsx pragma  @emotion/jsx-import

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 ?

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

3xau1o commented 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

mkarajohn commented 3 years ago

@saulpalv

I have been doing all these things already, since before upgrading.

facebook / create-react-app