Проблема вывода в webpack

Сделал всё как в этой статье https://hackernoon.com/how-to-build-a-react-project-from-scratch-using-webpack-4-and-babel-56d4a26afd32, но всегда по ходу выполнения всплывала вот эта ошибка:

ERROR in ./src/index.js 5:16 Module parse failed: Unexpected token (5:16) You may need an appropriate loader to handle this file type. | import App from "./components/App.js"; | ReactDOM.render(, document.getElementById("root"));'

Что делать без понятия, и в комментах статьи лазил, и гуглил, причём такая проблема почти со всеми сборками webpack'а, что уже только не перепробовал, вообще не знаю что делать, хотел разобраться в этом бандлере что да как там, сделать себе оптимальную сборку, но как я только не начну всегда эта проблема.

на всякий: Package.json:

{
  "name": "webpackassembly",
  "version": "1.0.0",
  "description": "",
  "main": "src/js/main.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-3": "^6.24.1",
    "css-loader": "^2.1.1",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.3.1"
  },
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
}

webpack-config.js:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname, "/dist"),
        filename: "index-bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ["babel-loader"]
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ]

};

App.js:

import React, { Component } from "react";
import '../styles/App.css';
class App extends Component {
    render() {
        return (
            <div>
                <h1>My React App!</h1>
            </div>
        );
    }
}
export default App;

index.js:

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App.js";
ReactDOM.render(<App />, document.getElementById("root"));