question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Comment in JSX map breaks code silently

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:7
  • Comments:8

github_iconTop GitHub Comments

4reactions
yh54321commented, Mar 31, 2020

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

3reactions
sbuschcommented, May 1, 2020

Not stale, see #8687, maybe also #8809

Read more comments on GitHub >

github_iconTop Results From Across the Web

reactjs - How to use comments in React
Within React(JSX), you can use {/* comment here */} , however for javascript // comment here works. So, the answer depends on where...
Read more >
Lazy loading React components
Learn how to apply code-splitting and lazy loading to React components with React.lazy() and React.Suspense.
Read more >
Strict Mode
When strict mode is enabled, React compiles a list of all class components using ... findDOMNode can also be used on class components...
Read more >
API - ESBuild
Analyze; Asset names; Banner; Charset; Chunk names; Color; Conditions; Drop; Entry names; Footer; Global name; Ignore annotations; Incremental; JSX; JSX dev ...
Read more >
rollup.js
Rollup allows you to write your code using the new module system, ... include source code in source maps --sourcemapFile <file> Specify bundle...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found