production build, JSX code missing when returned in parentheses with leading comment

[paulcollett]

Describe the bug

In production builds, with react-scripts build, any JSX code inside an implicit return with parentheses (), returns undefined when theres a leading comment before the JSX

Example A

const MyComponent = () => (
  // my comment
  <div>Output</div>
)

console.log(MyComponent()) // == undefined
console.log(MyComponent.toString()) // == function(){}

Example B

function MyComponent() {
  return (
    // comment
    <div>hello</div>
  )
}

console.log(MyComponent()) // == undefined

This issue only occurs within functions that return JSX. Variables work as expected. The development build is fine, this only occurs in production.

Without diving deeper I figure this issues lies in a dependency of react-scripts ..babel? ..or some compiler which now seems to treat the whole return body as a comment under these conditions.

This seems to be only occurring in a newer version of Create React App, we don't have this issue in a project running a year old CRA setup.

Did you try recovering your dependencies?

npm --version
6.10.3
yarn --version
1.17.0

Environment

  current version of create-react-app: 3.4.1
  running from (redacted)

  System:
    OS: mac
  Binaries:
    Node: 12.10.0
    Yarn: 1.17.0 
    npm: 6.10.3
  Browsers:
    Chrome: 83.0.4103.61
    Firefox: 74.0.1
    Safari: 13.0.3
  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

With the code from above in a production build. react-scripts build

Expected behavior

compiling some fantastic components

Actual behavior

compiling components that return undefined

Console errors will vary depending on the runtime access of the component. This was first noticed as a black page (no output) along with a cryptic message indicating "Nothing was returned from render" https://reactjs.org/docs/error-decoder.html/?invariant=152&args[]=a

Reproducible demo

n/a

[tombola]

I think maybe this is a result of React expecting there to be only one top level element returned by a render (and rightly or wrongly perceiving the comment as an element). If that is the case the same code should run fine if wrapped in a React.fragment.

Is this the case?

[sbusch]

I think this is a duplicate of #8687

[sbusch]

Update: see comment here #8687 (comment)

[stale]

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.