@shopify/cli-hydrogen 12.0.0 → 12.0.2

package/dist/commands/hydrogen/upgrade.js

@@ -6,7 +6,7 @@ import { ensureInsideGitDirectory, isClean } from '@shopify/cli-kit/node/git';
 import Command from '@shopify/cli-kit/node/base-command';
 import { renderSuccess, renderInfo, renderConfirmationPrompt, renderTasks, renderSelectPrompt, renderWarning } from '@shopify/cli-kit/node/ui';
 import { isDirectory, readFile, mkdir, fileExists, touchFile, removeFile, writeFile } from '@shopify/cli-kit/node/fs';
-import { getPackageManager, getDependencies, installNodeModules } from '@shopify/cli-kit/node/node-package-manager';
+import { getPackageManager, getDependencies } from '@shopify/cli-kit/node/node-package-manager';
 import { exec } from '@shopify/cli-kit/node/system';
 import { AbortError } from '@shopify/cli-kit/node/error';
 import { resolvePath, joinPath, dirname } from '@shopify/cli-kit/node/path';
@@ -17,6 +17,9 @@ import { isHydrogenMonorepo, hydrogenPackagesPath } from '../../lib/build.js';
 import { isCI } from '../../lib/is-ci.js';
 import { fetch } from '@shopify/cli-kit/node/http';
 
+function getAllRemovedPackages(release) {
+  return [...release.removeDependencies, ...release.removeDevDependencies];
+}
 const INSTRUCTIONS_FOLDER = ".hydrogen";
 class Upgrade extends Command {
   static descriptionWithMarkdown = "Upgrade Hydrogen project dependencies, preview features, fixes and breaking changes. The command also generates an instruction file for each upgrade.";
@@ -106,7 +109,7 @@ async function runUpgrade({
       availableUpgrades,
       currentDependencies
     });
-    cumulativeRelease = getCummulativeRelease({
+    cumulativeRelease = getCumulativeRelease({
       availableUpgrades,
       currentVersion,
       currentDependencies,
@@ -128,7 +131,11 @@ async function runUpgrade({
     appPath,
     selectedRelease,
     currentDependencies,
-    targetVersion
+    targetVersion,
+    cumulativeRemoveDependencies: cumulativeRelease.removeDependencies,
+    cumulativeRemoveDevDependencies: cumulativeRelease.removeDevDependencies,
+    cumulativeDependencies: cumulativeRelease.dependencies,
+    cumulativeDevDependencies: cumulativeRelease.devDependencies
   });
   await validateUpgrade({
     appPath,
@@ -171,7 +178,7 @@ async function isRunningFromHydrogenMonorepo() {
 }
 function createNextRelease(latestRelease) {
   const dependencies = { ...latestRelease.dependencies };
-  const devDependencies = { ...latestRelease.devDependencies };
+  const devDependencies = { ...latestRelease.devDependencies ?? {} };
   if (dependencies["@shopify/hydrogen"]) {
     dependencies["@shopify/hydrogen"] = "next";
   }
@@ -272,7 +279,7 @@ function hasOutdatedDependencies({
 }) {
   return Object.entries({
     ...release.dependencies,
-    ...release.devDependencies
+    ...release.devDependencies ?? {}
   }).some(([name, version]) => {
     if (name === "@shopify/cli") return false;
     const currentDependencyVersion = currentDependencies?.[name];
@@ -336,20 +343,31 @@ async function getSelectedRelease({
   ) : void 0;
   return targetRelease ?? promptUpgradeOptions(currentVersion, availableUpgrades);
 }
-function getCummulativeRelease({
+function getCumulativeRelease({
   availableUpgrades,
   selectedRelease,
   currentVersion,
   currentDependencies
 }) {
   const currentPinnedVersion = getAbsoluteVersion(currentVersion);
-  if (!availableUpgrades?.length) {
-    return { features: [], fixes: [] };
-  }
+  const empty = {
+    features: [],
+    fixes: [],
+    removeDependencies: [],
+    removeDevDependencies: [],
+    dependencies: {},
+    devDependencies: {}
+  };
+  if (!availableUpgrades?.length) return empty;
   if (selectedRelease.dependencies?.["@shopify/hydrogen"] === "next") {
     return {
+      ...empty,
       features: selectedRelease.features || [],
-      fixes: selectedRelease.fixes || []
+      fixes: selectedRelease.fixes || [],
+      removeDependencies: selectedRelease.removeDependencies ?? [],
+      removeDevDependencies: selectedRelease.removeDevDependencies ?? [],
+      dependencies: selectedRelease.dependencies ?? {},
+      devDependencies: selectedRelease.devDependencies ?? {}
     };
   }
   const upgradingReleases = availableUpgrades.filter((release) => {
@@ -359,14 +377,65 @@ function getCummulativeRelease({
     if (!isSameHydrogenVersion || !currentDependencies) return false;
     return hasOutdatedDependencies({ release, currentDependencies });
   });
-  return upgradingReleases.reduce(
-    (acc, release) => {
-      acc.features = [...acc.features, ...release.features];
-      acc.fixes = [...acc.fixes, ...release.fixes];
-      return acc;
-    },
-    { features: [], fixes: [] }
+  const features = upgradingReleases.flatMap((r) => r.features);
+  const fixes = upgradingReleases.flatMap((r) => r.fixes);
+  const releasesByVersion = [...upgradingReleases].sort(
+    (a, b) => semver.compare(a.version, b.version)
   );
+  const removedDepsAt = /* @__PURE__ */ new Map();
+  const removedDevDepsAt = /* @__PURE__ */ new Map();
+  releasesByVersion.forEach((release, i) => {
+    release.removeDependencies?.forEach((dep) => {
+      removedDepsAt.set(dep, i);
+    });
+    release.removeDevDependencies?.forEach((dep) => {
+      removedDevDepsAt.set(dep, i);
+    });
+  });
+  const reinstalledDeps = /* @__PURE__ */ new Set();
+  const reinstalledDevDeps = /* @__PURE__ */ new Set();
+  for (let i = 0; i < releasesByVersion.length; i++) {
+    const release = releasesByVersion[i];
+    if (!release) continue;
+    const dependencies2 = release.dependencies ?? {};
+    const devDependencies2 = release.devDependencies ?? {};
+    Object.keys(dependencies2).forEach((dep) => {
+      const removalI = removedDepsAt.get(dep);
+      if (removalI !== void 0 && i >= removalI) {
+        reinstalledDeps.add(dep);
+      }
+    });
+    Object.keys(devDependencies2).forEach((dep) => {
+      const removalI = removedDevDepsAt.get(dep);
+      if (removalI !== void 0 && i >= removalI) {
+        reinstalledDevDeps.add(dep);
+      }
+    });
+  }
+  const removeDependencies = [
+    ...new Set(
+      releasesByVersion.flatMap((r) => r.removeDependencies ?? []).filter((dep) => !reinstalledDeps.has(dep))
+    )
+  ];
+  const removeDevDependencies = [
+    ...new Set(
+      releasesByVersion.flatMap((r) => r.removeDevDependencies ?? []).filter((dep) => !reinstalledDevDeps.has(dep))
+    )
+  ];
+  const dependencies = {};
+  const devDependencies = {};
+  for (const release of releasesByVersion) {
+    Object.assign(dependencies, release.dependencies ?? {});
+    Object.assign(devDependencies, release.devDependencies ?? {});
+  }
+  return {
+    features,
+    fixes,
+    removeDependencies,
+    removeDevDependencies,
+    dependencies,
+    devDependencies
+  };
 }
 function displayConfirmation({
   cumulativeRelease,
@@ -374,10 +443,11 @@ function displayConfirmation({
   targetVersion
 }) {
   const { features, fixes } = cumulativeRelease;
-  if (features.length || fixes.length) {
+  const allRemovedPackages = getAllRemovedPackages(cumulativeRelease);
+  if (features.length || fixes.length || allRemovedPackages.length) {
     renderInfo({
       headline: `Included in this upgrade:`,
-      //@ts-ignore we know that filter(Boolean) will always return an array
+      // @ts-expect-error - filter(Boolean) removes falsy values, leaving only objects
       customSections: [
         features.length && {
           title: "Features",
@@ -398,6 +468,16 @@ function displayConfirmation({
               }
             }
           ]
+        },
+        allRemovedPackages.length && {
+          title: "Removed packages",
+          body: [
+            {
+              list: {
+                items: allRemovedPackages
+              }
+            }
+          ]
         }
       ].filter(Boolean)
     });
@@ -461,10 +541,20 @@ function maybeIncludeDependency({
 function buildUpgradeCommandArgs({
   selectedRelease,
   currentDependencies,
-  targetVersion
+  targetVersion,
+  cumulativeDependencies,
+  cumulativeDevDependencies
 }) {
   const args = [];
-  for (const dependency of Object.entries(selectedRelease.dependencies)) {
+  const effectiveDependencies = {
+    ...cumulativeDependencies ?? {},
+    ...selectedRelease.dependencies
+  };
+  const effectiveDevDependencies = {
+    ...cumulativeDevDependencies ?? {},
+    ...selectedRelease.devDependencies ?? {}
+  };
+  for (const dependency of Object.entries(effectiveDependencies)) {
     const shouldUpgradeDep = maybeIncludeDependency({
       currentDependencies,
       dependency,
@@ -480,7 +570,7 @@ function buildUpgradeCommandArgs({
       )}`
     );
   }
-  for (const dependency of Object.entries(selectedRelease.devDependencies)) {
+  for (const dependency of Object.entries(effectiveDevDependencies)) {
     const shouldUpgradeDep = maybeIncludeDependency({
       currentDependencies,
       dependency,
@@ -497,7 +587,7 @@ function buildUpgradeCommandArgs({
     );
   }
   const currentRemix = Object.entries(currentDependencies).find(isRemixDependency);
-  const selectedRemix = Object.entries(selectedRelease.dependencies).find(
+  const selectedRemix = Object.entries(effectiveDependencies).find(
     isRemixDependency
   );
   if (currentRemix && selectedRemix) {
@@ -514,7 +604,7 @@ function buildUpgradeCommandArgs({
   const currentReactRouter = Object.entries(currentDependencies).find(
     isReactRouterDependency
   );
-  const selectedReactRouter = Object.entries(selectedRelease.dependencies).find(
+  const selectedReactRouter = Object.entries(effectiveDependencies).find(
     isReactRouterDependency
   );
   if (selectedReactRouter) {
@@ -537,12 +627,16 @@ async function upgradeNodeModules({
   appPath,
   selectedRelease,
   currentDependencies,
-  targetVersion
+  targetVersion,
+  cumulativeRemoveDependencies,
+  cumulativeRemoveDevDependencies,
+  cumulativeDependencies,
+  cumulativeDevDependencies
 }) {
   const tasks = [];
   const depsToRemove = [
-    ...selectedRelease.removeDependencies || [],
-    ...selectedRelease.removeDevDependencies || []
+    ...cumulativeRemoveDependencies,
+    ...cumulativeRemoveDevDependencies
   ].filter((dep) => dep in currentDependencies);
   if (depsToRemove.length > 0) {
     tasks.push({
@@ -559,17 +653,24 @@ async function upgradeNodeModules({
   const upgradeArgs = buildUpgradeCommandArgs({
     selectedRelease,
     currentDependencies,
-    targetVersion
+    targetVersion,
+    cumulativeDependencies,
+    cumulativeDevDependencies
   });
   if (upgradeArgs.length > 0) {
     tasks.push({
       title: `Upgrading dependencies`,
       task: async () => {
-        await installNodeModules({
-          directory: appPath,
-          packageManager: await getPackageManager(appPath),
-          args: upgradeArgs
-        });
+        const packageManager = await getPackageManager(appPath);
+        const command = packageManager === "npm" ? "install" : packageManager === "yarn" ? "add" : packageManager === "pnpm" ? "add" : packageManager === "bun" ? "install" : "install";
+        const extraArgs = packageManager === "npm" || packageManager === "unknown" ? ["--legacy-peer-deps"] : [];
+        await exec(
+          resolvePackageManagerName(packageManager),
+          [command, ...extraArgs, ...upgradeArgs],
+          {
+            cwd: appPath
+          }
+        );
       }
     });
   }
@@ -577,6 +678,9 @@ async function upgradeNodeModules({
     await renderTasks(tasks, {});
   }
 }
+function resolvePackageManagerName(packageManager) {
+  return packageManager === "unknown" ? "npm" : packageManager;
+}
 async function uninstallNodeModules({
   directory,
   packageManager,
@@ -584,8 +688,12 @@ async function uninstallNodeModules({
 }) {
   if (args.length === 0) return;
   const command = packageManager === "npm" ? "uninstall" : packageManager === "yarn" ? "remove" : packageManager === "pnpm" ? "remove" : packageManager === "bun" ? "remove" : "uninstall";
-  const actualPackageManager = packageManager === "unknown" ? "npm" : packageManager;
-  await exec(actualPackageManager, [command, ...args], { cwd: directory });
+  const extraArgs = packageManager === "npm" || packageManager === "unknown" ? ["--legacy-peer-deps"] : [];
+  await exec(
+    resolvePackageManagerName(packageManager),
+    [command, ...extraArgs, ...args],
+    { cwd: directory }
+  );
 }
 function appendRemixDependencies({
   currentDependencies,
@@ -787,7 +895,8 @@ async function generateUpgradeInstructionsFile({
     { featuresMd: [], breakingChangesMd: [] }
   );
   const fixesMd = cumulativeRelease.fixes.filter((fixes) => fixes.steps).map(generateStepMd);
-  if (!featuresMd.length && !fixesMd.length && !breakingChangesMd.length) {
+  const allRemovedPackages = getAllRemovedPackages(cumulativeRelease);
+  if (!featuresMd.length && !fixesMd.length && !breakingChangesMd.length && !allRemovedPackages.length) {
     renderInfo({
       headline: `No upgrade instructions generated`,
       body: `There are no additional upgrade instructions for this version.`
@@ -827,6 +936,16 @@ ${fixesMd.join(
       "\n"
     )}`;
   }
+  if (allRemovedPackages.length) {
+    md += fixesMd.length ? "\n\n----\n\n" : "\n";
+    md += `## Removed packages
+
+The following packages have been removed as part of this upgrade:
+
+`;
+    md += allRemovedPackages.map((dep) => `- \`${dep}\``).join("\n");
+    md += "\n";
+  }
   const filePath = joinPath(instructionsFolderPath, filename);
   try {
     await isDirectory(instructionsFolderPath);
@@ -859,6 +978,13 @@ async function displayDevUpgradeNotice({
     const { currentVersion, currentDependencies } = await getHydrogenVersion({
       appPath
     });
+    if (currentVersion.startsWith("workspace:")) {
+      renderInfo({
+        headline: "Using monorepo @shopify/hydrogen dependency",
+        body: "This project uses the workspace protocol for @shopify/hydrogen, so upgrade notices are skipped during local monorepo development."
+      });
+      return;
+    }
     const isPrerelease = semver.prerelease(currentVersion);
     if (isPrerelease || /^[a-z]+$/i.test(currentVersion)) {
       return;
@@ -882,7 +1008,15 @@ async function displayDevUpgradeNotice({
     ) : changelog.releases.findIndex(
       (release) => getAbsoluteVersion(release.version) === pinnedCurrentVersion
     );
-    const relevantReleases = changelog.releases.slice(0, currentReleaseIndex);
+    let relevantReleases;
+    if (currentReleaseIndex === -1) {
+      const insertionIndex = changelog.releases.findIndex(
+        (release) => semver.lte(getAbsoluteVersion(release.version), pinnedCurrentVersion)
+      );
+      relevantReleases = insertionIndex === -1 ? changelog.releases : changelog.releases.slice(0, insertionIndex);
+    } else {
+      relevantReleases = changelog.releases.slice(0, currentReleaseIndex);
+    }
     const nextReleases = Object.values(
       [...relevantReleases].reverse().reduce(
         (acc, release) => {
@@ -891,7 +1025,7 @@ async function displayDevUpgradeNotice({
         },
         {}
       )
-    ).slice(0, 5);
+    ).reverse().slice(0, 5);
     let headline = Object.keys(uniqueAvailableUpgrades).length > 1 ? `There are ${Object.keys(uniqueAvailableUpgrades).length} new @shopify/hydrogen versions available.` : `There's a new @shopify/hydrogen version available.`;
     const cliCommand = await getCliCommand();
     renderInfo({
@@ -939,4 +1073,4 @@ async function displayDevUpgradeNotice({
   }
 }
 
-export { buildUpgradeCommandArgs, Upgrade as default, displayConfirmation, displayDevUpgradeNotice, getAbsoluteVersion, getAvailableUpgrades, getChangelog, getCummulativeRelease, getHydrogenVersion, getPackageVersion, getSelectedRelease, isRunningFromHydrogenMonorepo, runUpgrade, upgradeNodeModules, validateUpgrade };
+export { buildUpgradeCommandArgs, Upgrade as default, displayConfirmation, displayDevUpgradeNotice, generateUpgradeInstructionsFile, getAbsoluteVersion, getAvailableUpgrades, getChangelog, getCumulativeRelease, getHydrogenVersion, getPackageVersion, getSelectedRelease, isRunningFromHydrogenMonorepo, runUpgrade, upgradeNodeModules, validateUpgrade };

package/dist/lib/build.js

@@ -69,12 +69,11 @@ function getSkeletonNodeModules() {
   return joinPath(getSkeletonSourceDir(), "node_modules");
 }
 async function getRepoNodeModules() {
-  const { stdout } = await execAsync("npm root");
-  let nodeModulesPath = stdout.trim();
-  if (!nodeModulesPath && isHydrogenMonorepo) {
-    nodeModulesPath = joinPath(dirname(monorepoPackagesPath), "node_modules");
+  if (isHydrogenMonorepo) {
+    return getSkeletonNodeModules();
   }
-  return nodeModulesPath;
+  const { stdout } = await execAsync("npm root");
+  return stdout.trim();
 }
 
 export { ASSETS_DIR_PREFIX, ASSETS_STARTER_DIR, ASSETS_STARTER_DIR_ROUTES, getAssetsDir, getPkgJsonPath, getRepoNodeModules, getSkeletonNodeModules, getSkeletonSourceDir, getStarterDir, getTemplateAppFile, hydrogenPackagesPath, isHydrogenMonorepo };

package/dist/lib/bundle/vite-plugin.js

@@ -44,7 +44,7 @@ function hydrogenBundleAnalyzer(pluginOptions) {
         modsToAnalyze.map(async (mod) => {
           const relativeModId = relativePath(root, mod.id);
           const modBundleInfo = workerFile.modules[mod.id];
-          const originalCodeBytes = modBundleInfo?.originalLength ?? mod.code?.length ?? 0;
+          const originalCodeBytes = typeof modBundleInfo?.originalLength === "number" ? modBundleInfo.originalLength : mod.code?.length ?? 0;
           let resultingCodeBytes = modBundleInfo?.renderedLength ?? 0;
           if (pluginOptions?.minify && modBundleInfo?.code) {
             const minifiedCode = await pluginOptions.minify(modBundleInfo.code, mod.id).catch(() => null);
@@ -115,33 +115,19 @@ function hydrogenBundleAnalyzer(pluginOptions) {
           }
         }
       };
-      bundle[BUNDLE_ANALYZER_JSON_FILE] = {
+      this.emitFile({
         type: "asset",
         fileName: BUNDLE_ANALYZER_JSON_FILE,
-        needsCodeReference: false,
-        source: JSON.stringify(metafile, null, 2),
-        names: [BUNDLE_ANALYZER_JSON_FILE],
-        originalFileNames: [BUNDLE_ANALYZER_JSON_FILE],
-        // name and originalFileName should be deprecated .. but
-        // for some reason, removing them breaks typescript check
-        name: BUNDLE_ANALYZER_JSON_FILE,
-        originalFileName: BUNDLE_ANALYZER_JSON_FILE
-      };
-      bundle[BUNDLE_ANALYZER_HTML_FILE] = {
+        source: JSON.stringify(metafile, null, 2)
+      });
+      this.emitFile({
         type: "asset",
         fileName: BUNDLE_ANALYZER_HTML_FILE,
-        needsCodeReference: false,
         source: injectAnalyzerTemplateData(
           analysisTemplate,
           JSON.stringify(metafile)
-        ),
-        names: [BUNDLE_ANALYZER_HTML_FILE],
-        originalFileNames: [BUNDLE_ANALYZER_HTML_FILE],
-        // name and originalFileName should be deprecated .. but
-        // for some reason, removing them breaks typescript check
-        name: BUNDLE_ANALYZER_HTML_FILE,
-        originalFileName: BUNDLE_ANALYZER_HTML_FILE
-      };
+        )
+      });
     }
   };
 }

package/dist/lib/check-lockfile.js

@@ -24,10 +24,12 @@ function missingLockfileWarning(shouldExit) {
     renderWarning({ headline, body, nextSteps });
   }
 }
-function multipleLockfilesWarning(packageManagers2, shouldExit) {
-  const lockfileList = packageManagers2.map(({ name, lockfile }) => {
-    return `${lockfile} (created by ${name})`;
-  });
+function multipleLockfilesWarning(foundPackageManagers, shouldExit) {
+  const lockfileList = foundPackageManagers.map(
+    ({ packageManager, foundLockfile }) => {
+      return `${foundLockfile} (created by ${packageManager.name})`;
+    }
+  );
   const headline = "Multiple lockfiles found";
   const body = [
     `Your project contains more than one lockfile. This can cause version conflicts when installing and deploying your app. The following lockfiles were detected:
@@ -57,8 +59,15 @@ async function checkLockfileStatus(directory, shouldExit = false) {
   if (isHydrogenMonorepo && !process.env.SHOPIFY_UNIT_TEST) return;
   const foundPackageManagers = [];
   for (const packageManager of packageManagers) {
-    if (await fileExists(resolvePath(directory, packageManager.lockfile))) {
-      foundPackageManagers.push(packageManager);
+    const allLockfiles = [
+      packageManager.lockfile,
+      ...packageManager.alternativeLockfiles || []
+    ];
+    for (const lockfile2 of allLockfiles) {
+      if (await fileExists(resolvePath(directory, lockfile2))) {
+        foundPackageManagers.push({ packageManager, foundLockfile: lockfile2 });
+        break;
+      }
     }
   }
   if (foundPackageManagers.length === 0) {
@@ -67,7 +76,7 @@ async function checkLockfileStatus(directory, shouldExit = false) {
   if (foundPackageManagers.length > 1) {
     return multipleLockfilesWarning(foundPackageManagers, shouldExit);
   }
-  const lockfile = foundPackageManagers[0].lockfile;
+  const lockfile = foundPackageManagers[0].foundLockfile;
   const ignoredLockfile = await checkIfIgnoredInGitRepository(directory, [
     lockfile
   ]).catch(() => {

package/dist/lib/codegen.js

@@ -2,7 +2,7 @@ import { spawn } from 'node:child_process';
 import { fileURLToPath } from 'node:url';
 import { getCodeFormatOptions, formatCode } from './format-code.js';
 import { renderInfo, renderWarning } from '@shopify/cli-kit/node/ui';
-import { relativePath, resolvePath, joinPath, basename } from '@shopify/cli-kit/node/path';
+import { relativePath, joinPath, resolvePath, basename } from '@shopify/cli-kit/node/path';
 import { AbortError } from '@shopify/cli-kit/node/error';
 import { importLocal } from './import-utils.js';
 
@@ -283,7 +283,7 @@ function findGqlProject(schemaFilepath, gqlConfig) {
   );
 }
 async function addHooksToHydrogenOptions(codegenConfig, { rootDirectory }) {
-  const name = Symbol.for("name");
+  const name = /* @__PURE__ */ Symbol.for("name");
   const hydrogenProjectsOptions = Object.values(codegenConfig.generates).filter(
     (value) => {
       const foundPreset = (Array.isArray(value) ? value[0] : value)?.preset;

package/dist/lib/format-code.js

@@ -1,5 +1,5 @@
 import { extname } from '@shopify/cli-kit/node/path';
-import * as prettier from 'prettier';
+import { resolveConfig, format } from 'prettier';
 import * as FS from 'fs/promises';
 import * as Path from 'path';
 
@@ -12,14 +12,14 @@ const DEFAULT_PRETTIER_CONFIG = {
 async function getCodeFormatOptions(filePath = process.cwd()) {
   const pathToUse = (await FS.lstat(filePath)).isFile() ? filePath : Path.resolve(filePath, "prettier.file");
   try {
-    return await prettier.resolveConfig(pathToUse) || DEFAULT_PRETTIER_CONFIG;
+    return await resolveConfig(pathToUse) || DEFAULT_PRETTIER_CONFIG;
   } catch {
     return DEFAULT_PRETTIER_CONFIG;
   }
 }
 async function formatCode(content, config = DEFAULT_PRETTIER_CONFIG, filePath = "") {
   const ext = extname(filePath);
-  return prettier.format(content, {
+  return format(content, {
     // Specify the TypeScript parser for ts/tsx files. Otherwise
     // we need to use the babel parser instead of the default parser,
     // because prettier will print a warning.

package/dist/lib/graphql/admin/client.js

@@ -1,6 +1,50 @@
 import { AbortError } from '@shopify/cli-kit/node/error';
 import { graphqlRequest } from '@shopify/cli-kit/node/api/graphql';
 
+const KNOWN_USER_ERRORS = [
+  {
+    pattern: "app is not installed",
+    abort: [
+      "Hydrogen sales channel isn't installed",
+      "Install the Hydrogen sales channel on your store to start creating and linking Hydrogen storefronts: https://apps.shopify.com/hydrogen"
+    ]
+  },
+  {
+    pattern: "Access denied for hydrogenStorefrontCreate field",
+    abort: [
+      "Couldn't connect storefront to Shopify",
+      [
+        "Common reasons for this error include:",
+        {
+          list: {
+            items: [
+              "The Hydrogen sales channel isn't installed on the store.",
+              "You don't have the required account permission to manage apps or channels.",
+              "You're trying to connect to an ineligible store type (Trial, Development store)"
+            ]
+          }
+        }
+      ]
+    ]
+  },
+  {
+    pattern: "Access denied for hydrogenStorefronts field",
+    abort: [
+      "Couldn't access Hydrogen storefronts",
+      [
+        "Common reasons for this error include:",
+        {
+          list: {
+            items: [
+              "You don't have full access to apps or access to the Hydrogen channel.",
+              "The Hydrogen sales channel isn't installed on the store."
+            ]
+          }
+        }
+      ]
+    ]
+  }
+];
 async function adminRequest(query, session, variables) {
   const api = "Admin";
   const url = `https://${session.storeFqdn}/admin/api/unstable/graphql.json`;
@@ -14,29 +58,10 @@ async function adminRequest(query, session, variables) {
     });
   } catch (error) {
     const errors = error.errors;
-    if (errors?.some?.((error2) => error2.message.includes("app is not installed"))) {
-      throw new AbortError(
-        "Hydrogen sales channel isn't installed",
-        "Install the Hydrogen sales channel on your store to start creating and linking Hydrogen storefronts: https://apps.shopify.com/hydrogen"
-      );
-    }
-    if (errors?.some?.(
-      (error2) => error2.message.includes(
-        "Access denied for hydrogenStorefrontCreate field"
-      )
-    )) {
-      throw new AbortError("Couldn't connect storefront to Shopify", [
-        "Common reasons for this error include:",
-        {
-          list: {
-            items: [
-              "The Hydrogen sales channel isn't installed on the store.",
-              "You don't have the required account permission to manage apps or channels.",
-              "You're trying to connect to an ineligible store type (Trial, Development store)"
-            ]
-          }
-        }
-      ]);
+    for (const { pattern, abort } of KNOWN_USER_ERRORS) {
+      if (errors?.some?.((e) => e.message.includes(pattern))) {
+        throw new AbortError(...abort);
+      }
     }
     throw error;
   }

package/dist/lib/import-utils.js

@@ -1,14 +1,30 @@
 import { createRequire } from 'node:module';
 import { pathToFileURL } from 'node:url';
+import { AbortError } from '@shopify/cli-kit/node/error';
 import { findUpAndReadPackageJson } from '@shopify/cli-kit/node/node-package-manager';
 import { joinPath, dirname } from '@shopify/cli-kit/node/path';
 
 const require2 = createRequire(import.meta.url);
 async function importVite(root) {
-  const vitePath = require2.resolve(
-    "vite",
-    process.env.SHOPIFY_UNIT_TEST ? void 0 : { paths: [root] }
-  );
+  let vitePath;
+  try {
+    vitePath = require2.resolve(
+      "vite",
+      process.env.SHOPIFY_UNIT_TEST ? void 0 : { paths: [root] }
+    );
+  } catch (error) {
+    if (error instanceof Error && error.code === "MODULE_NOT_FOUND") {
+      throw new AbortError(
+        "Could not find the 'vite' package in your project.",
+        "Hydrogen uses Vite to run this command.",
+        [
+          "Run this command from the root directory of your Hydrogen app.",
+          "Install your project dependencies (for example, by running `npm install`) and try again."
+        ]
+      );
+    }
+    throw error;
+  }
   const vitePackageJson = await findUpAndReadPackageJson(vitePath);
   let viteNodeIndexFile = vitePackageJson.content.exports?.["."];
   if (typeof viteNodeIndexFile !== "string") {