Comment in JSX map breaks code silently
See original GitHub issueDescribe 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
create-react-app --template typescript bug
- 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.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:7
- Comments:8
Top GitHub Comments
Not only in map, it occurs more broadly in return statements. This is a major problem, and should be given high priority.
Not stale, see #8687, maybe also #8809