create-react-app icon indicating copy to clipboard operation
create-react-app copied to clipboard

fix: ensure JSX transform works after eject with React 17 (#9953)

Open Aarshpatel12 opened this issue 6 months ago • 1 comments

Description

This PR fixes issue #9953 by ensuring that the new JSX transform introduced in React 17 continues to work even after ejecting a Create React App project.

Currently, after ejecting, the Babel configuration does not include the necessary plugin for the new JSX runtime, resulting in ReferenceError: React is not defined unless import React is manually added to every file.

Fix

  • Added @babel/preset-react with runtime: 'automatic' option to the Babel configuration in the ejected Webpack setup.
  • Ensured consistent JSX transformation behavior both before and after ejecting.
  • This aligns with React 17+ best practices where explicit import React is no longer required when using the automatic runtime.

Related Issue

Closes #9953

Checklist

  • [x] Ensured React 17+ JSX transform works after eject
  • [x] Verified no breaking changes for projects using older JSX runtime
  • [x] Added Babel preset configuration with automatic runtime

Preview

After this fix:

  • Users can remove import React from 'react' safely in component files
  • No more ReferenceError: React is not defined after ejecting

Let me know if further changes are needed!

Aarshpatel12 avatar Jun 21 '25 10:06 Aarshpatel12

Hi maintainers 👋 Just a reminder that this PR addresses #9953 and resolves a breaking behavior in React 17+. All checks are passing and CLA is signed. Kindly review when convenient — thanks!

Aarshpatel12 avatar Jul 21 '25 05:07 Aarshpatel12