fix(dev): get dependencies bin path for any package manager (#6157)

Author: pcattori

packages/remix-dev/cli/commands.ts

@@ -17,7 +17,7 @@ import type { RemixConfig } from "../config";
 import { readConfig } from "../config";
 import { formatRoutes, RoutesFormat, isRoutesFormat } from "../config/format";
 import { createApp } from "./create";
-import { getPreferredPackageManager } from "./getPreferredPackageManager";
+import { detectPackageManager } from "./detectPackageManager";
 import { setupRemix, isSetupPlatform, SetupPlatform } from "./setup";
 import runCodemod from "../codemod";
 import { CodemodError } from "../codemod/utils/error";
@@ -82,7 +82,7 @@ export async function init(
 
   let initPackageJson = path.resolve(initScriptDir, "package.json");
   let isTypeScript = fse.existsSync(path.join(projectDir, "tsconfig.json"));
-  let packageManager = getPreferredPackageManager();
+  let packageManager = detectPackageManager() ?? "npm";
 
   if (await fse.pathExists(initPackageJson)) {
     execSync(`${packageManager} install`, {

packages/remix-dev/cli/create.ts

@@ -15,7 +15,7 @@ import tar from "tar-fs";
 import * as colors from "../colors";
 import invariant from "../invariant";
 import packageJson from "../package.json";
-import { getPreferredPackageManager } from "./getPreferredPackageManager";
+import { detectPackageManager } from "./detectPackageManager";
 import * as useJavascript from "./useJavascript";
 
 const remixDevPackageVersion = packageJson.version;
@@ -208,7 +208,7 @@ export async function createApp({
   }
 
   if (installDeps) {
-    let packageManager = getPreferredPackageManager();
+    let packageManager = detectPackageManager() ?? "npm";
 
     let npmConfig = execSync(
       `${packageManager} config get @remix-run:registry`,

packages/remix-dev/cli/detectPackageManager.ts

@@ -0,0 +1,22 @@
+type PackageManager = "npm" | "pnpm" | "yarn";
+
+/**
+ * Determine which package manager the user prefers.
+ *
+ * npm, pnpm and Yarn set the user agent environment variable
+ * that can be used to determine which package manager ran
+ * the command.
+ */
+export const detectPackageManager = (): PackageManager | undefined => {
+  let { npm_config_user_agent } = process.env;
+  if (!npm_config_user_agent) return undefined;
+  try {
+    let pkgManager = npm_config_user_agent.split("/")[0];
+    if (pkgManager === "npm") return "npm";
+    if (pkgManager === "pnpm") return "pnpm";
+    if (pkgManager === "yarn") return "yarn";
+    return undefined;
+  } catch {
+    return undefined;
+  }
+};

packages/remix-dev/cli/getPreferredPackageManager.ts

@@ -8,7 +8,7 @@ import fse from "fs-extra";
 import * as colors from "../colors";
 import * as commands from "./commands";
 import { validateNewProjectPath, validateTemplate } from "./create";
-import { getPreferredPackageManager } from "./getPreferredPackageManager";
+import { detectPackageManager } from "./detectPackageManager";
 
 const helpText = `
 ${colors.logoBlue("R")} ${colors.logoGreen("E")} ${colors.logoYellow(
@@ -313,7 +313,7 @@ export async function run(argv: string[] = process.argv.slice(2)) {
         return;
       }
 
-      let packageManager = getPreferredPackageManager();
+      let packageManager = detectPackageManager() ?? "npm";
       let answers = await inquirer
         .prompt<{
           appType: "template" | "stack";

packages/remix-dev/cli/run.ts

@@ -6,7 +6,7 @@ import semver from "semver";
 
 import { blue, cyan, gray } from "../../colors";
 import { readConfig } from "../../config";
-import { getPreferredPackageManager } from "../../cli/getPreferredPackageManager";
+import { detectPackageManager } from "../../cli/detectPackageManager";
 import type { Codemod } from "../codemod";
 import { CodemodError } from "../utils/error";
 import * as log from "../utils/log";
@@ -177,7 +177,7 @@ const codemod: Codemod = async (projectDir, options) => {
   );
 
   if (!options.dry) {
-    let packageManager = getPreferredPackageManager();
+    let packageManager = detectPackageManager() ?? "npm";
     log.info(
       `👉 To update your lockfile, run ${code(`${packageManager} install`)}`
     );

packages/remix-dev/codemod/replace-remix-magic-imports/index.ts

@@ -22,7 +22,7 @@ import { vanillaExtractPlugin } from "../plugins/vanillaExtract";
 import invariant from "../../invariant";
 import { hmrPlugin } from "./plugins/hmr";
 import { createMatchPath } from "../utils/tsconfig";
-import { getPreferredPackageManager } from "../../cli/getPreferredPackageManager";
+import { detectPackageManager } from "../../cli/detectPackageManager";
 import type * as Channel from "../../channel";
 import type { Context } from "../context";
 
@@ -145,7 +145,7 @@ const createEsbuildConfig = (
           }
 
           let packageName = getNpmPackageName(args.path);
-          let pkgManager = getPreferredPackageManager();
+          let pkgManager = detectPackageManager() ?? "npm";
           if (
             ctx.options.onWarning &&
             !isNodeBuiltIn(packageName) &&

packages/remix-dev/compiler/js/compiler.ts

@@ -10,7 +10,7 @@ import {
 } from "../virtualModules";
 import { isCssSideEffectImportPath } from "../../plugins/cssSideEffectImports";
 import { createMatchPath } from "../../utils/tsconfig";
-import { getPreferredPackageManager } from "../../../cli/getPreferredPackageManager";
+import { detectPackageManager } from "../../../cli/detectPackageManager";
 import type { Context } from "../../context";
 
 /**
@@ -72,7 +72,7 @@ export function serverBareModulesPlugin({ config, options }: Context): Plugin {
         }
 
         let packageName = getNpmPackageName(path);
-        let pkgManager = getPreferredPackageManager();
+        let pkgManager = detectPackageManager() ?? "npm";
 
         // Warn if we can't find an import for a package.
         if (

packages/remix-dev/compiler/server/plugins/bareImports.ts

@@ -13,7 +13,7 @@ import { ServerMode, isValidServerMode } from "./config/serverModes";
 import { writeConfigDefaults } from "./config/write-tsconfig-defaults";
 import { serverBuildVirtualModule } from "./compiler/server/virtualModules";
 import { flatRoutes } from "./config/flat-routes";
-import { getPreferredPackageManager } from "./cli/getPreferredPackageManager";
+import { detectPackageManager } from "./cli/detectPackageManager";
 import { warnOnce } from "./warnOnce";
 
 export interface RemixMdxConfig {
@@ -599,7 +599,7 @@ export async function readConfig(
 
       await pkgJson.save();
 
-      let packageManager = getPreferredPackageManager();
+      let packageManager = detectPackageManager() ?? "npm";
 
       execSync(`${packageManager} install`, {
         cwd: remixRoot,

packages/remix-dev/config.ts

@@ -12,6 +12,7 @@ import { loadEnv } from "./env";
 import * as Socket from "./socket";
 import * as HMR from "./hmr";
 import { warnOnce } from "../warnOnce";
+import { detectPackageManager } from "../cli/detectPackageManager";
 
 export let serve = async (
   config: RemixConfig,
@@ -32,12 +33,14 @@ export let serve = async (
     prevManifest?: Manifest;
   } = {};
 
+  let pkgManager = detectPackageManager() ?? "npm";
+  let bin = (await execa(pkgManager, ["bin"])).stdout.trim();
   let startAppServer = (command: string) => {
     return execa.command(command, {
       stdio: "inherit",
       env: {
         NODE_ENV: "development",
-        PATH: `${process.cwd()}/node_modules/.bin:${process.env.PATH}`,
+        PATH: `${bin}:${process.env.PATH}`,
         REMIX_DEV_HTTP_PORT: String(options.httpPort),
       },
     });