Repository: remix-run/remix (ts)

Issue:
Remix CLI does not properly detect package manager
### What version of Remix are you using?

1.4.3

### Steps to Reproduce

1. `yarn create remix`


### Expected Behavior

CLI should ask

Do you want me to run `yarn install`?

### Actual Behavior

CLI is asking

Do you want me to run `npm install`?

### More information

In #2562, it is checking for `npm_user_agent` in the environment. However, in my setup, the env should be `npm_config_user_agent`

node version: v14.18.1 (via nvm)
npm version: 7.24.2
yarn version: 1.22.18

I haven't done any other custom env setup

Pull request:
fix(remix-dev): fix package manager detection
Some issues from the npm CLI prove that it should indeed be `npm_config_user_agent` instead of `npm_user_agent`:

- https://github.com/npm/cli/issues/1834
- https://github.com/npm/cli/issues/2960

---

Follow-up of #2562
Closes #3108

Patch:
diff --git a/packages/remix-dev/cli/run.ts b/packages/remix-dev/cli/run.ts
index 903c81d73..1a52600a8 100644
--- a/packages/remix-dev/cli/run.ts
+++ b/packages/remix-dev/cli/run.ts
@@ -19,12 +19,11 @@ import { validateNewProjectPath, validateTemplate } from "./create";
  * that can be used to determine which package manager ran
  * the command.
  */
-function getPreferredPackageManager() {
-  return ((process.env.npm_user_agent ?? "").split("/")[0] || "npm") as
+const getPreferredPackageManager = () =>
+  ((process.env.npm_config_user_agent ?? "").split("/")[0] || "npm") as
     | "npm"
     | "yarn"
     | "pnpm";
-}
 
 const helpText = `
 ${colors.logoBlue("R")} ${colors.logoGreen("E")} ${colors.logoYellow(


Test patch:
diff --git a/packages/remix-dev/__tests__/create-test.ts b/packages/remix-dev/__tests__/create-test.ts
index 571e29a1b..b0f09fdbd 100644
--- a/packages/remix-dev/__tests__/create-test.ts
+++ b/packages/remix-dev/__tests__/create-test.ts
@@ -450,8 +450,8 @@ describe("the create command", () => {
   });
 
   it("recognizes when Yarn was used to run the command", async () => {
-    let originalUserAgent = process.env.npm_user_agent;
-    process.env.npm_user_agent = yarnUserAgent;
+    let originalUserAgent = process.env.npm_config_user_agent;
+    process.env.npm_config_user_agent = yarnUserAgent;
 
     let projectDir = await getProjectDir("yarn-create");
     await run([
@@ -464,12 +464,12 @@ describe("the create command", () => {
     ]);
 
     expect(execSync).toBeCalledWith("yarn install", expect.anything());
-    process.env.npm_user_agent = originalUserAgent;
+    process.env.npm_config_user_agent = originalUserAgent;
   });
 
   it("recognizes when pnpm was used to run the command", async () => {
-    let originalUserAgent = process.env.npm_user_agent;
-    process.env.npm_user_agent = pnpmUserAgent;
+    let originalUserAgent = process.env.npm_config_user_agent;
+    process.env.npm_config_user_agent = pnpmUserAgent;
 
     let projectDir = await getProjectDir("pnpm-create");
     await run([
@@ -482,12 +482,12 @@ describe("the create command", () => {
     ]);
 
     expect(execSync).toBeCalledWith("pnpm install", expect.anything());
-    process.env.npm_user_agent = originalUserAgent;
+    process.env.npm_config_user_agent = originalUserAgent;
   });
 
   it("prompts to run the install command for the preferred package manager", async () => {
-    let originalUserAgent = process.env.npm_user_agent;
-    process.env.npm_user_agent = pnpmUserAgent;
+    let originalUserAgent = process.env.npm_config_user_agent;
+    process.env.npm_config_user_agent = pnpmUserAgent;
 
     let projectDir = await getProjectDir("pnpm-prompt-install");
     let mockPrompt = jest.mocked(inquirer.prompt);
@@ -512,12 +512,12 @@ describe("the create command", () => {
       "message",
       "Do you want me to run `pnpm install`?"
     );
-    process.env.npm_user_agent = originalUserAgent;
+    process.env.npm_config_user_agent = originalUserAgent;
   });
 
   it("suggests to run the init command with the preferred package manager", async () => {
-    let originalUserAgent = process.env.npm_user_agent;
-    process.env.npm_user_agent = pnpmUserAgent;
+    let originalUserAgent = process.env.npm_config_user_agent;
+    process.env.npm_config_user_agent = pnpmUserAgent;
 
     let projectDir = await getProjectDir("pnpm-suggest-install");
     let mockPrompt = jest.mocked(inquirer.prompt);
@@ -537,7 +537,7 @@ describe("the create command", () => {
     ]);
 
     expect(output).toContain(getOptOutOfInstallMessage("pnpm exec remix init"));
-    process.env.npm_user_agent = originalUserAgent;
+    process.env.npm_config_user_agent = originalUserAgent;
   });
 
   describe("errors", () => {
@@ -702,14 +702,11 @@ function getSuccessMessage(projectDirectory: string) {
   return `💿 That's it! \`cd\` into "${projectDirectory}" and check the README for development and deploy instructions!`;
 }
 
-function getOptOutOfInstallMessage(command = "npx remix init") {
-  return (
-    "💿 You've opted out of installing dependencies so we won't run the " +
-    path.join("remix.init", "index.js") +
-    " script for you just yet. Once you've installed dependencies, you can run " +
-    `it manually with \`${command}\``
-  );
-}
+const getOptOutOfInstallMessage = (command = "yarn remix init") =>
+  "💿 You've opted out of installing dependencies so we won't run the " +
+  path.join("remix.init", "index.js") +
+  " script for you just yet. Once you've installed dependencies, you can run " +
+  `it manually with \`${command}\``;
 
 /*
 eslint