feat: replace data fetch file with temp file in client

Author: 2heal1

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

@@ -1,6 +1,6 @@
 import { kit } from '@module-federation/modern-js/runtime';
 import './index.css';
-import RemoteSSRComponent2 from 'remote/Content2';
+// import RemoteSSRComponent2 from 'remote/Content2';
 
 const { createRemoteSSRComponent } = kit;
 
@@ -18,19 +18,19 @@ const RemoteSSRComponent = createRemoteSSRComponent({
   },
 });
 
-// const RemoteSSRComponent2 = createRemoteSSRComponent({
-//   loader: () => import('remote/Content2'),
-//   loading: 'loading...',
-//   export: 'default',
-//   fallback: ({ error }) => {
-//     console.log(33333333333);
-//     console.error(error);
-//     if (error instanceof Error && error.message.includes('not exist')) {
-//       return <div>fallback - not existed id</div>;
-//     }
-//     return <div>fallback</div>;
-//   },
-// });
+const RemoteSSRComponent2 = createRemoteSSRComponent({
+  loader: () => import('remote/Content2'),
+  loading: 'loading...',
+  export: 'default',
+  fallback: ({ error }) => {
+    console.log(33333333333);
+    console.error(error);
+    if (error instanceof Error && error.message.includes('not exist')) {
+      return <div>fallback - not existed id</div>;
+    }
+    return <div>fallback</div>;
+  },
+});
 
 const Index = () => (
   <>

apps/modern-component-data-fetch/provider/src/components/Content.data.clientx.ts

@@ -0,0 +1,14 @@
+export type Data = {
+  data: string;
+};
+
+export const fetchData = async (): Promise<Data> => {
+  console.log('Content.data.client');
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        data: `fetch data from provider ${new Date()}`,
+      });
+    }, 1000);
+  });
+};

apps/modern-component-data-fetch/provider/src/components/Content.data.ts

@@ -3,6 +3,8 @@ export type Data = {
 };
 
 export const fetchData = async (): Promise<Data> => {
+  console.log('Content.data.server');
+
   return new Promise((resolve) => {
     setTimeout(() => {
       resolve({

packages/rsbuild-plugin/src/utils/addDataFetchExposes.ts

@@ -1,5 +1,6 @@
 import fs from 'fs';
 import path from 'path';
+import { TEMP_DIR } from '@module-federation/sdk';
 
 import type { moduleFederationPlugin } from '@module-federation/sdk';
 
@@ -21,7 +22,7 @@ const addDataFetchExpose = (
   if (!exposes[dataFetchKey]) {
     exposes[dataFetchKey] = filepath;
   }
-  return true;
+  return dataFetchKey;
 };
 
 export function addDataFetchExposes(
@@ -46,7 +47,16 @@ export function addDataFetchExposes(
       return;
     }
 
-    addDataFetchExpose(exposes, key, dataFetchPath);
+    const dataFetchKey = addDataFetchExpose(exposes, key, dataFetchPath);
+    if (!isServer && dataFetchKey) {
+      const tempDataFetchFilepath = path.resolve(
+        process.cwd(),
+        `node_modules/${TEMP_DIR}/data-fetch.ts`,
+      );
+      const content = `export const fetchData=()=>{throw new Error('should not be called')};`;
+      fs.writeFileSync(tempDataFetchFilepath, content);
+      exposes[dataFetchKey] = tempDataFetchFilepath;
+    }
     return;
   });
 }