Webpack 4 error

1 
You may need an appropriate loader to handle this file type.
| import ReactDOM from 'react-dom';
|
> ReactDOM.render(()=><h1>Hello from webpack</h1>,document.getElementById('app'))
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src main[1]

My Webpack Pack config file


const path = require('path')
const HTMLWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
	entry:"./src/index.js",
	output:{
		path:path.join(__dirname,'/dist'),
		filename:"main.js"
	},
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, // Config for js and jsx files
        exclude: "/node_modules/",
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader","style-loader"]
      }
    ]
  },
  plugins: [
    new HTMLWebPackPlugin({
      template: "./src/index.html",
      filename: "./src/index.html"
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

Here is my file structure
Untitled

here is package.json

{
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  },
  "license": "ISC",
  "dependencies": {
    "react": "16.4.1",
    "react-dom": "16.4.1"
  },
  "devDependencies": {
    "babel-core": "6.26.3",
    "babel-loader": "7.1.5",
    "babel-preset-env": "1.7.0",
    "babel-preset-react": "6.24.1",
    "css-loader": "1.0.0",
    "html-loader": "0.5.5",
    "html-webpack-plugin": "3.2.0",
    "mini-css-extract-plugin": "0.4.1",
    "style-loader": "0.21.0",
    "webpack": "4.16.1",
    "webpack-cli": "3.0.8",
    "webpack-dev-server": "3.1.4"
  }
}