I have setup the module federation using two remote apps into one host application. My host app is react and one the remote is also created using react, while the second remote app is created using vite+react+typescript. Module federation is not working with the second remote app

const { ModuleFederationPlugin } = require("webpack").container;
const HtmlWebpackPlugin = require("html-webpack-plugin");
const deps = require("./package.json").dependencies;

module.exports = () => ({
  devServer: {
    port: 3001,
  },
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.output.publicPath = "auto";
      webpackConfig.target = "es2020";
      webpackConfig.experiments = {
        outputModule: true,
      };
      webpackConfig.module.rules.push({
        test: /.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      });
      webpackConfig.plugins.push(
        new HtmlWebpackPlugin({
          template: "./public/index.html",
          inject: false,
        }),
        new ModuleFederationPlugin({
          name: "pokemonHome",
          library: { type: "commonjs" },
          filename: "remoteEntry.js",
          remotes: {
            pokemonList: "http://localhost:5173/assets/remoteEntry.js",
          },
          shared: {
            ...deps,
            react: {
              singleton: true,
              requiredVersion: deps.react,
            },
            "react-dom": {
              singleton: true,
              requiredVersion: deps["react-dom"],
            },
            jotai: {
              singleton: true,
              requiredVersion: deps.jotai,
            },
          },
        })
      );
      return webpackConfig;
    },
  },
});
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";
import commonjs from "@rollup/plugin-commonjs";
import { nodeResolve } from "@rollup/plugin-node-resolve";

export default defineConfig({
  plugins: [
    react(),
    nodeResolve({
      browser: true,
      preferBuiltins: true,
    }),
    commonjs({
      transformMixedEsModules: true,
    }),
    federation({
      name: "remoteApp",
      filename: "remoteEntry.js",
      exposes: {
        "./remoteApp": "./src/main.tsx",
      },
      shared: ["react", "react-dom"],
    }),
  ],
  build: {
    target: "esnext",
    modulePreload: false,
    minify: false,
    cssCodeSplit: false,
    rollupOptions: {
      output: {
        format: "es", // Ensure the format is set to ES Module
        entryFileNames: "[name].js",
        chunkFileNames: "[name].js",
        assetFileNames: "[name].[ext]",
      },
    },
  },
  preview: {
    port: 5173,
    strictPort: true,
  },
  server: {
    cors: true,
  },
});

I have setup the module federation using two remote apps into one host application. My host app is react and one the remote is also created using react, while the second remote app is created using vite+react+typescript. Module federation is not working with the second remote app.
It is throwing loading script failed error while i try to load the remote vite-react app