fix: workaround inconsitent hmr path issue

hi-ogawa · Jul 31, 2024 · a8ab872 · a8ab872
1 parent a12ce8f
commit a8ab872
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/packages/react-server/examples/basic/e2e/basic.test.ts b/packages/react-server/examples/basic/e2e/basic.test.ts
@@ -324,8 +324,7 @@ test("client hmr @dev", async ({ page }) => {
   expect(resText).toContain("<div>test-hmr-edit-div</div>");
 });
 
-// TODO
-test.skip("rsc + client + rsc hmr @dev", async ({ page }) => {
+test("rsc + client + rsc hmr @dev", async ({ page }) => {
   checkNoError(page);
 
   await page.goto("/test");

diff --git a/packages/react-server/src/features/assets/plugin.ts b/packages/react-server/src/features/assets/plugin.ts
@@ -95,6 +95,14 @@ export function vitePluginServerAssets({
 
     createVirtualPlugin(DEV_SSR_CSS.split(":")[1]!, async () => {
       tinyassert(!manager.buildType);
+      // normalize it again to workaround inconsistent hmr path issue
+      // https://github.com/hi-ogawa/reproductions/tree/main/vite-v6-hmr-path
+      const root = manager.config.root;
+      const clientReferences = [...manager.clientReferenceMap.keys()].map(
+        (file) => {
+          return file.startsWith(root) ? file.slice(root.length) : file;
+        },
+      );
       const styles = await Promise.all([
         `/******* react-server ********/`,
         collectStyle($__global.dev.reactServer, {
@@ -106,7 +114,7 @@ export function vitePluginServerAssets({
           entries: [
             entryBrowser,
             // TODO: dev should also use RouteManifest to manage client css
-            ...manager.clientReferenceMap.keys(),
+            ...clientReferences,
           ],
           ssr: false,
         }),