Create-react-app: [V4] Bug: fragments with JSX transform

[sumanthratna]

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.

[gaearon]

make sure react-scripts is 4.0.0

It is a beta. You need to report it in CRA repo, not here. Moving.

[sumanthratna]

Thanks for the reply @gaearon!

make sure react-scripts is 4.0.0

It is a beta.

I think I'm misunderstanding something: Hasn't CRA v4.0.0 been officially released? (I believe the last CRA beta was 4.0.0-next.117)

[gaearon]

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

[sumanthratna]

strange: I get the error about React being a UMD global even in files where I don't use fragments. e.g.:

1. I added import React from "react"; // eslint-disable-line @typescript-eslint/no-unused-vars to the top of my files that use fragments
2. I get no errors or warnings from the files with fragments in them
3. I get an error like this:

Failed to compile.

.../hacktj/website/2021/src/Footer/MLHTrustBadge/index.tsx
TypeScript error in .../hacktj/website/2021/src/Footer/MLHTrustBadge/index.tsx(2,4):
'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.  TS2686

    1 | const MLHTrustBadge = (): JSX.Element => (
  > 2 |   <a
      |    ^
    3 |     id="mlh-trust-badge"
    4 |     href="https://mlh.io/seasons/na-2021/events?utm_source=na-hacktahon&amp;utm_medium=TrustBadge&amp;utm_campaign=2021-season&amp;utm_content=white"
    5 |     target="_blank"

[jarretmoses]

@sumanthratna I am in the same boat. It is definitely not isolated to Fragment. I've update my tsconfig to use the version from a new cra project bootstrapped with the new jsx compiler setup but getting this issue still

[sumanthratna]

linking #9901 and https://github.com/microsoft/TypeScript/pull/39199. strangely enough, in my current project that uses TypeScript 4.0, I'm getting this error. I can't update to the TS 4.1 beta because CRA 4 complains when I do.

I've seen this with:

• typescript projects
• non-TS projects with react fragment

but I haven't seen this with NextJS 10, which uses React 17.

[mxschmitt]

It seems also reproducible with CRA only without TS that the React Fragment short form does not work. We experience that issue on the react-bootstrap repo: https://github.com/react-bootstrap/code-sandbox-examples/issues/135

Sounds for me like a bug, @gaearon

[gaearon]

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.

[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.

[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.

Small update, it seems like the issue which we experienced is a different one, which is caused by CodeSandbox: https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic

Would be great if someone with more deeper knowledge could take a look too, feel myself not experienced enough with that topic.

[gaearon]

I don't quite understand. The original report appeared to be about CRA. How can it be specific to CodeSandbox?

[mxschmitt]

I don't quite understand. The original report appeared to be about CRA. How can it be specific to CodeSandbox?

I think its a different error (at least mine) to the error which was reported, since if I run npm run / npm build locally it works.