Webpack 4 and Babel 7 "import" Uncaught SyntaxError: Unexpected identifier in React - reactjs

Question

I've been trying to set up Webpack 4 and Babel 7 to work with ES6 "import" in React. I keep getting "Uncaught SyntaxError: Unexpected identifier" at "import React from 'react';" in Chrome 71. It worked in Webpack 3 and Babel 6, so I think I'm doing something wrong with the Babel setup.
These are my dev dependencies:
"#babel/core": "^7.1.6",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/plugin-proposal-decorators": "^7.1.6",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/preset-env": "^7.1.6",
"#babel/preset-react": "^7.0.0",
"#babel/register": "^7.0.0",
"babel-loader": "^8.0.4",
"webpack": "^4.26.0",
"webpack-dev-server": "^3.1.10"
My .babelrc looks like this:
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
["#babel/plugin-proposal-decorators", { "legacy": true }],
["#babel/plugin-proposal-class-properties", { "loose": true }],
["#babel/syntax-dynamic-import"]
]
}
I've been trying babel.config.js as well, to no prevail.
My webpack-config.js file:
const HTMLWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');
const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: __dirname + '/src/index.html',
filename: 'index.html',
injext: 'body'
})
module.exports = {
entry: ["babel-polyfill", __dirname + '/src/index.js'],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css-loader!sass-loader')
},
]
},
output: {
filename: 'transformed.js',
path: __dirname + 'build'
},
devServer: {
contentBase: './src/',
historyApiFallback: true,
hot: true,
port: 8000,
publicPath: "/src/public",
noInfo: false
},
plugins: [
HTMLWebpackPluginConfig,
new ExtractTextPlugin('public/css/style.css', {
allChunks: true
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
}),
]}

Answer 1

Okay, i seemed to have fixed to issue after spitting through my webpack config. The issue was caused by this:
devServer: {
contentBase: './src/',
historyApiFallback: true,
hot: true,
port: 8000,
publicPath: "/src/public",
noInfo: false
},
I'll see if i can find what exactly causes Webpack not to bundle with this. Thanks for all the help anyway!