title: Babel: can't get "@babel/plugin-transform-destructuring" plugin to work
body: <p><b>PS: It's the first time I've given up to the point of composing my first question here. Would be really grateful if someone could help. Thanks!</b></p>
  
  <p>I'm trying to load my ReactJS web app in iOS 10 Safari on a relatively old iPad (I use webpack and babel-loader, and serve it using webpack-dev-server).</p>
  
  <p>I'm getting the following Syntax error:</p>
  
  <p><code>SyntaxError: Unexpected token '...'. Expected a property name.</code></p>
  
  <p><i>(The page loads fine on all devices/browsers I've tried so far.)</i></p>
  
  <p>The error is caused by this line of transpiled code:</p>
  
  <p><code>eval("\nconst publicIp = __webpack_require__(/*! public-ip */ \"./node_modules/public-ip/browser.js\");\n\nconst isOnline = async options =&gt; {\n\toptions = {\n\t\ttimeout: 5000,\n\t\tversion: 'v4',\n\t\t...options\n\t};\n\n\ttry {\n\t\tawait publicIp[options.version](options);\n\t\treturn true;\n\t} catch (_) {\n\t\treturn false;\n\t}\n};\n\nmodule.exports = isOnline;\n// TODO: Remove this for the next major release\nmodule.exports.default = isOnline;\n\n\n//# sourceURL=webpack:///./node_modules/is-online/browser.js?");</code></p>
  
  <p>where we can observe as seen in the source <a href="https://github.com/sindresorhus/is-online/blob/master/browser.js" rel="nofollow noreferrer">https://github.com/sindresorhus/is-online/blob/master/browser.js</a>:</p>
  
  <pre><code>const isOnline = async options =&gt; {
      options = {
          timeout: 5000,
          version: 'v4',
          ...options
      };
  
      // ...
  };
  </code></pre>
  
  <p>Looks to me like object destructuring using the <code>...</code> spread operator is not supported. The code is from a npm module I'm using called "is-online".</p>
  
  <p>I tried adding the "@babel/plugin-transform-destructuring" plugin to <code>.babelrc</code> to see if it could solve this. Everything compiled but this part of code was identical, so it still produced the same error.</p>
  
  <p>I found this Twitter conversation describes the same problem and also with Safari, yet he managed to solve it because he "needed to also activate the transform plugin for it: transform-object-rest-spread":</p>
  
  <p><a href="https://twitter.com/beberlei/status/984083670012256258" rel="nofollow noreferrer">https://twitter.com/beberlei/status/984083670012256258</a></p>
  
  <p>So I tried it and it didn't work.</p>
  
  <p>Then I stepped up my plugins game in <code>.babelrc</code> and after searching for similar cases online, trying different configs, updating babel using <code>npx babel-upgrade</code>, deleting and reinstalling <code>node_modules</code> and putting the plugins direclty into <code>module.rules[0].options.plugins</code> I gave up on it with:</p>
  
  <pre><code>// .babelrc
  
  {
      "presets": [
          "@babel/preset-env",
          "@babel/preset-react"
      ],
      "plugins": [
          "@babel/plugin-transform-spread",
          "@babel/plugin-transform-destructuring",
          "@babel/plugin-transform-parameters",
          "@babel/plugin-proposal-object-rest-spread",
      ]
  }
  </code></pre>
  
  <p>...but it still gives the error. It also tried to put "@babel/plugin-transform-runtime" in there: same.</p>
  
  <p>My webpack config as of right now:</p>
  
  <pre><code>// webpack.dev.js
  
  const path = require("path");
  const webpack = require("webpack");
  
  const TerserPlugin = require('terser-webpack-plugin');
  
  module.exports = [
  
      // App
  
      {
  
          mode: 'development',
  
          entry: {
              app: "./src/index.js"
          },
  
          module: {
              rules: [
                  {
                      test: /\.(js|jsx)$/,
                      exclude: /(node_modules|bower_components)/,
                      loader: "babel-loader",
                      options: {
                          presets: ["@babel/env"],
                      }
                  },
                  {
                      test: /\.css$/,
                      use: ["style-loader", "css-loader", "postcss-loader"]
                  },
                  {
                      test: /\.(png|svg|jpg|gif)$/,
                      use: [
                          'file-loader'
                      ]
                  }
              ]
          },
  
          resolve: { extensions: ["*", ".js", ".jsx"] },
  
          output: {
              filename: "app-v0.9.6.js",
              path: path.resolve(__dirname, "public/dist/"),
              publicPath: "/dist/"
          },
  
          plugins: [new webpack.HotModuleReplacementPlugin()],
  
          devServer: {
              host: '0.0.0.0',
              disableHostCheck: true,
              port: 80,
              contentBase: path.join(__dirname, "public/"),
              publicPath: "http://localhost:3000/dist/",
              hotOnly: true
          },
  
  // Fixes Safari 10-11 bugs
  // Has nothing to do with this question: already tried to comment this out
          optimization: {
              minimizer: [new TerserPlugin({
                  terserOptions: {
                      safari10: true,
                  },
              })],
          },
      },
  
      // Library
  
      {
  
          mode: 'development',
  
         // ... 
         // another output that's exposed as a global variable (library)
  
      }
  ];
  </code></pre>
  
  <p>Here are the dev dependencies:</p>
  
  <pre><code>// package.json
  
  ...
  
    "devDependencies": {
      "@babel/cli": "^7.5.5",
      "@babel/core": "^7.5.5",
      "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
      "@babel/plugin-transform-destructuring": "^7.0.0",
      "@babel/plugin-transform-parameters": "^7.0.0",
      "@babel/plugin-transform-runtime": "^7.5.5",
      "@babel/plugin-transform-spread": "^7.0.0",
      "@babel/preset-env": "^7.0.0",
      "@babel/preset-react": "^7.0.0",
      "babel-loader": "^8.0.6",
      "babel-preset-env": "^1.7.0",
      "css-loader": "^3.2.0",
      "file-loader": "^4.2.0",
      "html-webpack-plugin": "^3.2.0",
      "postcss-loader": "^3.0.0",
      "style-loader": "^0.23.1",
      "webpack": "^4.39.1",
      "webpack-cli": "^3.3.6",
      "webpack-dev-server": "^3.8.0",
      "webpack-merge": "^4.2.1"
    },
  
  ...
  </code></pre>
  
  <p>If someone knows how to configure it correctly I'd be very grateful.</p>