chore: use official @module-federation/vite

examples/monorepo-module-federation/apps/blog-posts/package.json

@@ -37,7 +37,7 @@
     "react-router": "^7.0.2"
   },
   "devDependencies": {
-    "@originjs/vite-plugin-federation": "^1.2.3",
+    "@module-federation/vite": "^1.16.8",
     "@types/node": "^20",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

examples/monorepo-module-federation/apps/blog-posts/vite.config.ts

@@ -1,4 +1,4 @@
-import federation from "@originjs/vite-plugin-federation";
+import { federation } from "@module-federation/vite";
 import react from "@vitejs/plugin-react";
 import * as dns from "dns";
 import { defineConfig } from "vite";
@@ -12,7 +12,8 @@ export default defineConfig({
     react(),
     federation({
       name: "blog_posts",
-      filename: "blog_posts.js",
+      filename: "remoteEntry.js",
+      dts: false,
       exposes: {
         "./BlogPostList": "./src/pages/blog-posts/list.tsx",
         "./BlogPostShow": "./src/pages/blog-posts/show.tsx",
@@ -22,7 +23,7 @@ export default defineConfig({
       shared: [
         "react",
         "react-dom",
-        "react-router-dom",
+        "react-router",
         "@refinedev/core",
         "@refinedev/antd",
         "antd",

examples/monorepo-module-federation/apps/categories/package.json

@@ -37,7 +37,7 @@
     "react-router": "^7.0.2"
   },
   "devDependencies": {
-    "@originjs/vite-plugin-federation": "^1.2.3",
+    "@module-federation/vite": "^1.16.8",
     "@types/node": "^20",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

examples/monorepo-module-federation/apps/categories/vite.config.ts

@@ -1,4 +1,4 @@
-import federation from "@originjs/vite-plugin-federation";
+import { federation } from "@module-federation/vite";
 import react from "@vitejs/plugin-react";
 import * as dns from "dns";
 import { defineConfig } from "vite";
@@ -12,7 +12,8 @@ export default defineConfig({
     react(),
     federation({
       name: "categories",
-      filename: "categories.js",
+      filename: "remoteEntry.js",
+      dts: false,
       exposes: {
         "./CategoryList": "./src/pages/categories/list.tsx",
         "./CategoryShow": "./src/pages/categories/show.tsx",
@@ -22,7 +23,7 @@ export default defineConfig({
       shared: [
         "react",
         "react-dom",
-        "react-router-dom",
+        "react-router",
         "@refinedev/core",
         "@refinedev/antd",
         "antd",

examples/monorepo-module-federation/apps/host/.env.example

@@ -1 +1 @@
-VITE_CATEGORIES_URL="http://localhost:4002/assets/categories.js"
+VITE_CATEGORIES_URL="http://localhost:4002/remoteEntry.js"

examples/monorepo-module-federation/apps/host/package.json

@@ -35,7 +35,7 @@
     "react-router": "^7.0.2"
   },
   "devDependencies": {
-    "@originjs/vite-plugin-federation": "^1.2.3",
+    "@module-federation/vite": "^1.16.8",
     "@types/node": "^20",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

examples/monorepo-module-federation/apps/host/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect } from "react";
+import React, { Suspense } from "react";
 
 import { Authenticated, GitHubBanner, Refine } from "@refinedev/core";
 import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar";
@@ -25,7 +25,6 @@ import { ColorModeContextProvider } from "./contexts/color-mode";
 import { ForgotPassword } from "./pages/forgotPassword";
 import { Login } from "./pages/login";
 import { Register } from "./pages/register";
-import type { ExtendedWindow } from "./types";
 
 const BlogPostList = React.lazy(() => import("blog_posts/BlogPostList"));
 const BlogPostShow = React.lazy(() => import("blog_posts/BlogPostShow"));
@@ -37,19 +36,7 @@ const CategoryShow = React.lazy(() => import("categories/CategoryShow"));
 const CategoryEdit = React.lazy(() => import("categories/CategoryEdit"));
 const CategoryCreate = React.lazy(() => import("categories/CategoryCreate"));
 
-declare let window: ExtendedWindow;
-
 function App() {
-  useEffect(() => {
-    // This is not as elegant as production code as we cannot use such in production.
-    // But lets assume these envs are coming from a environment handler.
-    // And this is only for sample case.
-    if (import.meta.env.VITE_CATEGORIES_URL) {
-      // This is where we set the payment remote's URL.
-      window.categoriesUrl = import.meta.env.VITE_CATEGORIES_URL;
-    }
-  }, []);
-
   return (
     <BrowserRouter>
       <GitHubBanner />

examples/monorepo-module-federation/apps/host/vite.config.ts

@@ -1,53 +1,60 @@
-import federation from "@originjs/vite-plugin-federation";
+import { federation } from "@module-federation/vite";
 import react from "@vitejs/plugin-react";
 import * as dns from "dns";
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 dns.setDefaultResultOrder("verbatim");
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    react(),
-    federation({
-      name: "host",
-      remotes: [
-        {
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, __dirname, "");
+
+  return {
+    plugins: [
+      react(),
+      federation({
+        name: "host",
+        dts: false,
+        remotes: {
           blog_posts: {
-            external: "http://localhost:4001/assets/blog_posts.js",
-            from: "vite",
-            externalType: "url",
+            type: "module",
+            name: "blog_posts",
+            entry: "http://localhost:4001/remoteEntry.js",
+            entryGlobalName: "blog_posts",
+            shareScope: "default",
           },
-        },
-        {
           categories: {
-            external: "Promise.resolve(window.categoriesUrl)",
-            from: "vite",
-            externalType: "promise",
+            type: "module",
+            name: "categories",
+            entry:
+              env.VITE_CATEGORIES_URL || "http://localhost:4002/remoteEntry.js",
+            entryGlobalName: "categories",
+            shareScope: "default",
           },
         },
-      ],
-      shared: [
-        "react",
-        "react-dom",
-        "react-router-dom",
-        "@refinedev/core",
-        "@refinedev/antd",
-        "antd",
-      ],
-    }),
-    tsconfigPaths({ root: __dirname }),
-  ],
+        filename: "remoteEntry.js",
+        shared: [
+          "react",
+          "react-dom",
+          "react-router",
+          "@refinedev/core",
+          "@refinedev/antd",
+          "antd",
+        ],
+      }),
+      tsconfigPaths({ root: __dirname }),
+    ],
 
-  preview: {
-    host: "localhost",
-    port: 4000,
-    strictPort: true,
-  },
-  build: {
-    target: "esnext",
-    minify: false,
-    cssCodeSplit: false,
-  },
+    preview: {
+      host: "localhost",
+      port: 4000,
+      strictPort: true,
+    },
+    build: {
+      target: "esnext",
+      minify: false,
+      cssCodeSplit: false,
+    },
+  };
 });