Simplify test resolution of Vite dependency (#12677)

markdalgleish · web-flow · commit 73998452e7d7 · 2025-01-03T14:17:29.000+11:00
diff --git a/integration/helpers/vite.ts b/integration/helpers/vite.ts
@@ -136,29 +136,6 @@ export const viteMajorTemplates = [
   templateDisplayName: string;
 }>;
 
-function resolveDevPackageDir(root: string) {
-  return path.join(root, "node_modules", "@react-router", "dev");
-}
-
-function resolveDevPackageNodeModulesDir(root: string) {
-  return path.join(resolveDevPackageDir(root), "node_modules");
-}
-
-async function copyDirContents(
-  srcDir: string,
-  destDir: string,
-  filter?: (file: string) => boolean
-) {
-  for (const file of await fse.readdir(srcDir)) {
-    if (filter && !filter(path.normalize(file))) {
-      continue;
-    }
-    const srcFile = path.join(srcDir, file);
-    const destFile = path.join(destDir, file);
-    await fse.copy(srcFile, destFile, { errorOnExist: true });
-  }
-}
-
 export async function createProject(
   files: Record<string, string> = {},
   templateName: TemplateName = "vite-5-template"
@@ -169,27 +146,7 @@ export async function createProject(
 
   // base template
   let templateDir = path.resolve(__dirname, templateName);
-
-  // When we copy the template, we need to filter out the version of Vite
-  // installed locally within @react-router/dev. If we don't do this, the dev
-  // package doesn't use the version of Vite defined within the test template
-  // which means we can't run integration tests across different versions of
-  // Vite. Since pnpm uses symlinks for dependencies, we need to perform the
-  // copy in multiple steps so that we can filter at each level.
-  await fse.copy(templateDir, projectDir, {
-    errorOnExist: true,
-    filter: (src) => !path.normalize(src).endsWith("/@react-router/dev"),
-  });
-  await copyDirContents(
-    resolveDevPackageDir(templateDir),
-    resolveDevPackageDir(projectDir),
-    (file) => file !== "node_modules"
-  );
-  await copyDirContents(
-    resolveDevPackageNodeModulesDir(templateDir),
-    resolveDevPackageNodeModulesDir(projectDir),
-    (file) => file !== "vite"
-  );
+  await fse.copy(templateDir, projectDir, { errorOnExist: true });
 
   // user-defined files
   await Promise.all(
diff --git a/packages/react-router-dev/__tests__/cli-test.ts b/packages/react-router-dev/__tests__/cli-test.ts
@@ -1,5 +1,4 @@
 import childProcess from "node:child_process";
-import os from "node:os";
 import path from "node:path";
 import util from "node:util";
 import fse from "fs-extra";
@@ -8,7 +7,7 @@ import semver from "semver";
 let execFile = util.promisify(childProcess.execFile);
 
 const TEMP_DIR = path.join(
-  fse.realpathSync(os.tmpdir()),
+  path.join(__dirname, ".tmp"),
   `remix-tests-${Math.random().toString(32).slice(2)}`
 );
 
diff --git a/packages/react-router-dev/cli/commands.ts b/packages/react-router-dev/cli/commands.ts
@@ -12,10 +12,7 @@ import { loadPluginContext } from "../vite/plugin";
 import { transpile as convertFileToJS } from "./useJavascript";
 import * as profiler from "../vite/profiler";
 import * as Typegen from "../typegen";
-import {
-  importViteEsmSync,
-  preloadViteEsm,
-} from "../vite/import-vite-esm-sync";
+import { preloadVite, getVite } from "../vite/vite";
 
 export async function routes(
   reactRouterRoot?: string,
@@ -205,8 +202,8 @@ export async function typegen(root: string, flags: { watch: boolean }) {
   root ??= process.cwd();
 
   if (flags.watch) {
-    await preloadViteEsm();
-    const vite = importViteEsmSync();
+    await preloadVite();
+    const vite = getVite();
     const logger = vite.createLogger("info", { prefix: "[react-router]" });
 
     await Typegen.watch(root, { logger });
diff --git a/packages/react-router-dev/config/config.ts b/packages/react-router-dev/config/config.ts
@@ -23,6 +23,7 @@ import {
   configRoutesToRouteManifest,
 } from "./routes";
 import { detectPackageManager } from "../cli/detectPackageManager";
+import { isReactRouterRepo } from "./is-react-router-repo";
 
 const excludedConfigPresetKeys = ["presets"] as const satisfies ReadonlyArray<
   keyof ReactRouterConfig
@@ -720,7 +721,7 @@ export async function resolveEntryFiles({
   return { entryClientFilePath, entryServerFilePath };
 }
 
-export const ssrExternals = isInReactRouterMonorepo()
+export const ssrExternals = isReactRouterRepo()
   ? [
       // This is only needed within this repo because these packages
       // are linked to a directory outside of node_modules so Vite
@@ -736,18 +737,6 @@ export const ssrExternals = isInReactRouterMonorepo()
     ]
   : undefined;
 
-function isInReactRouterMonorepo() {
-  // We use '@react-router/node' for this check since it's a
-  // dependency of this package and guaranteed to be in node_modules
-  let serverRuntimePath = path.dirname(
-    require.resolve("@react-router/node/package.json")
-  );
-  let serverRuntimeParentDir = path.basename(
-    path.resolve(serverRuntimePath, "..")
-  );
-  return serverRuntimeParentDir === "packages";
-}
-
 const entryExts = [".js", ".jsx", ".ts", ".tsx"];
 
 function findEntry(
diff --git a/packages/react-router-dev/config/is-react-router-repo.ts b/packages/react-router-dev/config/is-react-router-repo.ts
@@ -0,0 +1,13 @@
+import path from "pathe";
+
+export function isReactRouterRepo() {
+  // We use '@react-router/node' for this check since it's a
+  // dependency of this package and guaranteed to be in node_modules
+  let serverRuntimePath = path.dirname(
+    require.resolve("@react-router/node/package.json")
+  );
+  let serverRuntimeParentDir = path.basename(
+    path.resolve(serverRuntimePath, "..")
+  );
+  return serverRuntimeParentDir === "packages";
+}
diff --git a/packages/react-router-dev/vite/build.ts b/packages/react-router-dev/vite/build.ts
@@ -17,7 +17,7 @@ import {
 } from "../config/config";
 import type { RouteManifestEntry, RouteManifest } from "../config/routes";
 import invariant from "../invariant";
-import { preloadViteEsm } from "./import-vite-esm-sync";
+import { preloadVite, getVite } from "./vite";
 
 function getAddressableRoutes(routes: RouteManifest): RouteManifestEntry[] {
   let nonAddressableIds = new Set<string>();
@@ -235,8 +235,8 @@ export async function build(
   }: ViteBuildOptions
 ) {
   // Ensure Vite's ESM build is preloaded at the start of the process
-  // so it can be accessed synchronously via `importViteEsmSync`
-  await preloadViteEsm();
+  // so it can be accessed synchronously via `getVite`
+  await preloadVite();
 
   let viteConfig = await resolveViteConfig({ configFile, mode, root });
 
@@ -251,7 +251,7 @@ export async function build(
 
   let { reactRouterConfig } = ctx;
 
-  let vite = await import("vite");
+  let vite = getVite();
 
   async function viteBuild({
     ssr,
diff --git a/packages/react-router-dev/vite/dev.ts b/packages/react-router-dev/vite/dev.ts
@@ -1,7 +1,7 @@
 import type * as Vite from "vite";
 import colors from "picocolors";
 
-import { preloadViteEsm } from "./import-vite-esm-sync";
+import { preloadVite, getVite } from "./vite";
 import * as profiler from "./profiler";
 
 export interface ViteDevOptions {
@@ -34,10 +34,10 @@ export async function dev(
   }: ViteDevOptions
 ) {
   // Ensure Vite's ESM build is preloaded at the start of the process
-  // so it can be accessed synchronously via `importViteEsmSync`
-  await preloadViteEsm();
+  // so it can be accessed synchronously via `getVite`
+  await preloadVite();
+  let vite = getVite();
 
-  let vite = await import("vite");
   let server = await vite.createServer({
     root,
     mode,
diff --git a/packages/react-router-dev/vite/import-vite-esm-sync.ts b/packages/react-router-dev/vite/import-vite-esm-sync.ts
diff --git a/packages/react-router-dev/vite/plugin.ts b/packages/react-router-dev/vite/plugin.ts
@@ -35,7 +35,7 @@ import * as VirtualModule from "./virtual-module";
 import { resolveFileUrl } from "./resolve-file-url";
 import { combineURLs } from "./combine-urls";
 import { removeExports } from "./remove-exports";
-import { importViteEsmSync, preloadViteEsm } from "./import-vite-esm-sync";
+import { preloadVite, getVite } from "./vite";
 import {
   type ResolvedReactRouterConfig,
   type ConfigLoader,
@@ -54,7 +54,7 @@ export async function resolveViteConfig({
   mode?: string;
   root: string;
 }) {
-  let vite = await import("vite");
+  let vite = getVite();
 
   let viteConfig = await vite.resolveConfig(
     { mode, configFile, root },
@@ -169,7 +169,7 @@ const resolveRelativeRouteFilePath = (
   route: RouteManifestEntry,
   reactRouterConfig: ResolvedReactRouterConfig
 ) => {
-  let vite = importViteEsmSync();
+  let vite = getVite();
   let file = route.file;
   let fullPath = path.resolve(reactRouterConfig.appDirectory, file);
 
@@ -201,7 +201,7 @@ const resolveChunk = (
   viteManifest: Vite.Manifest,
   absoluteFilePath: string
 ) => {
-  let vite = importViteEsmSync();
+  let vite = getVite();
   let rootRelativeFilePath = vite.normalizePath(
     path.relative(ctx.rootDirectory, absoluteFilePath)
   );
@@ -729,10 +729,10 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
       name: "react-router",
       config: async (_viteUserConfig, _viteConfigEnv) => {
         // Preload Vite's ESM build up-front as soon as we're in an async context
-        await preloadViteEsm();
+        await preloadVite();
 
         // Ensure sync import of Vite works after async preload
-        let vite = importViteEsmSync();
+        let vite = getVite();
 
         viteUserConfig = _viteUserConfig;
         viteConfigEnv = _viteConfigEnv;
@@ -948,7 +948,7 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
           );
         }
 
-        let vite = importViteEsmSync();
+        let vite = getVite();
 
         let childCompilerConfigFile = await vite.loadConfigFromFile(
           {
@@ -1342,7 +1342,7 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
           return;
         }
 
-        let vite = importViteEsmSync();
+        let vite = getVite();
         let importerShort = vite.normalizePath(
           path.relative(ctx.rootDirectory, importer)
         );
@@ -1745,7 +1745,7 @@ function getRoute(
   pluginConfig: ResolvedReactRouterConfig,
   file: string
 ): RouteManifestEntry | undefined {
-  let vite = importViteEsmSync();
+  let vite = getVite();
   let routePath = vite.normalizePath(
     path.relative(pluginConfig.appDirectory, file)
   );
diff --git a/packages/react-router-dev/vite/resolve-file-url.ts b/packages/react-router-dev/vite/resolve-file-url.ts
@@ -1,12 +1,12 @@
 import * as path from "node:path";
 
-import { importViteEsmSync } from "./import-vite-esm-sync";
+import { getVite } from "./vite";
 
 export const resolveFileUrl = (
   { rootDirectory }: { rootDirectory: string },
   filePath: string
 ) => {
-  let vite = importViteEsmSync();
+  let vite = getVite();
   let relativePath = path.relative(rootDirectory, filePath);
   let isWithinRoot =
     !relativePath.startsWith("..") && !path.isAbsolute(relativePath);
diff --git a/packages/react-router-dev/vite/styles.ts b/packages/react-router-dev/vite/styles.ts
@@ -5,7 +5,7 @@ import type { ModuleNode, ViteDevServer } from "vite";
 
 import type { ResolvedReactRouterConfig } from "../config/config";
 import { resolveFileUrl } from "./resolve-file-url";
-import { importViteEsmSync } from "./import-vite-esm-sync";
+import { getVite } from "./vite";
 
 type ServerRouteManifest = ServerBuild["routes"];
 type ServerRoute = ServerRouteManifest[string];
@@ -63,7 +63,7 @@ const getStylesForFiles = async ({
   cssModulesManifest: Record<string, string>;
   files: string[];
 }): Promise<string | undefined> => {
-  let vite = importViteEsmSync();
+  let vite = getVite();
   let viteMajor = parseInt(vite.version.split(".")[0], 10);
 
   let styles: Record<string, string> = {};
diff --git a/packages/react-router-dev/vite/vite-node.ts b/packages/react-router-dev/vite/vite-node.ts
@@ -3,7 +3,7 @@ import { ViteNodeRunner } from "vite-node/client";
 import { installSourcemapsSupport } from "vite-node/source-map";
 import type * as Vite from "vite";
 
-import { importViteEsmSync, preloadViteEsm } from "./import-vite-esm-sync";
+import { preloadVite, getVite } from "./vite";
 
 export type Context = {
   devServer: Vite.ViteDevServer;
@@ -14,8 +14,8 @@ export type Context = {
 export async function createContext(
   viteConfig: Vite.InlineConfig = {}
 ): Promise<Context> {
-  await preloadViteEsm();
-  const vite = importViteEsmSync();
+  await preloadVite();
+  const vite = getVite();
 
   const devServer = await vite.createServer(
     vite.mergeConfig(
diff --git a/packages/react-router-dev/vite/vite.ts b/packages/react-router-dev/vite/vite.ts
@@ -0,0 +1,31 @@
+import path from "pathe";
+
+import invariant from "../invariant";
+import { isReactRouterRepo } from "../config/is-react-router-repo";
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+type Vite = typeof import("vite");
+let vite: Vite | undefined;
+
+const viteImportSpecifier = isReactRouterRepo()
+  ? // Support testing against different versions of Vite by ensuring that Vite
+    // is resolved from the current working directory when running within this
+    // repo. If we don't do this, Vite will always be imported relative to this
+    // file, which means that it will always resolve to Vite 6.
+    `file:///${path
+      .normalize(
+        require.resolve("vite/package.json", { paths: [process.cwd()] })
+      )
+      .replace("package.json", "dist/node/index.js")}`
+  : "vite";
+
+export async function preloadVite(): Promise<void> {
+  // Use a dynamic import to force Vite to use the ESM build. If we don't do
+  // this, Vite logs CJS deprecation warnings.
+  vite = await import(viteImportSpecifier);
+}
+
+export function getVite(): Vite {
+  invariant(vite, "getVite() called before preloadVite()");
+  return vite;
+}
