diff --git a/packages/plugin-rsc/e2e/basic.test.ts b/packages/plugin-rsc/e2e/basic.test.ts index 3860cf807..f3cad3165 100644 --- a/packages/plugin-rsc/e2e/basic.test.ts +++ b/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 }) => { diff --git a/packages/plugin-rsc/e2e/fixture.ts b/packages/plugin-rsc/e2e/fixture.ts index 1848ba3f5..25ee2a5ec 100644 --- a/packages/plugin-rsc/e2e/fixture.ts +++ b/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, diff --git a/packages/plugin-rsc/src/plugin.ts b/packages/plugin-rsc/src/plugin.ts index 71fc7c00f..47ac1ce58 100644 --- a/packages/plugin-rsc/src/plugin.ts +++ b/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') {