Plugin/Preset files are not allowed to export objects, only functions. Removing and keeping babel installs? Selection with webpack?

I'm trying to learn how to write a React App and set up from practically scratch.

I keep trying to run webpack --config webpack.dev.config.js. I keep getting this error. And I've tried using different loaders and presets.

What is wrong with my setup? Is it my npm node modules are outdated?

I've tried updating all my presets, loaders and even babel itself.

Error:

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/kyle.calica-steinhil/Code/react-components/react-imgur-album/node_modules/babel-preset-es2015/lib/index.js
    at createDescriptor (/Users/kyle.calica-steinhil/Code/react-components/react-imgur-album/node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
    at items.map (/Users/kyle.calica-steinhil/Code/react-components/react-imgur-album/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)

webpack.dev.config.js:

var path = require('path');

module.exports = {
  mode: 'development',
  // context: path.resolve(__dirname, 'src'),
  entry: path.resolve(__dirname,'src/index.js'),
  output: {
    filename: 'main.js',
    libraryTarget: "commonjs2"
  },
  module: {
     rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
         use: [
           {
             loader: 'babel-loader',
             options: {
               presets: ['es2015','react'],
               plugins: ['transform-class-properties']
            }
           }
         ]
       }
     ]
   },
   resolve: {
     extensions: ['.js']
   }
 };

package.json :

{
  "name": "react-imgur-album",
  "version": "0.0.1",
  "description": "React Component for displaying images in an Imgur Album",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.dev.config.js --progress --display-error-details"
  },
  "keywords": [
    "imgur",
    "react",
    "react-components",
    "component",
    "images",
    "photos",
    "pics"
  ],
  "author": "Kyle Calica",
  "license": "ISC",
  "dependencies": {
    "@babel/preset-react": "^7.0.0",
    "react-dom": "^16.5.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.1.2",
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "eslint": "^5.7.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-react": "^7.11.1",
    "fixed": "^0.3.0",
    "it": "^1.1.1",
    "path": "^0.12.7",
    "react": "^16.5.2",
    "webpack": "^4.22.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9"
  }
}

index.js:

import React, { Component } from 'react';

var imgurAPI = 'https://api.imgur.com/3/album/';

export default class ImgurAlbum extends Component {
  constructor(props){
    super(props);
    this.state = {
      imgurPosts: [],
      isLoading: true
    };
  }


  componentDidMount(){
    fetch(imgurAPI + this.props.album + '/images',{
      'headers':{
        'Authorizathion': 'client-id'
      }
    }).then(res => res.json())
    .then(data => console.log(data));
  }

  render(){
        return(
          <div>
            <h1>hi!</h1>
          </div>
        );
      }
}

I notice I have two babel cores installed, I don't know how to remove one, or which one to keep. Or even how to select which one with webpack?