title: BABEL .default is not a valid Plugin property at Object.keys.forEach.key
body: <p>I am trying to create a prod and dev webpack config with a shared common config and I am running into issues with what appears to be Babel/core when I try to run <code>compile</code> and <code>build</code> commands. What is interesting is when I run <code>webpack</code> it compiles just fines. Please see below for the error I receive when I try to run either <code>npm run compile</code> or <code>npm run build</code> (see package.json for exact commands:</p>
  
  <pre><code>ERROR in ./src/index.js
  Module build failed (from ./node_modules/babel-loader/lib/index.js):
  Error: [BABEL] /Users/nigelfinley/Desktop/Projects/Final 
  Project/Showcase-Playlist-Generator/src/index.js: .default is not a 
  valid Plugin property at Object.keys.forEach.key 
  (/Users/nigelfinley/Desktop/Projects/Final Project/Showcase-Playlist- 
  Generator/node_modules/@babel/core/lib/
  config/validation/plugins.js:52:56)
  at Array.forEach (&lt;anonymous&gt;)
  at validatePluginObject (/Users.../node_modules/@babel/core/lib/config/validation/plugins.js:50:20)
  at instantiatePlugin (/Users.../node_modules/@babel/core/lib/config/full.js:209:55)
  at cachedFunction (/Users.../node_modules/@babel/core/lib/config/caching.js:33:19)
  at loadPluginDescriptor (/Users.../node_modules/@babel/core/lib/config/full.js:200:10)
  at config.plugins.reduce (/Users.../node_modules/@babel/core/lib/config/full.js:69:20)
  at Array.reduce (&lt;anonymous&gt;)
  at recurseDescriptors (/Users.../node_modules/@babel/core/lib/config/full.js:67:38)
  at loadFullConfig (/Users.../node_modules/@babel/core/lib/config/full.js:108:6)
  at process.nextTick (/Users.../node_modules/@babel/core/lib/transform.js:28:33)
  at _combinedTickCallback (internal/process/next_tick.js:131:7)
  at process._tickCallback (internal/process/next_tick.js:180:9)
  @ multi ./src/index.js main[0]
  </code></pre>
  
  <p>See below for my package.json and webpack configurations.</p>
  
  <p>package.json:</p>
  
  <pre><code>scripts": {
      "compile": "NODE_ENV=development webpack --config webpack.dev.js -w",
      "start": "nodemon server.js",
      "build": "NODE_ENV=production webpack --config webpack.prod.js -p",
      "lint": "eslint ."
    },
    "dependencies": {
      "@babel/plugin-proposal-class-properties": "^7.0.0-beta.55",
      "npm": "^3.10.8",
      "querystring": "^0.2.0",
      "react": "^16.4.2",
      "react-autosuggest": "^9.3.4",
      "react-bootstrap": "^0.31.0",
      "react-bootstrap-date-picker": "^5.1.0",
      "react-dates": "^17.2.0",
      "react-datetime": "^2.8.6",
      "react-dom": "^16.4.2",
      "react-redux": "^5.0.6",
      "react-router": "^4.2.0",
      "react-router-dom": "^4.3.1",
      "react-router-form": "^1.0.2",
      "react-router-redux": "^5.0.0-alpha.9",
      "redis": "^2.6.5",
      "redux": "^4.0.0",
      "redux-immutable-state-invariant": "^2.1.0",
      "redux-thunk": "^2.2.0",
      "request": "^2.79.0",
      "uglifyjs-webpack-plugin": "^1.3.0",
      "url-loader": "^0.5.7"
    },
    "engines": {
      "node": "&gt;=8.0.0"
    },
    "devDependencies": {
      "@babel/core": "^7.0.0",
      "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.55",
      "@babel/preset-env": "^7.0.0",
      "@babel/preset-react": "^7.0.0-beta.55",
      "eslint": "^5.1.0",
      "eslint-plugin-import": "2.2.0",
      "eslint-plugin-jsx-a11y": "^6.0.3",
      "eslint-plugin-react": "6.10.3",
      "json-loader": "^0.5.7",
      "morgan": "^1.9.0",
      "react-hot-loader": "^1.3.1",
      "redux-devtools-extension": "^2.13.5",
      "webpack": "^4.17.1",
      "webpack-bundle-analyzer": "^2.2.1",
      "webpack-cli": "^3.1.0",
      "webpack-dev-middleware": "^3.1.3",
      "webpack-hot-middleware": "^2.18.0",
      "webpack-merge": "4.1.4",
      "webpack-node-externals": "^1.6.0"
    }
  }
  </code></pre>
  
  <p>webpack.common.js</p>
  
  <pre><code>const path = require('path');
  
  module.exports = {
      entry: [
          './src/index.js',
      ],
      output: {
          filename: 'bundle.js',
          path: path.resolve(__dirname, 'public'),
          publicPath: '/'
      },
      devtool: 'eval-source-map',
      cache: true,
      module: {
          rules: [
              {
                  test: /\.js$/,
                  exclude: /(node_modules|bower_components)/,
                  use: {
                    loader: 'babel-loader',
                    options: {
                      presets: ['@babel/preset-env', '@babel/preset-react'],
                      plugins: [require('@babel/plugin-proposal-class-properties')]
                    }
                  }
                },
              {
                  test: /\.(jpg|png|svg)$/,
                  loader: 'url-loader',
                  options: {
                      limit: 25000
                  }
              },
              {
                  test: /\.json$/,
                  loader: 'json-loader'
              },
              {
                  test: /\.(eot|ttf|woff|woff2)$/,
                  loader: 'file-loader',
                  options: {
                      name: 'fonts/[name].[ext]'
                  }
              }
          ],
      },
      resolve: {
          extensions: ['.webpack.js', '.web.js', '.js', '.jsx']
      },
      node: {
          console: true,
          fs: 'empty',
          net: 'empty',
          tls: 'empty'
      },
      devServer: {
          port: 8080,
          hot: true,
          proxy: {
              '/': {
                  target: 'http://localhost:8888',
                  secure: false,
                  prependPath: false
              }
          },
          contentBase: [path.join(__dirname, '/src/assets'), path.join(__dirname, '/public')],
          publicPath: 'http://localhost:8080/',
          historyApiFallback: true
      }
  };
  </code></pre>
  
  <p>webpack.dev.js</p>
  
  <pre><code>const webpack = require('webpack');
  const merge = require('webpack-merge');
  const common = require('./webpack.config.js');
  
  module.exports = merge(common, {
      mode: 'development',
      devtool: 'cheap-module-eval-source-map',
      plugins: [
          new webpack.DefinePlugin({
              'process.env': {
                  NODE_ENV: JSON.stringify('development'),
              },
          }),
          new webpack.HotModuleReplacementPlugin(),
          new webpack.NoEmitOnErrorsPlugin(),
      ],
  });
  </code></pre>
  
  <p>webpack.prod.js</p>
  
  <pre><code>const webpack = require('webpack');
  const merge = require('webpack-merge');
  const common = require('./webpack.config.js');
  const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
  
  module.exports = merge(common, {
      devtool: 'source-map',
      mode: 'production',
      cache: false,
      plugins: [
          new webpack.DefinePlugin({
              'process.env': {
                  // Useful to reduce the size of client-side libraries, e.g. react
                  NODE_ENV: JSON.stringify('production'),
              },
          }),
          new UglifyJSPlugin({
              sourceMap: true
          }),
      ]
  });
  </code></pre>
  
  <p>Any ideas or thoughts on why this is happening?</p>