fix(rsc): warn dual module of optimized and non-optimized client reference (#705)

Author: hi-ogawa

packages/plugin-rsc/e2e/basic.test.ts

@@ -76,11 +76,34 @@ test.describe('dev-non-optimized-cjs', () => {
   })
 })
 
+test.describe('dev-inconsistent-client-optimization', () => {
+  test.beforeAll(async () => {
+    // remove explicitly added optimizeDeps.exclude
+    const editor = f.createEditor('vite.config.ts')
+    editor.edit((s) =>
+      s.replace(`'@vitejs/test-dep-client-in-server2/client',`, ``),
+    )
+  })
+
+  const f = useFixture({
+    root: 'examples/basic',
+    mode: 'dev',
+  })
+
+  test('show warning', async ({ page }) => {
+    await page.goto(f.url())
+    expect(f.proc().stderr()).toContain(
+      'client component dependency is inconsistently optimized.',
+    )
+  })
+})
+
 function defineTest(f: Fixture) {
   test('basic', async ({ page }) => {
     using _ = expectNoPageError(page)
     await page.goto(f.url())
     await waitForHydration(page)
+    expect(f.proc().stderr()).toBe('')
   })
 
   test('client component', async ({ page }) => {

packages/plugin-rsc/e2e/fixture.ts

@@ -106,7 +106,7 @@ export function useFixture(options: {
         await proc.done
         assert(proc.proc.exitCode === 0)
       }
-      const proc = runCli({
+      proc = runCli({
         command: options.command ?? `pnpm preview`,
         label: `${options.root}:preview`,
         cwd,

packages/plugin-rsc/src/plugin.ts

@@ -951,6 +951,24 @@ function vitePluginUseClient(
   const browserEnvironmentName =
     useClientPluginOptions.environment?.browser ?? 'client'
 
+  // TODO: warning for late optimizer discovery
+  function warnInoncistentClientOptimization(
+    ctx: Rollup.TransformPluginContext,
+    id: string,
+  ) {
+    const { depsOptimizer } = server.environments.client
+    if (depsOptimizer) {
+      for (const dep of Object.values(depsOptimizer.metadata.optimized)) {
+        if (dep.src === id) {
+          ctx.warn(
+            `client component dependency is inconsistently optimized. ` +
+              `It's recommended to add the dependency to 'optimizeDeps.exclude'.`,
+          )
+        }
+      }
+    }
+  }
+
   return [
     {
       name: 'rsc:use-client',
@@ -986,7 +1004,9 @@ function vitePluginUseClient(
               `[vite-rsc] detected an internal client boundary created by a package imported on rsc environment`,
             )
           }
-          importId = `/@id/__x00__virtual:vite-rsc/client-in-server-package-proxy/${encodeURIComponent(cleanUrl(id))}`
+          id = cleanUrl(id)
+          warnInoncistentClientOptimization(this, id)
+          importId = `/@id/__x00__virtual:vite-rsc/client-in-server-package-proxy/${encodeURIComponent(id)}`
           referenceKey = importId
         } else if (packageSource) {
           if (this.environment.mode === 'dev') {