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.

Minification bug in production build that does not exist when using dev server

See original GitHub issue

Describe the bug

I tracked down the bug to a return statement that the minifier resolved to return null/nothing, but the dev server returned a component as expected.

Environment

CRA not ejected react-scripts 3.4.1

bug seen in Firefox, Safari and Chrome on Mac and PC

Steps to reproduce

class arrow function:

renderOption = (option)=>{
  const { wi } = this.props
    let sourceWi = wi
    return (
      // myVar1,
      // myVar2,
      // myVar3
      <MyComponent
        title={ sourceWi.title }
        revIndex={ option.revIndex }
        sourceWi={ sourceWi }
      />
    )
}

After npm run build, this code no longer returns a component.

Expected behavior

Arrow function should return MyComponent (which works fine using dev server)

Actual behavior

After running npm run build, it appears the minifier returns nothing. Even though the return statement wraps its content in parentheses (). Perhaps it is confused by the commented variables //

I corrected the bug by creating a variable and then returning it:

renderOption = (option)=>{
  const { wi } = this.props
    let sourceWi = wi
    const res = (
      // myVar1,
      // myVar2,
      // myVar3
      <MyComponent
        title={ sourceWi.title }
        revIndex={ option.revIndex }
        sourceWi={ sourceWi }
      />
    )
    return res // NOTE returning the const res instead of the parentheses builds and runs fine
}

To reproduce the behaviour of the bug I simply return nothing instead of res. This is why I think it is a minification problem that ignores the contents inside the parentheses.