feat: support modern.js@3 (#4209)

Co-authored-by: caohuilin <caohuilin@bytedance.com>
Co-authored-by: fengdanping <fengdanping@bytedance.com>
Co-authored-by: CocooDanielle <dapeen.feng@gmail.com>

Author: 3 people

.changeset/config.json

@@ -19,7 +19,7 @@
       "@module-federation/bridge-vue3",
       "@module-federation/bridge-shared",
       "@module-federation/bridge-react-webpack-plugin",
-      "@module-federation/modern-js",
+      "@module-federation/modern-js-v3",
       "@module-federation/retry-plugin",
       "@module-federation/data-prefetch",
       "@module-federation/rsbuild-plugin",

.changeset/silly-beans-show.md

@@ -0,0 +1,16 @@
+---
+'shared-tree-shaking-with-server-provider': major
+'shared-tree-shaking-no-server-provider': major
+'shared-tree-shaking-with-server-host': major
+'shared-tree-shaking-no-server-host': major
+'remote5': major
+'remote6': major
+'create-module-federation': major
+'@module-federation/devtools': major
+'@module-federation/storybook-addon': major
+'@module-federation/rsbuild-plugin': major
+'@module-federation/modern-js-v3': major
+'@module-federation/rspack': major
+---
+
+feat: upgrade to modern js 3.0

apps/modern-component-data-fetch/host/modern.config.ts

@@ -1,21 +1,16 @@
 import { appTools, defineConfig } from '@modern-js/app-tools';
-import { moduleFederationPlugin } from '@module-federation/modern-js';
+import { moduleFederationPlugin } from '@module-federation/modern-js-v3';
 
 // https://modernjs.dev/en/configure/app/usage
 export default defineConfig({
-  runtime: {
-    router: true,
-  },
   server: {
     ssr: {
       mode: 'stream',
     },
     port: 5001,
   },
   plugins: [
-    appTools({
-      bundler: 'rspack',
-    }),
+    appTools(),
     moduleFederationPlugin({
       fetchServerQuery: { extraQuery: true },
     }),

apps/modern-component-data-fetch/host/module-federation.config.ts

@@ -1,4 +1,4 @@
-import { createModuleFederationConfig } from '@module-federation/modern-js';
+import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
 export default createModuleFederationConfig({
   name: 'host',
   remotes: {

apps/modern-component-data-fetch/host/package.json

@@ -27,17 +27,17 @@
   ],
   "dependencies": {
     "@babel/runtime": "7.28.2",
-    "@modern-js/runtime": "2.68.0",
-    "@module-federation/modern-js": "workspace:*",
+    "@modern-js/runtime": "3.0.0",
+    "@module-federation/modern-js-v3": "workspace:*",
     "antd": "4.24.15",
     "react": "~18.3.1",
     "react-dom": "~18.3.1"
   },
   "devDependencies": {
     "@modern-js-app/eslint-config": "2.59.0",
-    "@modern-js/app-tools": "2.68.0",
+    "@modern-js/app-tools": "3.0.0",
     "@modern-js/eslint-config": "2.59.0",
-    "@modern-js/tsconfig": "2.68.0",
+    "@modern-js/tsconfig": "3.0.0",
     "@types/jest": "~29.5.0",
     "@types/node": "^20.19.5",
     "@types/react": "~18.2.0",

apps/modern-component-data-fetch/host/src/modern-app-env.d.ts

@@ -1,4 +1,4 @@
 /// <reference types='@modern-js/app-tools/types' />
 /// <reference types='@modern-js/runtime/types' />
 /// <reference types='@modern-js/runtime/types/router' />
-/// <reference types='@module-federation/modern-js/types' />
+/// <reference types='@module-federation/modern-js-v3/types' />

apps/modern-component-data-fetch/host/src/routes/basic/page.tsx

@@ -1,5 +1,5 @@
-import { getInstance } from '@module-federation/modern-js/runtime';
-import { ERROR_TYPE } from '@module-federation/modern-js/react';
+import { getInstance } from '@module-federation/modern-js-v3/runtime';
+import { ERROR_TYPE } from '@module-federation/modern-js-v3/react';
 
 const Basic = getInstance()!.createLazyComponent({
   loader: () => {

apps/modern-component-data-fetch/host/src/routes/client-downgrade/page.tsx

@@ -1,4 +1,4 @@
-import { getInstance } from '@module-federation/modern-js/runtime';
+import { getInstance } from '@module-federation/modern-js-v3/runtime';
 
 const ClientDowngrade = getInstance()!.createLazyComponent({
   loader: () => {

apps/modern-component-data-fetch/host/src/routes/csr/page.tsx

@@ -1,4 +1,4 @@
-import { getInstance } from '@module-federation/modern-js/runtime';
+import { getInstance } from '@module-federation/modern-js-v3/runtime';
 
 const CsrWithFetchDataFromServerComponent = getInstance()!.createLazyComponent({
   noSSR: true,

apps/modern-component-data-fetch/host/src/routes/layout.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Outlet, useNavigate, useLocation } from '@modern-js/runtime/router';
 import { Layout, Menu } from 'antd';
-import { getInstance } from '@module-federation/modern-js/runtime';
-import { lazyLoadComponentPlugin } from '@module-federation/modern-js/react';
+import { getInstance } from '@module-federation/modern-js-v3/runtime';
+import { lazyLoadComponentPlugin } from '@module-federation/modern-js-v3/react';
 
 getInstance()!.registerPlugins([lazyLoadComponentPlugin()]);
 console.log('layout');