Create-react-app: Comment in JSX map breaks code silently

[antoinerousseau]

Describe the bug

When mapping an array of objects to nodes in the JSX (render) part (React FC), I wanted to add a comment, which worked fine for CRA in dev mode and for the VS Code TS parser, but when building for production, the array content is not shown and there is no error.

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

N/A

Environment

Environment Info:

  current version of create-react-app: 3.4.1
  running from /Users/antoine/.config/yarn/global/node_modules/create-react-app

  System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v10.15.3/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v10.15.3/bin/npm
  Browsers:
    Chrome: 80.0.3987.149
    Firefox: 72.0.2
    Safari: 13.0.5
  npmPackages:
    react: ^16.13.1 => 16.13.1
    react-dom: ^16.13.1 => 16.13.1
    react-scripts: 3.4.1 => 3.4.1
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. create-react-app --template typescript bug
2. replace content of App.tsx with:

import React from "react";

const DATA = [{ id: 1, value: "OK" }];

function App() {
  return (
    <div>
      <p>Should display OK below:</p>
      {DATA.map(({ id, value }) => (
        // this is a comment
        <p key={id}>{value}</p>
      ))}
    </div>
  );
}

export default App;

Expected behavior

The page should show "OK" in both development and production mode.

Actual behavior

The page shows "OK" in dev mode (yarn start) but not in production mode (yarn build && serve -s build) (and it's not in the DOM either, and no runtime error).

Reproducible demo

https://github.com/antoinerousseau/cra-ts-bug

https://cra-ts-bug.netlify.com/

Related

Edit: after checking again it might be similar to https://github.com/facebook/create-react-app/issues/8687 although I don't get any runtime error in my case.

It also happens in CRA 3.4.0.

[yh54321]

Not only in map, it occurs more broadly in return statements. This is a major problem, and should be given high priority.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[sbusch]

Not stale, see #8687, maybe also #8809

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[sbusch]

Not stale, see other issues

[sbusch]

Update: see my comment here https://github.com/facebook/create-react-app/issues/8687#issuecomment-646764708

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.