Uglify Mangling Process in `react-scripts build` is Modifying my Application Logic and producing bugs

Is this a bug report?

Possibly. Need help to determine whether or not it is.

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

Uglify, react-scripts build, disable uglify

Environment

System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
    Yarn: 1.10.1 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v8.12.0/bin/npm
  Browsers:
    Chrome: 70.0.3538.67
    Firefox: 62.0
    Safari: 12.0
  npmPackages:
    react: ^16.5.2 => 16.5.2
    react-dom: ^16.5.2 => 16.5.2
    react-scripts: 2.0.3 => 2.0.3
  npmGlobalPackages:
    create-react-app: Not Found

Steps to Reproduce

Unfortunately, I’m on a time crunch so I can’t exactly lay everything out in refined detail. I’m going to try my best to do so in steps based on what I’m experiencing in my application’s production build running on Heroku.

1. Create a JS map/object whose keys reference the same property name. For example

// ComponentNameAuthorizationMap.js
import ComponentClass1 from '...'
import ComponentClass2 from '...'
import ComponentClass3 from '...'

export const ComponentNameAuthorizationMap = {
   [ComponentClass1.name]: ['authorization1', 'authorization2'],
   [ComponentClass2.name]: ['authorization3'],
   [ComponentClass3.name]: ['authorization2']
}

1. Import your ComponentNameAuthorizationMap or whatever, into a file in your application.
2. Execute react-scripts build and run your built application
3. Put a breakpoint (using your browser’s debugger) on your file that is importing your ComponentNameAuthorizationMap and check the value of that import.
4. You should see an exported value containing only one key. Not the three that you specified above.

Expected Behavior

My exported object value should not be modified as a result of react-scripts build production optimization.

Actual Behavior

My imported map value was modified and reduced to an object containing only one key.

Reproducible Demo

N/A

Other Comments

From my local observations, I feel like all the name fields that I’m referencing from my imported component classes are being truncated to the same key due to production build optimizations in the react-scripts build process. This then causes the original map to optimize itself down to being a map of only one key-value pair. I was doing some research on this behavior and felt my thoughts were validated by the answer to this SO post:

https://stackoverflow.com/questions/33708197/does-it-make-sense-to-do-both-minify-and-uglify

And I believe the name property exists on all ES6 classes correct? I’m just surprised at this behavior and wondering if anyone else has experienced this in their applications and how to prevent this from happening in CRA2 apps.

[Timer]

displayName will only exist during development for the dev tools.

edit: actually I’m thinking something else, I’m not sure tbh – give it a try! Since it’s a babel plugin it should probably have the real name, but I’d still advise against this behavior.

[Timer]

i.e.

class ComponentClass2 {
  static NAME = 'ComponentClass2'
}

// later on:
console.log(ComponentClass2.NAME)