Webpack: Module parse failed: Unexpected token

Question

Getting this error with loadable components after building using webpack. I have tried lots of solutions from stackoverflow but nothing works for me.

ERROR in ../src/pages/EngineeringUI/index.js 9:14
Module parse failed: Unexpected token (9:14)
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 PageLoader from '@xyz/atoms/PageLoader';
| const LoadableEngineeringUI = loadable(() => import('./EngineeringUI'), {
>     fallback: <PageLoader />,
| });
| export default LoadableEngineeringUI;
 @ ./src/web/NestedRouter.js 29:0-132 142:29-42
 @ ./src/web/MainRouter.js 4:0-42 18:15-27
 @ ./src/web/App.js 26:0-38 77:95-105
 @ ./src/web/index.js 4:0-24 7:50-53
 @ ./src/index.js

here is my devDependancies:-

"devDependencies": {
        "@babel/core": "^7.3.4",
        "@babel/plugin-proposal-class-properties": "^7.18.6",
        "@babel/plugin-syntax-dynamic-import": "^7.7.4",
        "@babel/polyfill": "^7.7.0",
        "@babel/preset-env": "^7.7.4",
        "@babel/preset-flow": "^7.7.4",
        "@babel/preset-react": "^7.7.4",
        "@loadable/babel-plugin": "^5.13.2",
        "@loadable/webpack-plugin": "^5.15.2",
        "ajv": "^8.11.2",
        "babel-loader": "^8.0.5",
        "babel-preset-es2015": "6.3.13",
        "cheerio": "^1.0.0-rc.12",
        "clean-webpack-plugin": "^4.0.0",
        "css-loader": "^3.2.1",
        "cz-conventional-changelog": "^3.0.2",
        "exports-loader": "^0.6.4",
        "file-loader": "^5.1.0",
        "html-loader": "^0.5.1",
        "less-loader": "^4.0.5",
        "react-app-rewired": "2.1.8",
        "script-loader": "^0.7.1",
        "semantic-ui": "^2.4.2",
        "standard-version": "^7.0.1",
        "style-loader": "^1.0.1",
        "terser-webpack-plugin": "^2.3.5",
        "url-loader": "^3.0.0",
        "webpack": "^5.38.1",
        "webpack-cli": "^4.9.1",
        "webpack-dev-server": "^4.11.1"
    },

also added these rules in webpack.config.js file-

module: {
      rules: [{
          test: /\.m?(js|ts)x?$/,
          include: [
             path.resolve(__dirname, 'src'),
             path.resolve(__dirname, 'packages/apis/src'),
             path.resolve(__dirname, 'packages/atoms/src'),
             path.resolve(__dirname, 'packages/molecules/src'),
             path.resolve(__dirname, 'packages/organisms/src'),
             path.resolve(__dirname, 'packages/pages/src'),
             path.resolve(__dirname, 'packages/units/src'),
             path.resolve(__dirname, 'packages/themes/themes'),
             path.resolve(__dirname, 'packages/store/src'),
          ],
          resolve: {
            fullySpecified: false,
          },
          use: {
            loader: 'babel-loader',
            // options: {
            //   presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow', {
            //     'plugins': ['@babel/plugin-proposal-class-properties']
            //   }]
            // },
          },

        },
        {
          test: /\.xlsx$/,
          loader: "xlsx-loader"
        },
        {
          test: /\.html$/,
          use: {
            loader: 'html-loader',
            options: {
              attrs: false,
            },
          },
        },
        {
          test: /\.less$/,
          use: [{
              loader: 'style-loader',
            },
            {
              loader: 'css-loader',
            },
            {
              loader: 'less-loader',
            },
          ],
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader'],
        },
        {
          test: /\.(woff|woff2|eot|ttf)$/,
          use: {
            loader: 'url-loader',
            options: {
              name: 'fonts/[contenthash].[ext]',
            },
          },
        },
        {
          test: /\.(jpg|jpeg|png|svg|gif)$/,
          use: {
            loader: 'url-loader',
            options: {
              name: 'img/[contenthash].[ext]',
            },
          },
        },
      ],
    },

I have tried lots of solution from stack overflow like adding presets options but nothing work for me