Webpack 4 Babel and React error in handling the JSX files

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"
  ]
}