ERROR in ./src/index.tsx Module build failed (from ./node_modules/ts-loader/index.js):

I am trying to build react app into bundle.js using webpack so i am facing this issue

const path = require('path');

module.exports = {
    mode: 'development',
     devtool: 'inline-source-map',
    entry: './src/index.tsx', // Entry point of your application
    output: {
        path: path.resolve(__dirname, 'dist'), // Output directory
        filename: 'bundle.js', // Output filename
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
              },
            {
                test: /\.css$/, // Add this rule to handle CSS files
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.svg$/, // Add this rule to handle SVG files
                use: ['@svgr/webpack'],
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                  {
                    loader: 'file-loader',
                  },
                ],
              },
              
        ],
    },
    
    resolve: {
        extensions: ['.ts', '.tsx'],
    },
};

Expecting to build bundle.js using webpack