Build produces incorrect JS for specific switch-case block

Describe the bug

This is most probably a bug in one of the build tools used by react-scripts, or some misconfiguration. I recently ran into unexpected functionality in production build. https://github.com/AriPerkkio/asus-merlin-simple-vpn-client-setup/issues/1 The code works just fine on development mode but breaks on production build. I’ve traced the bug into a switch-case block which produces incorrect results after transpile process. I could debug this further but don’t have much time for this now. I’ve prepared a minimal reproduce branch for this, see below.

Did you try recovering your dependencies?

Yes, I’ve ran rm -rf node_modules/ yarn.lock.

Which terms did you search for in User Guide?

Read it many times, great documentation!

Environment

Environment Info:

System: OS: Linux 4.19 Debian GNU/Linux 9 (stretch) 9 (stretch) CPU: (4) x64 06/8e Binaries: Node: 13.6.0 - /usr/bin/node Yarn: 1.21.1 - /usr/bin/yarn npm: 6.13.4 - /usr/bin/npm Browsers: Chrome: Not Found Firefox: Not Found npmPackages: react: ^16.12.0 => 16.12.0 react-dom: ^16.12.0 => 16.12.0 react-scripts: 3.3.0 => 3.3.0 npmGlobalPackages: create-react-app: Not Found

Steps to reproduce

$ git clone https://github.com/AriPerkkio/asus-merlin-simple-vpn-client-setup.git
$ cd asus-merlin-simple-vpn-client-setup
$ git checkout transpile-bug
$ yarn # Install dependencies
$ yarn build # Builds minimal setup and runs prettier on it
# Check build/ui/static/js/main.<hash>.chunk.js

Expected behavior

Input:

case 'B': {
    const { key } = action;
    const keys = state.keys.map(_key =>
        _key.id === key.id ? key : _key
    );

    return { ...state, keys };
}

Unexpected output in build:

case 'B':
    t.key;
    var i = e.keys.map(function(e) {
        return e.id, e.id, e;
    });
    return c({}, e, { keys: i });

Rename _key

case 'B': {
    const { key } = action;
    const keys = state.keys.map(_someKey =>
        _someKey.id === key.id ? key : _someKey
    );

    return { ...state, keys };
}

Output is as expected:

case 'B':
    var i = t.key,
        u = e.keys.map(function(e) {
            return e.id === i.id ? i : e;
        });
    return c({}, e, { keys: u });

Actual behavior

See above.

Reproducible demo

See steps to reproduce.

[iansu]

Can you replicate this with the latest release?

[AriPerkkio]

I found that scope.crawl() method used by babel-plugin-transform-react-remove-prop-types is causing this. By commenting it out the bug disappeared. I searched for other plugins using the same method and found babel-plugin-remove-debug. The issue can now be reproduced without babel-plugin-transform-react-remove-prop-types.

{
    "plugins": [
        "@babel/plugin-transform-block-scoping",
        "babel-plugin-remove-debug"
    ]
}

Bug opened to babel: https://github.com/babel/babel/issues/11057