refactor: support async server reference (experiment)

package.json

@@ -46,6 +46,9 @@
       "react-server-dom-webpack": "$react-server-dom-webpack",
       "@types/react": "$@types/react",
       "@types/react-dom": "$@types/react-dom"
+    },
+    "patchedDependencies": {
+      "[email protected]": "patches/[email protected]"
     }
   }
 }

packages/react-server/src/features/server-action/server.tsx

@@ -39,6 +39,7 @@ export function createActionBundlerConfig(): BundlerConfig {
           id,
           name,
           chunks: [],
+          async: true,
         } satisfies ImportManifestEntry;
       },
     },

packages/react-server/src/plugin/index.ts

@@ -245,12 +245,6 @@ export function vitePluginReactServer(
               "__webpack_chunk_load__",
               "__vite_react_server_webpack_chunk_load__",
             );
-
-            // make server reference async for simplicity (stale chunkCache, etc...)
-            // see TODO in https://github.com/facebook/react/blob/33a32441e991e126e5e874f831bd3afc237a3ecf/packages/react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack.js#L131-L132
-            code = code.replaceAll("if (isAsyncImport(metadata))", "if (true)");
-            code = code.replaceAll("4 === metadata.length", "true");
-
             return code;
           }
           return;

patches/react-server-dom-webpack@19.0.0-rc-f2df5694-20240916.patch

@@ -0,0 +1,28 @@
+diff --git a/cjs/react-server-dom-webpack-server.edge.development.js b/cjs/react-server-dom-webpack-server.edge.development.js
+index 1df2ff9f969eb5e8fd875df5a7a0bbddc3d49f9f..7911983d70b6a4faaf3f324442c334f34612faae 100644
+--- a/cjs/react-server-dom-webpack-server.edge.development.js
++++ b/cjs/react-server-dom-webpack-server.edge.development.js
+@@ -2390,6 +2390,9 @@
+               '" in the React Server Manifest. This is probably a bug in the React Server Components bundler.'
+           );
+       }
++      if (resolvedModuleData.async) {
++        return [resolvedModuleData.id, resolvedModuleData.chunks, name, 1];
++      }
+       return [resolvedModuleData.id, resolvedModuleData.chunks, name];
+     }
+     function requireAsyncModule(id) {
+diff --git a/cjs/react-server-dom-webpack-server.edge.production.js b/cjs/react-server-dom-webpack-server.edge.production.js
+index 9f51d993e2bd17481f5d951018e33dcbb2cb7ce1..5871b870791506597fab7cf8db3f2ea0782371f0 100644
+--- a/cjs/react-server-dom-webpack-server.edge.production.js
++++ b/cjs/react-server-dom-webpack-server.edge.production.js
+@@ -1941,6 +1941,9 @@ function resolveServerReference(bundlerConfig, id) {
+           '" in the React Server Manifest. This is probably a bug in the React Server Components bundler.'
+       );
+   }
++  if (resolvedModuleData.async) {
++    return [resolvedModuleData.id, resolvedModuleData.chunks, name, 1];
++  }
+   return [resolvedModuleData.id, resolvedModuleData.chunks, name];
+ }
+ var chunkCache = new Map();