react/create-react-app

[v4] Bug: React 17, React is not defined after ejecting

Open

#9953 opened on Oct 29, 2020

View on GitHub
 (20 comments) (4 reactions) (0 assignees)JavaScript (103,386 stars) (27,059 forks)batch import
contributions: up for grabs!good first issueissue: bugissue: needs investigation

Description

React version: 17.0.1

Steps To Reproduce

  1. npx create-react-app my-app
  2. cd my-app
  3. npm start (Works like a charm)
  4. npm run eject
  5. npm i
  6. npm start (ReferenceError: React is not defined)

Link to code example: https://codesandbox.io/s/ecstatic-wood-ou6px

The current behavior

I upgraded react to 17 and removed "import React"s from my project files (except index.js where react mounted). But I got "ReferenceError: React is not defined" in those files. To investigate the issue behind this, I created a new react app, the new JSX transformation was working. But when I eject, it throws the same errors. So; Without react-scripts, new JSX transformation doesn't working.

The expected behavior

Components should render without declaring React (import React from "react") if React is in scope.

Contributor guide

Tech stack
javascriptreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
basic React knowledgeunderstanding of create react app
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the webpack configuration after ejecting. The new JSX transform requires specific Babel presets (like @babel/preset react with runtime: 'automatic'). Compare the ejected config's Babel settings with the non ejected react scripts setup. Look for missing or misconfigured Babel plugins in the ejected config files (e.g., webpack.config.js, babel.config.js). The linked CodeSandbox may provide hints.