Webpack: Module parse failed: Unexpected token - reactjs

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