Merge branch 'main' into 08-11-refactor_rsc_remove_server_optimizedeps.include

hi-ogawa · web-flow · commit 1d4faa73ec34 · 2025-08-12T18:40:17.000+09:00
diff --git a/packages/plugin-rsc/CHANGELOG.md b/packages/plugin-rsc/CHANGELOG.md
@@ -1,3 +1,10 @@
+## <small>[0.4.19](https://github.com/vitejs/vite-plugin-react/compare/plugin-rsc@0.4.18...plugin-rsc@0.4.19) (2025-08-11)</small>
+### Bug Fixes
+
+* **rsc:** fix cjs default import on module runner ([#695](https://github.com/vitejs/vite-plugin-react/issues/695)) ([c329914](https://github.com/vitejs/vite-plugin-react/commit/c329914c572473d4f09261fa0eba77484e720d2e))
+* **rsc:** replace `?v=` check with more robust `node_modules` detection ([#696](https://github.com/vitejs/vite-plugin-react/issues/696)) ([f0359c4](https://github.com/vitejs/vite-plugin-react/commit/f0359c4eca48ca6eb2ba98254a272949a13f149e))
+* **rsc:** replace non-optimized server cjs warning with debug only log ([#698](https://github.com/vitejs/vite-plugin-react/issues/698)) ([a88fb2d](https://github.com/vitejs/vite-plugin-react/commit/a88fb2ded4c8b9f42f2fee70a482615f331122f4))
+
 ## <small>[0.4.18](https://github.com/vitejs/vite-plugin-react/compare/plugin-rsc@0.4.17...plugin-rsc@0.4.18) (2025-08-11)</small>
 ### Bug Fixes
 
diff --git a/packages/plugin-rsc/e2e/basic.test.ts b/packages/plugin-rsc/e2e/basic.test.ts
@@ -473,6 +473,22 @@ function defineTest(f: Fixture) {
         'color',
         'rgb(255, 165, 0)',
       )
+      await expectNoDuplicateServerCss(page)
+    })
+
+    async function expectNoDuplicateServerCss(page: Page) {
+      // check only manually inserted stylesheet link exists
+      // (toHaveAttribute passes only when locator matches single element)
+      await expect(page.locator('link[rel="stylesheet"]')).toHaveAttribute(
+        'href',
+        '/test-style-server-manual.css',
+      )
+    }
+
+    test('no duplicate server css', async ({ page }) => {
+      await page.goto(f.url())
+      await waitForHydration(page)
+      await expectNoDuplicateServerCss(page)
     })
 
     test('adding/removing css client @js', async ({ page }) => {
@@ -557,6 +573,7 @@ function defineTest(f: Fixture) {
         'color',
         'rgb(255, 165, 0)',
       )
+      await expectNoDuplicateServerCss(page)
     })
 
     // TODO: need a way to add/remove links on server hmr. for now, it requires a manually reload.
diff --git a/packages/plugin-rsc/examples/basic/package.json b/packages/plugin-rsc/examples/basic/package.json
@@ -12,7 +12,6 @@
     "cf-release": "wrangler deploy"
   },
   "dependencies": {
-    "@vitejs/plugin-rsc": "latest",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
   },
@@ -21,13 +20,14 @@
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "latest",
-    "@vitejs/test-dep-transitive-cjs": "file:./test-dep/transitive-cjs",
-    "@vitejs/test-dep-transitive-use-sync-external-store": "file:./test-dep/transitive-use-sync-external-store",
+    "@vitejs/plugin-rsc": "latest",
     "@vitejs/test-dep-client-in-server": "file:./test-dep/client-in-server",
     "@vitejs/test-dep-client-in-server2": "file:./test-dep/client-in-server2",
+    "@vitejs/test-dep-css-in-server": "file:./test-dep/css-in-server",
     "@vitejs/test-dep-server-in-client": "file:./test-dep/server-in-client",
     "@vitejs/test-dep-server-in-server": "file:./test-dep/server-in-server",
-    "@vitejs/test-dep-css-in-server": "file:./test-dep/css-in-server",
+    "@vitejs/test-dep-transitive-cjs": "file:./test-dep/transitive-cjs",
+    "@vitejs/test-dep-transitive-use-sync-external-store": "file:./test-dep/transitive-use-sync-external-store",
     "rsc-html-stream": "^0.0.7",
     "tailwindcss": "^4.1.11",
     "vite": "^7.1.1",
diff --git a/packages/plugin-rsc/examples/basic/public/test-style-server-manual.css b/packages/plugin-rsc/examples/basic/public/test-style-server-manual.css
diff --git a/packages/plugin-rsc/examples/basic/src/routes/style-server/server.tsx b/packages/plugin-rsc/examples/basic/src/routes/style-server/server.tsx
@@ -10,7 +10,7 @@ export function TestStyleServer() {
       </div>
       <link
         rel="stylesheet"
-        href="/test.css"
+        href="/test-style-server-manual.css"
         precedence="test-style-server-manual"
       />
       <div className="test-style-server-manual">test-style-server-manual</div>
diff --git a/packages/plugin-rsc/examples/basic/src/server.tsx b/packages/plugin-rsc/examples/basic/src/server.tsx
@@ -22,15 +22,17 @@ export default async function handler(request: Request): Promise<Response> {
     nonce,
   })
   if (nonce && response.headers.get('content-type')?.includes('text/html')) {
-    response.headers.set(
-      'content-security-policy',
-      `default-src 'self'; ` +
-        // `unsafe-eval` is required during dev since React uses eval for findSourceMapURL feature
-        `script-src 'self' 'nonce-${nonce}' ${
-          import.meta.env.DEV ? `'unsafe-eval'` : ``
-        } ; ` +
-        `style-src 'self' 'nonce-${nonce}'; `,
-    )
+    const cspValue = [
+      `default-src 'self';`,
+      // `unsafe-eval` is required during dev since React uses eval for findSourceMapURL feature
+      `script-src 'self' 'nonce-${nonce}' ${import.meta.env.DEV ? `'unsafe-eval'` : ``};`,
+      `style-src 'self' 'nonce-${nonce}';`,
+      // allow blob: worker for Vite server ping shared worker
+      import.meta.hot && `worker-src 'self' blob:;`,
+    ]
+      .filter(Boolean)
+      .join('')
+    response.headers.set('content-security-policy', cspValue)
   }
   return response
 }
diff --git a/packages/plugin-rsc/examples/browser-mode/package.json b/packages/plugin-rsc/examples/browser-mode/package.json
@@ -10,14 +10,14 @@
     "preview": "false && vite preview"
   },
   "dependencies": {
-    "@vitejs/plugin-rsc": "latest",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
   },
   "devDependencies": {
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "latest",
+    "@vitejs/plugin-rsc": "latest",
     "vite": "^7.1.1"
   }
 }
diff --git a/packages/plugin-rsc/examples/e2e/package.json b/packages/plugin-rsc/examples/e2e/package.json
@@ -3,8 +3,8 @@
   "private": true,
   "type": "module",
   "devDependencies": {
-    "@vitejs/plugin-rsc": "latest",
     "@vitejs/plugin-react": "latest",
+    "@vitejs/plugin-rsc": "latest",
     "babel-plugin-react-compiler": "19.1.0-rc.2"
   }
 }
diff --git a/packages/plugin-rsc/examples/no-ssr/package.json b/packages/plugin-rsc/examples/no-ssr/package.json
@@ -10,14 +10,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@vitejs/plugin-rsc": "latest",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
   },
   "devDependencies": {
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "latest",
+    "@vitejs/plugin-rsc": "latest",
     "vite": "^7.1.1"
   }
 }
diff --git a/packages/plugin-rsc/examples/react-router/package.json b/packages/plugin-rsc/examples/react-router/package.json
@@ -13,7 +13,6 @@
     "cf-release": "wrangler deploy -c dist/rsc/wrangler.json && wrangler deploy"
   },
   "dependencies": {
-    "@vitejs/plugin-rsc": "latest",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-router": "7.7.0"
@@ -26,6 +25,7 @@
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "latest",
+    "@vitejs/plugin-rsc": "latest",
     "tailwindcss": "^4.1.11",
     "vite": "^7.1.1",
     "vite-plugin-inspect": "^11.3.2",
diff --git a/packages/plugin-rsc/examples/ssg/package.json b/packages/plugin-rsc/examples/ssg/package.json
@@ -10,7 +10,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@vitejs/plugin-rsc": "latest",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
   },
@@ -19,6 +18,7 @@
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "latest",
+    "@vitejs/plugin-rsc": "latest",
     "vite-plugin-inspect": "^11.3.2"
   }
 }
diff --git a/packages/plugin-rsc/examples/starter-cf-single/package.json b/packages/plugin-rsc/examples/starter-cf-single/package.json
@@ -11,14 +11,14 @@
     "release": "wrangler deploy"
   },
   "dependencies": {
-    "@vitejs/plugin-rsc": "latest",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
   },
   "devDependencies": {
     "@cloudflare/vite-plugin": "^1.11.2",
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
-    "@vitejs/plugin-react": "latest"
+    "@vitejs/plugin-react": "latest",
+    "@vitejs/plugin-rsc": "latest"
   }
 }
diff --git a/packages/plugin-rsc/examples/starter/package.json b/packages/plugin-rsc/examples/starter/package.json
@@ -10,14 +10,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@vitejs/plugin-rsc": "latest",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
   },
   "devDependencies": {
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "latest",
+    "@vitejs/plugin-rsc": "latest",
     "rsc-html-stream": "^0.0.7",
     "vite": "^7.1.1",
     "vite-plugin-inspect": "^11.3.2"
diff --git a/packages/plugin-rsc/package.json b/packages/plugin-rsc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-rsc",
-  "version": "0.4.18",
+  "version": "0.4.19",
   "description": "React Server Components (RSC) support for Vite.",
   "keywords": [
     "vite",
diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts
@@ -837,7 +837,8 @@ window.__vite_plugin_react_preamble_installed__ = true;
         const resolvedEntry = await this.resolve(source)
         assert(resolvedEntry, `[vite-rsc] failed to resolve entry '${source}'`)
         code += `await import(${JSON.stringify(resolvedEntry.id)});`
-        // TODO: this doesn't have to wait for "vite:beforeUpdate" and should do it right after browser css import.
+        // server css is normally removed via `RemoveDuplicateServerCss` on useEffect.
+        // this also makes sure they are removed on hmr in case initial rendering failed.
         code += /* js */ `
 const ssrCss = document.querySelectorAll("link[rel='stylesheet']");
 import.meta.hot.on("vite:beforeUpdate", () => {
@@ -1910,6 +1911,36 @@ export function vitePluginRscCss(
         }
       },
     },
+    createVirtualPlugin(
+      'vite-rsc/remove-duplicate-server-css',
+      async function () {
+        // Remove duplicate css during dev due to server rendered <link> and client inline <style>
+        // https://github.com/remix-run/react-router/blob/166fd940e7d5df9ed005ca68e12de53b1d88324a/packages/react-router/lib/dom-export/hydrated-router.tsx#L245-L274
+        assert.equal(this.environment.mode, 'dev')
+        function removeFn() {
+          document
+            .querySelectorAll("link[rel='stylesheet']")
+            .forEach((node) => {
+              if (
+                node instanceof HTMLElement &&
+                node.dataset.precedence?.startsWith('vite-rsc/')
+              ) {
+                node.remove()
+              }
+            })
+        }
+        return `\
+"use client"
+import React from "react";
+export default function RemoveDuplicateServerCss() {
+  React.useEffect(() => {
+    (${removeFn.toString()})();
+  }, []);
+  return null;
+}
+`
+      },
+    ),
   ]
 }
 
@@ -1940,6 +1971,7 @@ function generateResourcesCode(depsCode: string) {
   const ResourcesFn = (
     React: typeof import('react'),
     deps: ResolvedAssetDeps,
+    RemoveDuplicateServerCss?: React.FC,
   ) => {
     return function Resources() {
       return React.createElement(React.Fragment, null, [
@@ -1960,14 +1992,29 @@ function generateResourcesCode(depsCode: string) {
             src: href,
           }),
         ),
+        RemoveDuplicateServerCss &&
+          React.createElement(RemoveDuplicateServerCss, {
+            key: 'remove-duplicate-css',
+          }),
       ])
     }
   }
 
   return `
-    import __vite_rsc_react__ from "react";
-    export const Resources = (${ResourcesFn.toString()})(__vite_rsc_react__, ${depsCode});
-  `
+import __vite_rsc_react__ from "react";
+
+${
+  config.command === 'serve'
+    ? `import RemoveDuplicateServerCss from "virtual:vite-rsc/remove-duplicate-server-css";`
+    : `const RemoveDuplicateServerCss = undefined;`
+}
+
+export const Resources = (${ResourcesFn.toString()})(
+  __vite_rsc_react__,
+  ${depsCode},
+  RemoveDuplicateServerCss,
+);
+`
 }
 
 export async function transformRscCssExport(options: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -3,8 +3,8 @@`
`3`	`3`	`"private": true,`
`4`	`4`	`"type": "module",`
`5`	`5`	`"devDependencies": {`
`6`		`- "@vitejs/plugin-rsc": "latest",`
`7`	`6`	`"@vitejs/plugin-react": "latest",`
	`7`	`+ "@vitejs/plugin-rsc": "latest",`
`8`	`8`	`"babel-plugin-react-compiler": "19.1.0-rc.2"`
`9`	`9`	`}`
`10`	`10`	`}`