fixup! fix: do not crash in wrangler dev if user has multiple accounts

Author: petebacondarwin

packages/wrangler/src/__tests__/helpers/mock-process.ts

@@ -6,12 +6,20 @@
 let writeSpy: jest.SpyInstance;
 
 function captureLastWriteCall(spy: jest.SpyInstance): Buffer {
-  const buffer = spy.mock.calls.pop()?.pop() ?? Buffer.alloc(0);
+  const calls = spy.mock.calls;
+  if (calls.length > 1) {
+    throw new Error(
+      "Unexpected calls to `stdout.write()`: " + JSON.stringify(calls)
+    );
+  }
+  const buffer = calls[0]?.[0] ?? Buffer.alloc(0);
   if (buffer instanceof Buffer) {
     return buffer;
   } else {
     throw new Error(
-      `Unexpected value passed to process.stdout.write(): "${buffer}"`
+      `Unexpected non-Buffer passed to \`stdout.write()\`: "${JSON.stringify(
+        buffer
+      )}"`
     );
   }
 }

packages/wrangler/src/dev/remote.tsx

@@ -8,9 +8,10 @@ import useInspector from "../inspect";
 import { logger } from "../logger";
 import { usePreviewServer } from "../proxy";
 import { syncAssets } from "../sites";
-import { ChooseAccount, requireApiToken } from "../user";
+import { ChooseAccount, getAccountChoices, requireApiToken } from "../user";
 import type { CfPreviewToken } from "../create-worker-preview";
 import type { AssetPaths } from "../sites";
+import type { ChooseAccountItem } from "../user";
 import type { CfModule, CfWorkerInit, CfScriptFormat } from "../worker";
 import type { EsbuildBundle } from "./use-esbuild";
 
@@ -35,6 +36,8 @@ export function Remote(props: {
   host: string | undefined;
 }) {
   const [accountId, setAccountId] = useState(props.accountId);
+  const [accountChoices, setAccountChoices] = useState<ChooseAccountItem[]>();
+
   const previewToken = useWorker({
     name: props.name,
     bundle: props.bundle,
@@ -72,9 +75,27 @@ export function Remote(props: {
 
   const errorHandler = useErrorHandler();
 
-  return !accountId ? (
+  useEffect(() => {
+    if (accountChoices !== undefined) {
+      return;
+    }
+    getAccountChoices().then(
+      (accounts) => {
+        if (accounts.length === 1) {
+          setAccountId(accounts[0].id);
+        } else {
+          setAccountChoices(accounts);
+        }
+      },
+      (err) => {
+        errorHandler(err);
+      }
+    );
+  });
+
+  return accountId === undefined && accountChoices !== undefined ? (
     <ChooseAccount
-      isInteractive={true}
+      accounts={accountChoices}
       onSelect={(selectedAccountId) => setAccountId(selectedAccountId)}
       onError={(err) => errorHandler(err)}
     ></ChooseAccount>

packages/wrangler/src/user/choose-account.tsx

@@ -1,6 +1,6 @@
 import { Text } from "ink";
 import SelectInput from "ink-select-input";
-import React, { useEffect, useRef, useState } from "react";
+import React from "react";
 import { fetchListResult } from "../cfetch";
 import { logger } from "../logger";
 import { getCloudflareAccountIdFromEnv } from "./env-vars";
@@ -11,57 +11,15 @@ export type ChooseAccountItem = {
 };
 
 export function ChooseAccount(props: {
-  isInteractive: boolean;
+  accounts: ChooseAccountItem[];
   onSelect: (accountId: string) => void;
   onError: (error: Error) => void;
 }) {
-  const [accounts, setAccounts] = useState<ChooseAccountItem[]>([]);
-  const getAccountsPromiseRef =
-    useRef<Promise<{ account: ChooseAccountItem }[]>>();
-
-  useEffect(() => {
-    async function selectAccount() {
-      const accountIdFromEnv = getCloudflareAccountIdFromEnv();
-      if (accountIdFromEnv) {
-        props.onSelect(accountIdFromEnv);
-      } else {
-        getAccountsPromiseRef.current ??= fetchListResult<{
-          account: ChooseAccountItem;
-        }>(`/memberships`);
-        const response = await getAccountsPromiseRef.current;
-        if (response.length === 0) {
-          props.onError(
-            new Error(
-              "Failed to automatically retrieve account IDs for the logged in user.\n" +
-                "In a non-interactive environment, it is mandatory to specify an account ID, either by assigning its value to CLOUDFLARE_ACCOUNT_ID, or as `account_id` in your `wrangler.toml` file."
-            )
-          );
-        } else if (response.length === 1) {
-          props.onSelect(response[0].account.id);
-        } else if (props.isInteractive) {
-          setAccounts(response.map((x) => x.account));
-        } else {
-          props.onError(
-            new Error(
-              "More than one account available but unable to select one in non-interactive mode.\n" +
-                `Please set the appropriate \`account_id\` in your \`wrangler.toml\` file.\n` +
-                `Available accounts are ("<name>" - "<id>"):\n` +
-                response
-                  .map((x) => `  "${x.account.name}" - "${x.account.id}")`)
-                  .join("\n")
-            )
-          );
-        }
-      }
-    }
-    selectAccount().catch((err) => props.onError(err));
-  }, [props]);
-
-  return accounts.length > 0 ? (
+  return (
     <>
       <Text bold>Select an account from below:</Text>
       <SelectInput
-        items={accounts.map((item) => ({
+        items={props.accounts.map((item) => ({
           key: item.id,
           label: item.name,
           value: item,
@@ -72,5 +30,25 @@ export function ChooseAccount(props: {
         }}
       />
     </>
-  ) : null;
+  );
+}
+
+export async function getAccountChoices(): Promise<ChooseAccountItem[]> {
+  const accountIdFromEnv = getCloudflareAccountIdFromEnv();
+  if (accountIdFromEnv) {
+    return [{ id: accountIdFromEnv, name: "" }];
+  } else {
+    const response = await fetchListResult<{
+      account: ChooseAccountItem;
+    }>(`/memberships`);
+    const accounts = response.map((r) => r.account);
+    if (accounts.length === 0) {
+      throw new Error(
+        "Failed to automatically retrieve account IDs for the logged in user.\n" +
+          "In a non-interactive environment, it is mandatory to specify an account ID, either by assigning its value to CLOUDFLARE_ACCOUNT_ID, or as `account_id` in your `wrangler.toml` file."
+      );
+    } else {
+      return accounts;
+    }
+  }
 }

packages/wrangler/src/user/user.tsx

@@ -223,7 +223,7 @@ import { purgeConfigCaches } from "../config-cache";
 import { logger } from "../logger";
 import openInBrowser from "../open-in-browser";
 import { parseTOML, readFileSync } from "../parse";
-import { ChooseAccount } from "./choose-account";
+import { ChooseAccount, getAccountChoices } from "./choose-account";
 import { getCloudflareAPITokenFromEnv } from "./env-vars";
 import { generateAuthUrl } from "./generate-auth-url";
 import { generateRandomState } from "./generate-random-state";
@@ -1068,21 +1068,38 @@ export async function getAccountId(
 ): Promise<string | undefined> {
   const apiToken = getAPIToken();
   if (!apiToken) return;
-  return await new Promise((resolve, reject) => {
-    const { unmount } = render(
-      <ChooseAccount
-        isInteractive={isInteractive}
-        onSelect={async (selected) => {
-          resolve(selected);
-          unmount();
-        }}
-        onError={(err) => {
-          reject(err);
-          unmount();
-        }}
-      />
-    );
-  });
+
+  const accounts = await getAccountChoices();
+  if (accounts.length === 1) {
+    return accounts[0].id;
+  }
+
+  if (isInteractive) {
+    return await new Promise((resolve, reject) => {
+      const { unmount } = render(
+        <ChooseAccount
+          accounts={accounts}
+          onSelect={async (selected) => {
+            resolve(selected);
+            unmount();
+          }}
+          onError={(err) => {
+            reject(err);
+            unmount();
+          }}
+        />
+      );
+    });
+  }
+
+  throw new Error(
+    "More than one account available but unable to select one in non-interactive mode.\n" +
+      `Please set the appropriate \`account_id\` in your \`wrangler.toml\` file.\n` +
+      `Available accounts are ("<name>" - "<id>"):\n` +
+      accounts
+        .map((account) => `  "${account.name}" - "${account.id}")`)
+        .join("\n")
+  );
 }
 
 /**