babel-loader 9.1.0 does not recognize JSX syntax

Question

I am on node 20.10.0 and npm version 10. I am on windows 10.

I just clone the repo, ran npm install and then npm run build, getting this error

ERROR in ./src/js/components/_programs/index.jsx 141:8
Module parse failed: Unexpected token (141:8)
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
|
|       return (
>         <div>
|           <div className="main__sidebar">
|           <Filters
 @ ./src/js/main.js 23:0-32

My webpack on version 5 and here is the following configuration:

const path = require('path');

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

const config = {
  entry: {
    main: ['./src/css/main.css', './src/js/main.js'],
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js',
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        type: 'asset/source',
        use: [
          {
            loader: 'twig-html-loader',
            options: {
              namespaces: {
                layouts: path.resolve(__dirname, 'src/html/layouts'),
                components: path.resolve(__dirname, 'src/html/components'),
              },
              extend(Twig) {
                Twig.exports.extendFunction('inline_svg', (name) => Twig.functions.source(`./src/static/img/${name}.svg`));
              },
            },
          },
        ],
      },
      {
        test: /\.svg$/,
        type: 'asset/source',
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',
            options: {
              url: false,
              importLoaders: 1,
            },
          },
          {
            loader: 'postcss-loader',
          },
        ],
      },
      {
        test: /\.(js|jsx)$/,
        include: /src\/js/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                useBuiltIns: 'usage',
                corejs: 3,
              }],
            ],
            plugins: [
              ['@babel/plugin-transform-react-jsx', {
                pragma: 'h',
                pragmaFrag: 'Fragment',
              }],
            ],
          },
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      react: 'preact/compat',
      'react-dom/test-utils': 'preact/test-utils',
      'react-dom': 'preact/compat',
    },
  },
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'src/static',
          noErrorOnMissing: true,
        },
      ],
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
    }),
  ],
  optimization: {
    minimizer: ['...', new CssMinimizerPlugin()],
  },
};

module.exports = (env, argv) => {
  if (argv.mode === 'production') {
    config.plugins.unshift(new CleanWebpackPlugin());
  }
  return config;
};

My package.json

{
  "name": "build",
  "version": "0.1.0",
  "browserslist": [
    "defaults and supports es6"
  ],
  "scripts": {
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production",
    "svgo": "svgo src/static/img",
    "stylelint": "stylelint \"**/*.css\"",
    "eslint": "eslint \"**/*.{js,jsx}\"",
    "deploy": "webpack --mode production && zip -r dist/dist.zip dist && s3-deploy \"dist/**/*\" --cwd dist --region us-west-2 --bucket clarkson.mstoner.com"
  },
  "dependencies": {
    "core-js": "^3.26.1",
    "dom-focus-lock": "^1.1.0",
    "file-loader": "^6.2.0",
    "flickity": "^3.0.0",
    "flickity-imagesloaded": "^2.0.0",
    "html-react-parser": "^3.0.16",
    "minimodal": "^1.2.2",
    "preact": "^10.13.2",
    "sanitize.css": "^13.0.0",
    "swiper": "^9.1.1",
    "url-search-params-polyfill": "^8.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.5",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^9.1.0",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.7.3",
    "css-minimizer-webpack-plugin": "^4.2.2",
    "eslint": "^8.30.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-react": "^7.31.11",
    "eslint-plugin-react-hooks": "^4.6.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.7.2",
    "postcss": "^8.4.20",
    "postcss-import": "^15.1.0",
    "postcss-loader": "^7.0.2",
    "postcss-mixins": "^9.0.4",
    "postcss-preset-env": "^7.8.3",
    "s3-deploy": "^1.4.0",
    "stylelint": "^14.16.0",
    "stylelint-config-standard": "^29.0.0",
    "svgo": "^3.0.2",
    "twig-html-loader": "^0.1.9",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  }
}

I tried with

• npm cli (clean install) - failed.
• deleted the node_modules folder - failed
• deleted the package-lock.json and ran npm install and npm run build - same error
• tried with lot of suggesions available on the net - still no success

Other developer saying, its working on their environment, but its not working from my side, although I did not change any configuration.

Could anyone help me some hints, what could be the problem?