feat(rsc): validate client-only and server-only import during resolve

[Copilot]

• Closes Support built-time client-only and server-only import validation #620

Horrible job by copilot. Mostly rewritten by me.

TODO

• test on waku feat: use @vitejs/plugin-rsc wakujs/waku#1493

[hi-ogawa]

requirements

• new plugin option, enabled by default.
• reference code in https://github.com/hi-ogawa/vite-plugins/blob/4f32992020581ebdc2f88bfda7190c7991fe361c/packages/react-server/src/plugin/index.ts#L400-L403

      validateImportPlugin({
        "client-only": `'client-only' is included in server build`,
        "server-only": true,
      }),

// https://github.com/vercel/next.js/blob/90f564d376153fe0b5808eab7b83665ee5e08aaf/packages/next/src/build/webpack-config.ts#L1249-L1280
// https://github.com/pcattori/vite-env-only/blob/68a0cc8546b9a37c181c0b0a025eb9b62dbedd09/src/deny-imports.ts
// https://github.com/sveltejs/kit/blob/84298477a014ec471839adf7a4448d91bc7949e4/packages/kit/src/exports/vite/index.js#L513
function validateImportPlugin(entries: Record<string, string | true>): Plugin {
  return {
    name: validateImportPlugin.name,
    enforce: "pre",
    resolveId(source, importer, options) {
      const entry = entries[source];
      if (entry) {
        // skip validation during optimizeDeps scan since for now
        // we want to allow going through server/client boundary loosely
        if (
          entry === true ||
          manager.buildType === "scan" ||
          ("scan" in options && options.scan)
        ) {
          return "\0virtual:validate-import";
        }
        throw new Error(entry + ` (importer: ${importer ?? "unknown"})`);
      }
      return;
    },
    load(id, _options) {
      if (id === "\0virtual:validate-import") {
        return "export {}";
      }
      return;
    },
  };
}

[Copilot]

requirements

• new plugin option, enabled by default.
• reference code in https://github.com/hi-ogawa/vite-plugins/blob/4f32992020581ebdc2f88bfda7190c7991fe361c/packages/react-server/src/plugin/inde...

I've implemented the validateImportPlugin with the requirements you specified:

✅ New plugin option: Added validateImports?: boolean to RscPluginOptions (enabled by default)
✅ Reference implementation: Based on the code you provided, adapted for the RSC plugin structure

Implementation details:

• Validates client-only imports are blocked in server environments (rsc, ssr)
• Validates server-only imports are blocked in client environment
• Skips validation during dependency scanning to avoid build issues
• Uses existing isScanBuild variable for scan detection
• Includes comprehensive unit tests

Usage:

rsc({
  validateImports: true, // default
  // ... other options
})

The plugin will now throw descriptive errors like:

• 'client-only' is included in server build (importer: unknown)
• 'server-only' is included in client build (importer: unknown)

Commit: 48f0449

[hi-ogawa]

Add e2e test. See packages/plugin-rsc/CONTRIBUTING.md

[hi-ogawa]

Add e2e test. See packages/plugin-rsc/CONTRIBUTING.md

[Copilot]

Add e2e test. See packages/plugin-rsc/CONTRIBUTING.md

Added comprehensive e2e tests for the validateImportPlugin functionality. The tests cover:

1. Build fails when server-only is imported in client component
2. Build fails when client-only is imported in server component
3. Build succeeds with valid imports
4. Build succeeds with invalid imports when validation is disabled

The e2e tests use setupInlineFixture pattern as recommended in the CONTRIBUTING.md guide and validate the expected error messages and build behavior.

Commit: 30c8fc0

[hi-ogawa]

See https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-rsc/CONTRIBUTING.md#tips

Dependencies for temp test projects are managed in examples/e2e/package.json

[Copilot]

Fixed the dependency management as requested. The dependencies (client-only and server-only) are now managed centrally in examples/e2e/package.json. The e2e tests have been updated to use proper package.json overrides (similar to setupIsolatedFixture) to ensure temporary test projects can resolve dependencies correctly.

All 4 validateImportPlugin e2e tests are now passing with proper dependency management that follows the recommended pattern.

Commit: e762f57

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@vitejs/plugin-react@624

npm i https://pkg.pr.new/@vitejs/plugin-react-oxc@624

npm i https://pkg.pr.new/@vitejs/plugin-rsc@624

npm i https://pkg.pr.new/@vitejs/plugin-react-swc@624

commit: e8879d9