You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. (webpack) - reactjs

Question

Im trying to configure webpack for React.
But when i ran "npm run start" i got this error in VSC 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, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import App from "./components/App";
|
> ReactDOM.render(<App />, document.getElementById("app"));
|
webpack.config.js:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.export = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
resolve: {
extensions: [".js", ".jsx"],
},
module: {
rules: [
{
test: /\.js|\.jsx$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.html$/,
use: [{ loader: "html-loader" }],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
filename: "./index.html",
}),
],
devServer: {
static: path.join(__dirname, "dist"),
compress: true,
port: 3000,
},
};
Index.js:
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
ReactDOM.render(<App />, document.getElementById("app"));
Package.json:
{
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"name": "curso-webpack-react",
"description": "",
"version": "1.0.0",
"main": "index.js",
"devDependencies": {
"#babel/core": "^7.15.5",
"#babel/preset-env": "^7.15.6",
"#babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^5.3.2",
"prettier": "2.4.1",
"webpack": "^5.53.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.2.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server",
"build": "webpack --mode production"
},
"repository": {
"type": "git",
"url": "git+https://github.com/platzi/curso-webpack-react.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/platzi/curso-webpack-react/issues"
},
"homepage": "https://github.com/platzi/curso-webpack-react#readme"
}
.babelrc:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
I don't know what to try anymore.
Iv tried to change test: /\.(.js|jsx)$/, to test: /\.js$|jsx/, or test: /\.js|\.jsx$/, but no results.
Iv also tried others solutions to the same problems that iv saw in others stackoverflow publications, but no results tho.