Webpack 4 Babel and React error in handling the JSX files - reactjs

Question

I keep getting this error, I tried several solutions using the search on this website and github but I cannot figure out what is wrong with it.
Here is what I have in my package.json
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
Here is my webpack config
module.export = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'main.js'
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
I created a .babelrc with this
{
"presets": ["env", "react", "es2015"]
}
Then I run
webpack-dev-server --mode development --hot
But if fails on this
ReactDOM.render(<App />, document.getElementById('app'));
This is the error I get in the console
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';
|
> ReactDOM.render(<App />, document.getElementById('app'));
# multi (webpack)-dev-server/client?http://localhost:8080
(webpack)/hot/dev-server.js ./src main[2]
I spent 3 hours on google, stackoverflow and github but I cannot figure out what is wrong with this. Any help is highly appreciated.
Thanks!

Answer 1

Just throwing it there but you have
module.export
while it should be
module.exports

Answer 2

The issue is your config handles only files with .jsx but you also have .js file so, Change regex in webpack config and recompile your app
const path = require("path");
module.export = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
publicPath: "/
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
resolve: {
modules : [
path.resolve("./src"),
path.resolve("./node_modules")
],
extensions: ['*', '.js', '.jsx']
}
}
replace your exiting modules with these dependencies
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"webpack": "^4.16.5",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
.babelrc
{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
}
}],
"react"
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
]
}