I’m trying to do Module Federation with Remix Vite.
I’ve tried with React Vanilla using the same method and works flawlessly but failed when I tried to use it with Remix latest (Vite).

Current Packages

"@originjs/vite-plugin-federation": "^1.3.5",
"@remix-run/node": "^2.10.3"

Current Settings (Remote)

app/components/Cardio.tsx

export function Cardio() {
    return <h1>Hello World from Cardio</h1>;
}

vite.config.ts

import { defineConfig } from "vite";
import { vitePlugin as remix } from "@remix-run/dev";
import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
    plugins: [
        react(),
        remix(),
        federation({
            name: "remoteApp",
            filename: "remoteEntry.js",
            exposes: {
                "./Cardio": "./app/components/Cardio.tsx",
            },
            shared: ["react", "react-dom"],
        }),
        tsconfigPaths(),
    ],
    build: {
        modulePreload: false,
        target: "esnext",
        minify: false,
        cssCodeSplit: false,
    },
});

I’ve also tried this config (without importing react):

import { defineConfig } from "vite";
import { vitePlugin as remix } from "@remix-run/dev";
import federation from "@originjs/vite-plugin-federation";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
    plugins: [
        remix(),
        federation({
            name: "remoteApp",
            filename: "remoteEntry.js",
            exposes: {
                "./Cardio": "./app/components/Cardio.tsx",
            },
            shared: ["react", "react-dom"],
        }),
        tsconfigPaths(),
    ],
    build: {
        modulePreload: false,
        target: "esnext",
        minify: false,
        cssCodeSplit: false,
    },
});

when I ran yarn build (remix vite:build) it gives me the following rollup error
Entry module "react-dom" cannot be external.. I also tried to use npx vite build, it successfully build but only client components, server components are not built, but I kept going just to test it.

Current Settings (Host)

vite.config.ts

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
    plugins: [
        react(),
        federation({
            name: "app",
            remotes: {
                remoteA: "http://127.0.0.1:3000/assets/remoteEntry.js",
            },
            shared: ["react", "react-dom"],
        }),
        remix({
            future: {
                v3_fetcherPersist: true,
                v3_relativeSplatPath: true,
                v3_throwAbortReason: true,
            },
        }),
        tsconfigPaths(),
    ],
    build: {
        modulePreload: false,
        target: "esnext",
        minify: false,
        cssCodeSplit: false,
    },
});

and also tried without importing react, but then I use the component in my page and open it in my browser, it shows
Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. Received protocol 'http:', I’ve also tried changing the plugins order bit still doesn’t work.

Is there something I’m missing here or current Remix version is not available for Module Federation?

Thanks in advance