Module parse failed: Unexpected token (xx.xx) You may need an appropriate loader to handle this file type react js

Question

I am developing the front end of a web-app using reactjs. Unfortunately I get an error when I run webpack --config webpack.dev.js on my project.

ERROR in ./src/index.js 13:17
Module parse failed: Unexpected token (13:17)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
| let root_dashboard = document.getElementById('root_dashboard_app')
> const element = (<App />)
| if (root_dashboard !== null) {
|     ReactDOM.render(
webpack 5.72.0 

The app was working fine before I upgraded to webpack 5.72.0 and react 17.0.2

I have tried the solutions proposed:

Module parse failed: Unexpected token

React - Module parse failed: Unexpected Token. You may need an appropriate loader to handle this file type

React build issus :You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

and ohters, but non of them work for my case

Here are the files involved:

index.js

import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
let root_dashboard = document.getElementById('root_dashboard_app')
const element = (<App />)
if (root_dashboard !== null) { ReactDOM.render(element,root_dashboard)}

.babelrc

{"presets": [
    ["@babel/preset-react",
        {   "runtime": "automatic",
            "importSource": "@emotion/core"},
        "@babel/preset-env",
        [   "es2015",
            "stage-0",
            "react"
        ]
    ]
],
"plugins": ["@emotion/babel-plugin",[
        "@babel/plugin-transform-react-jsx",{
            "runtime": "automatic" }
        ]
    ]
}

babel.config.js

module.exports = 
{
    presets: [["@babel/preset-react", "@babel/preset-env"]],
    plugins: ["@emotion/babel-plugin",["@babel/plugin-transform-react-jsx", {"runtime": "automatic"}]]
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const isProduction = process.env.NODE_ENV == 'production';
const stylesHandler = MiniCssExtractPlugin.loader;
var webpack = require('webpack');

const config = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, "build"),
        filename: 'bundle_frontend_codes.js'
    },
    resolve: {extensions: ['', '.js', '.jsx']},
    plugins: [
        new HtmlWebpackPlugin({template: 'index.html',}),
        new MiniCssExtractPlugin({filename: "all.css"}),
        new webpack.ProvidePlugin({"React": "react",}),
    ],
    module: {
        rules: [{
            test: /\.js$|jsx/,
            exclude: /node_modules/,
            include: [
                path.resolve(__dirname, "./src"),
            ],
        query: {
            presets: ["es2015", "react"]
        },
        use: {
            loader: 'babel-loader',
            options: {
                presets: [
                    '@babel/preset-env', 
                    '@babel/preset-react'
                ]
            }
        }
    },
    {
        test: /\.css$/i,
        use: [stylesHandler, 'css-loader', 'postcss-loader'],
    },
    {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: 'asset',
    },],},
    externals: {
        'react': 'React',
        'react-native': true,
    },
};

module.exports = () => {
    if (isProduction) {
        config.mode = 'production';
        config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
    } else { 
        config.mode = 'development';
    }
    return config;
};

webpack.dev.js

const { merge } = require('webpack-merge');
const common = require('./webpack.config.js');
module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
});

App.jsx

...
render(){
    ...
    return(<div>My App</div>)
}

Help is much appreciated !