Compiling React with Webpack 4.x and Babel 8.x - reactjs

Question

I believe I am suffering from the velocity of changes within the Babel/React/Javascript world, as I try to connect the dots as to why this is not working.
I am trying to render a React component, but I can't seem to get the appropriate babel loader to do what it's supposed to do. First, the error:
SyntaxError: /Users/...../assets/js/index.js: Unexpected token (11:6)
9 | render() {
10 | return {
> 11 | <ReactAutocomplete
| ^
12 | items={[
13 | { id: 'foo', value: 'bar' },
14 | ]}
Here's my webpack config
var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
module.exports = {
context: __dirname,
entry: './app/assets/js/index',
output: {
path: path.resolve('./app/assets/webpack_bundles/'),
filename: "[name]-[hash].js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/env", "#babel/react"]
}
}
}
]
},
plugins: [
new BundleTracker({filename: 'webpack-stats.json'})
]
}
And the relevant libraries I've installed from package.json
"react": "^16.9.0",
"react-autocomplete": "^1.8.1",
"react-dom": "^16.9.0"
"#babel/core": "^7.6.0",
"#babel/plugin-proposal-object-rest-spread": "^7.5.5",
"#babel/preset-env": "^7.6.0",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.0.4",
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-react": "^7.14.3",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.39.3",
"webpack-bundle-analyzer": "^3.4.1",
"webpack-bundle-tracker": "^0.4.2-beta",
"webpack-cli": "^3.3.8",
"webpack-dev-server": "^3.8.0"
I have no .babelrc file currently, but I did at one point.
Thank you!

Answer 1

In render return you're passing the JSX in the object while it needs to be jsx in parenthesis
render(){
return (
<ReactAutocomplete />
)
}