Webpack npm run build with React Typescript

I was getting this error when I was trying to deploy my app in AWS linux ec2 server.

Module parse failed: Unexpected token

File was processed with these loaders:
 * ./node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
| const container = document.getElementById('root');
| const root = createRoot(container);
> root.render(<Provider store={store}>
|               <App />
|       </Provider>);

webpack 5.73.0 compiled with 1 error in 4284 ms

The tsconfig.json wasn't reading any React. After setting up webpack and tsconfig I was still missing I think 2 lines of code in the tsconfig file

"jsx": "react-jsx"

And this in webpack

     { 
        test: /\.tsx?$/, 
        loader: "ts-loader",
        exclude: /node_modules/,
        options: { allowTsInNodeModules: true }
      }

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "baseUrl": "./",
    "outDir": "./build",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "rootDir": "src",
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "suppressImplicitAnyIndexErrors": true,
    "importHelpers": true,
    "noImplicitAny": true,
    "removeComments": true,
    "module": "es6",
    "preserveConstEnums": true,
    "jsx": "react-jsx"
  },
  "include": ["src/**/*"],
  "exclude": ["build", "scripts"]
}

That fixed the error. I still need to optimize webpack and the devtool is killing the build process so, I had to take it out.

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  // watch: true,
  mode: "production",
  entry: "./src/index.tsx",
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'build')
  },
  optimization: {
    chunkIds: 'named',
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
        },
      }),
      new CssMinimizerPlugin(),
    ],
  },
  plugins: [
      new MiniCssExtractPlugin(), 
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, './public/index.html'), // template file
        filename: 'index.html', // output file
   }),
    new CleanWebpackPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', "@babel/preset-react"]
          }
        }
      },
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { importLoaders: 1 } },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'autoprefixer', {
                      overrideBrowserslist: ['last 3 versions', 'ie >9']
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
      {
        test: /\.scss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { importLoaders: 1 } },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "autoprefixer",
                    {
                      overrideBrowserslist: ['last 3 versions', 'ie >9']
                    },
                  ],
                ],
              },
            },
          },
          'sass-loader'
        ],
      },
     {
          test: /\.(svg|eot|woff|woff2|ttf)$/,
          use: ['file-loader']
      },
      { 
        test: /\.tsx?$/, 
        loader: "ts-loader",
        exclude: /node_modules/,
        options: { allowTsInNodeModules: true }
      }
    ]
  },
   resolve: {
     extensions: ["*",".ts", ".tsx", ".js", "jsx"]
  },
}