[V4] Bug: fragments with JSX transform

React version: 17.0.1

Steps To Reproduce

1. yarn create react-app my-app (make sure react-scripts is 4.0.0 and react and react-dom are 17.0.1)
2. remove the React import in src/App.tsx (everything should still work)
3. add in a random <> (e.g., src/App.tsx should look like the following)

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.tsx</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    physics test was bad
    </>
  );
}

export default App;

code example: (see code block above)

The current behavior

with the shorthand syntax, I get this error:

Failed to compile.

/tmp/my-app/src/App.tsx
TypeScript error in /tmp/my-app/src/App.tsx(6,5):
'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.  TS2686

    4 | function App() {
    5 |   return (
  > 6 |     <>
      |     ^
    7 |       <div className="App">
    8 |         <header className="App-header">
    9 |           <img src={logo} className="App-logo" alt="logo" />

If I change the <> to React.Fragment, I get this error:

Failed to compile.

/tmp/my-app/src/App.tsx
  Line 13:3:  Prefer fragment shorthand over React.Fragment  react/jsx-fragments

Search for the keywords to learn more about each error.

If I change the <> to React.Fragment and add an eslint disable rule:

Failed to compile.

/tmp/my-app/src/App.tsx
TypeScript error in /tmp/my-app/src/App.tsx(6,5):
'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.  TS2686

    4 | function App() {
    5 |   return (
  > 6 |     <Fragment>
      |     ^
    7 |       <div className="App">
    8 |         <header className="App-header">
    9 |           <img src={logo} className="App-logo" alt="logo" />

The expected behavior

react should display the spinning logo, and under the “Learn React” header, there should be text. In other words, no errors should occur when upgrading from react 16 to react 17.

[mxschmitt]

Yeah I totally believe it’s a bug. I’m currently swamped by the React work so I can’t look it into it soon but I’m hoping that the maintainers or the open source users like you can dig into it.

Will try to take a look later and dig into it.

[gaearon]

Hmm. I assumed not but I haven’t checked. 😄 Let’s wait to hear from the maintainers.