Always include destructuring transform (facebook#3788)

* Always include destructuring transform

* Fix lint

Author: gaearon

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

@@ -7,6 +7,10 @@
 'use strict';
 
 const plugins = [
+  // Necessary to include regardless of the environment because
+  // in practice some other transforms (such as object-rest-spread)
+  // don't work without it: https://github.com/babel/babel/issues/7215
+  require.resolve('babel-plugin-transform-es2015-destructuring'),
   // class { handleClick = () => { } }
   require.resolve('babel-plugin-transform-class-properties'),
   // The following two plugins use Object.assign directly, instead of Babel's

packages/babel-preset-react-app/package.json

@@ -14,6 +14,7 @@
     "babel-plugin-dynamic-import-node": "1.1.0",
     "babel-plugin-syntax-dynamic-import": "6.18.0",
     "babel-plugin-transform-class-properties": "6.24.1",
+    "babel-plugin-transform-es2015-destructuring": "6.23.0",
     "babel-plugin-transform-object-rest-spread": "6.26.0",
     "babel-plugin-transform-react-constant-elements": "6.23.0",
     "babel-plugin-transform-react-jsx": "6.24.1",

packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js

@@ -40,7 +40,9 @@ export default class extends Component {
     return (
       <div id="feature-object-destructuring">
         {this.state.users.map(user => {
-          const { id, name } = user;
+          const { id, ...rest } = user;
+          // eslint-disable-next-line no-unused-vars
+          const [{ name, ...innerRest }] = [{ ...rest }];
           return <div key={id}>{name}</div>;
         })}
       </div>