Remove @babel/plugin-proposal-object-rest-spread from default babel configuration

[danderson00]

Is your proposal related to a problem?

This has been suggested in other issues (notably #5310) and pull requests (#5331). The pull request was closed with the comment:

Unfortunately, I still don't trust that this works correctly. There's zero harm in including this plugin to be safe, so let's leave it for now.

There are a couple of places where this causes "harm":

• I am declaring Javascript expressions as parameters to higher order components, and these expressions are serialized and sent to the server. The object rest spread babel plugin injects a function call when using the rest operator in these expressions, causing them to fail to be interpreted and validated on the server.
• Perhaps more relevant to more people, transforming this code can cause additional debugging pain. This is not a trivial issue.

The addition of the browsers option to package.json is awesome. I've been craving a "leave my code the $#@& alone" setting, and setting development mode to latest chrome is almost that, except for the rest operator, and it's a pain!

Describe the solution you'd like

Remove the inclusion of the @babel/plugin-proposal-object-rest-spread package by default.

create-react-app/packages/babel-preset-react-app/create.js

Line 161 in bffc296

require('@babel/plugin-proposal-object-rest-spread').default,

Describe alternatives you've considered

The obvious workaround is to use Object.assign, but this is an unnecessary restriction and prevents me from using a productive language feature.

[heyimalex]

Not sure how relevant this is, but on the babel releases page there appear to have been a few changes to this plugin recently, so removing this would probably coincide with bumping the version of babel we pin. I understand your reasoning, but it's tough for me to really judge the stability.

[danderson00]

Yeh, understood, there was obviously a reason it's in there in the first place and it'd be pretty difficult to be sure it doesn't still have some subtle impact. The joys of previous decisions continuing to haunt us haha.

I can work around for now with Object.assign, so it's not a huge priority, but IMHO it would be a desirable goal to remove this dependency and stop forcefully transpiling rest operators. We still have to transpile JSX, of course, but from a developer's perspective, the closer we can get to debugging the actual code we wrote, the better!

Cheers for the love ❤️

[danderson00]

I've discovered another subtle and frustrating side effect of this. If you import a CommonJS module from an ES6 module and the CommonJS module contains the object spread operator, the app throws at runtime with the below error:

Attempted import error: './path' does not contain a default export (imported as 'name')

It's a pain if you're sharing modules between node and the browser. Again, the workaround is to use Object.assign, so it's not the end of the world, but... Rar.

[ianschmitz]

It appears to be the same output with both preset-env and the plugin: Nvm. Was caching the output in the REPL it looks like.

preset-env:
https://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=MYewdgzgLgBAhjAvDA3gIzgJwFwwCwBMAvgNwBQoksaSqGAXrgEQAWApgJ5OlkXjQxgtFADoxcADQwxItKSA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=react%2Cenv&prettier=false&targets=&version=7.6.4&externalPlugins=

plugin:
https://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=MYewdgzgLgBAhjAvDA3gIzgJwFwwCwBMAvgNwBQoksaSqGAXrgEQAWApgJ5OlkXjQxgtFADoxcADQwxItKSA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=react&prettier=false&targets=&version=7.6.4&externalPlugins=%40babel%2Fplugin-proposal-object-rest-spread%407.6.2

[danderson00]

The issue appears when importing CommonJS modules containing object spread operators from ES6 modules. It would seem babel interprets the file as an ES6 module for some reason, hence the error about default exports. Setting the sourceType to unambiguous fixes the issue, but this is not possible with an application bootstrapped with create-react-app. I'd REALLY like to avoid ejecting if possible!

[ianschmitz]

Related #6279