@shopify/cli-hydrogen 5.0.2 → 5.1.1

package/dist/lib/onboarding/local.js

@@ -0,0 +1,229 @@
+import { copy } from 'fs-extra/esm';
+import { writeFile } from '@shopify/cli-kit/node/fs';
+import { relativePath, joinPath } from '@shopify/cli-kit/node/path';
+import { hyphenate } from '@shopify/cli-kit/common/string';
+import colors from '@shopify/cli-kit/node/colors';
+import { renderSelectPrompt, renderSuccess, renderConfirmationPrompt, renderTasks } from '@shopify/cli-kit/node/ui';
+import { handleStorefrontLink, handleProjectLocation, createAbortHandler, generateProjectEntries, handleLanguage, createInitialCommit, handleCssStrategy, commitAll, handleDependencies, handleCliShortcut, handleI18n, handleRouteGeneration, renderProjectReady } from './common.js';
+import { createStorefront } from '../graphql/admin/create-storefront.js';
+import { waitForJob } from '../graphql/admin/fetch-job.js';
+import { getStarterDir } from '../build.js';
+import { replaceFileContent } from '../file.js';
+import { setUserAccount, setStorefront } from '../shopify-config.js';
+import { getCliCommand, ALIAS_NAME } from '../shell.js';
+import { CSS_STRATEGY_NAME_MAP } from '../setups/css/index.js';
+
+async function setupLocalStarterTemplate(options, controller) {
+  const templateAction = options.mockShop ? "mock" : await renderSelectPrompt({
+    message: "Connect to Shopify",
+    choices: [
+      {
+        label: "Use sample data from Mock.shop (no login required)",
+        value: "mock"
+      },
+      { label: "Link your Shopify account", value: "link" }
+    ],
+    defaultValue: "mock",
+    abortSignal: controller.signal
+  });
+  const storefrontInfo = templateAction === "link" ? await handleStorefrontLink(controller) : void 0;
+  const project = await handleProjectLocation({
+    ...options,
+    storefrontInfo,
+    controller
+  });
+  if (!project)
+    return;
+  if (templateAction === "mock")
+    project.storefrontTitle = "Mock.shop";
+  const abort = createAbortHandler(controller, project);
+  const createStorefrontPromise = storefrontInfo && createStorefront(storefrontInfo.session, storefrontInfo.title).then(async ({ storefront, jobId }) => {
+    if (jobId)
+      await waitForJob(storefrontInfo.session, jobId);
+    return storefront;
+  }).catch(abort);
+  const templateDir = getStarterDir();
+  let backgroundWorkPromise = copy(
+    templateDir,
+    project.directory,
+    {
+      filter: (filepath) => !/^(app|dist|node_modules)\//i.test(
+        relativePath(templateDir, filepath)
+      )
+    }
+  ).then(
+    () => generateProjectEntries({
+      rootDirectory: project.directory,
+      appDirectory: joinPath(project.directory, "app"),
+      typescript: true
+    })
+  ).catch(abort);
+  const tasks = [
+    {
+      title: "Creating storefront",
+      task: async () => {
+        await createStorefrontPromise;
+      }
+    },
+    {
+      title: "Setting up project",
+      task: async () => {
+        await backgroundWorkPromise;
+      }
+    }
+  ];
+  backgroundWorkPromise = backgroundWorkPromise.then(() => {
+    const promises = [
+      replaceFileContent(
+        joinPath(project.directory, "package.json"),
+        false,
+        (content) => content.replace(
+          /"name": "[^"]+"/,
+          `"name": "${hyphenate(storefrontInfo?.title ?? project.name)}"`
+        )
+      )
+    ];
+    const envLeadingComment = "# The variables added in this file are only available locally in MiniOxygen\n";
+    if (storefrontInfo && createStorefrontPromise) {
+      promises.push(
+        setUserAccount(project.directory, storefrontInfo),
+        createStorefrontPromise.then(
+          (storefront) => setStorefront(project.directory, storefront)
+        ),
+        writeFile(joinPath(project.directory, ".env"), envLeadingComment)
+      );
+    } else if (templateAction === "mock") {
+      promises.push(
+        writeFile(
+          joinPath(project.directory, ".env"),
+          envLeadingComment + "\n" + [
+            ["SESSION_SECRET", "foobar"],
+            ["PUBLIC_STORE_DOMAIN", "mock.shop"]
+          ].map(([key, value]) => `${key}="${value}"`).join("\n") + "\n"
+        )
+      );
+    }
+    return Promise.all(promises).catch(abort);
+  });
+  const { language, transpileProject } = await handleLanguage(
+    project.directory,
+    controller,
+    options.language
+  );
+  backgroundWorkPromise = backgroundWorkPromise.then(() => transpileProject().catch(abort)).then(
+    () => options.git ? createInitialCommit(project.directory) : void 0
+  );
+  const { setupCss, cssStrategy } = await handleCssStrategy(
+    project.directory,
+    controller,
+    options.styling
+  );
+  if (cssStrategy) {
+    backgroundWorkPromise = backgroundWorkPromise.then(() => setupCss().catch(abort)).then(
+      () => options.git ? commitAll(
+        project.directory,
+        "Setup " + CSS_STRATEGY_NAME_MAP[cssStrategy]
+      ) : void 0
+    );
+  }
+  const { packageManager, shouldInstallDeps, installDeps } = await handleDependencies(
+    project.directory,
+    controller,
+    options.installDeps
+  );
+  const setupSummary = {
+    language,
+    packageManager,
+    cssStrategy,
+    depsInstalled: false,
+    hasCreatedShortcut: false
+  };
+  if (shouldInstallDeps) {
+    const installingDepsPromise = backgroundWorkPromise.then(async () => {
+      try {
+        await installDeps();
+        setupSummary.depsInstalled = true;
+      } catch (error) {
+        setupSummary.depsError = error;
+      }
+    });
+    tasks.push({
+      title: "Installing dependencies. This could take a few minutes",
+      task: async () => {
+        await installingDepsPromise;
+      }
+    });
+  }
+  const pkgManagerCommand = await getCliCommand("", packageManager);
+  const { createShortcut, showShortcutBanner } = await handleCliShortcut(
+    controller,
+    pkgManagerCommand,
+    options.shortcut
+  );
+  if (createShortcut) {
+    backgroundWorkPromise = backgroundWorkPromise.then(async () => {
+      setupSummary.hasCreatedShortcut = await createShortcut();
+    });
+    showShortcutBanner();
+  }
+  const cliCommand = createShortcut ? ALIAS_NAME : pkgManagerCommand;
+  renderSuccess({
+    headline: [
+      { userInput: storefrontInfo?.title ?? project.name },
+      "is ready to build."
+    ]
+  });
+  const continueWithSetup = (options.i18n ?? options.routes) !== void 0 || await renderConfirmationPrompt({
+    message: "Do you want to scaffold routes and core functionality?",
+    confirmationMessage: "Yes, set up now",
+    cancellationMessage: "No, set up later " + colors.dim(`(run \`${cliCommand} setup\`)`),
+    abortSignal: controller.signal
+  });
+  if (continueWithSetup) {
+    const { i18nStrategy, setupI18n } = await handleI18n(
+      controller,
+      cliCommand,
+      options.i18n
+    );
+    const { setupRoutes } = await handleRouteGeneration(
+      controller,
+      options.routes || true
+    );
+    setupSummary.i18n = i18nStrategy;
+    backgroundWorkPromise = backgroundWorkPromise.then(async () => {
+      await setupI18n({
+        rootDirectory: project.directory,
+        serverEntryPoint: language === "ts" ? "server.ts" : "server.js"
+      }).then(
+        () => options.git ? commitAll(
+          project.directory,
+          `Setup markets support using ${i18nStrategy}`
+        ) : void 0
+      ).catch((error) => {
+        setupSummary.i18nError = error;
+      });
+      await setupRoutes(project.directory, language, i18nStrategy).then((routes) => {
+        setupSummary.routes = routes;
+        if (options.git && routes) {
+          return commitAll(
+            project.directory,
+            `Generate routes for core functionality`
+          );
+        }
+      }).catch((error) => {
+        setupSummary.routesError = error;
+      });
+    });
+  }
+  await renderTasks(tasks);
+  if (options.git) {
+    await commitAll(project.directory, "Lockfile");
+  }
+  await renderProjectReady(project, setupSummary);
+  return {
+    ...project,
+    ...setupSummary
+  };
+}
+
+export { setupLocalStarterTemplate };

package/dist/lib/onboarding/remote.js

@@ -0,0 +1,89 @@
+import { AbortError } from '@shopify/cli-kit/node/error';
+import { copyFile } from '@shopify/cli-kit/node/fs';
+import { joinPath } from '@shopify/cli-kit/node/path';
+import { renderTasks, renderInfo } from '@shopify/cli-kit/node/ui';
+import { getLatestTemplates } from '../template-downloader.js';
+import { handleProjectLocation, createAbortHandler, handleLanguage, createInitialCommit, handleDependencies, renderProjectReady } from './common.js';
+
+async function setupRemoteTemplate(options, controller) {
+  const isOfficialTemplate = options.template === "demo-store" || options.template === "hello-world";
+  if (!isOfficialTemplate) {
+    throw new AbortError(
+      "Only `demo-store` and `hello-world` are supported in --template flag for now.",
+      "Skip the --template flag to run the setup flow."
+    );
+  }
+  const appTemplate = options.template;
+  const backgroundDownloadPromise = getLatestTemplates({
+    signal: controller.signal
+  }).catch((error) => {
+    throw abort(error);
+  });
+  const project = await handleProjectLocation({ ...options, controller });
+  if (!project)
+    return;
+  const abort = createAbortHandler(controller, project);
+  let backgroundWorkPromise = backgroundDownloadPromise.then(
+    ({ templatesDir }) => copyFile(joinPath(templatesDir, appTemplate), project.directory).catch(
+      abort
+    )
+  );
+  const { language, transpileProject } = await handleLanguage(
+    project.directory,
+    controller,
+    options.language
+  );
+  backgroundWorkPromise = backgroundWorkPromise.then(() => transpileProject().catch(abort)).then(() => createInitialCommit(project.directory));
+  const { packageManager, shouldInstallDeps, installDeps } = await handleDependencies(
+    project.directory,
+    controller,
+    options.installDeps
+  );
+  const setupSummary = {
+    language,
+    packageManager,
+    depsInstalled: false,
+    hasCreatedShortcut: false
+  };
+  const tasks = [
+    {
+      title: "Downloading template",
+      task: async () => {
+        await backgroundDownloadPromise;
+      }
+    },
+    {
+      title: "Setting up project",
+      task: async () => {
+        await backgroundWorkPromise;
+      }
+    }
+  ];
+  if (shouldInstallDeps) {
+    tasks.push({
+      title: "Installing dependencies. This could take a few minutes",
+      task: async () => {
+        try {
+          await installDeps();
+          setupSummary.depsInstalled = true;
+        } catch (error) {
+          setupSummary.depsError = error;
+        }
+      }
+    });
+  }
+  await renderTasks(tasks);
+  await renderProjectReady(project, setupSummary);
+  if (isOfficialTemplate) {
+    renderInfo({
+      headline: `Your project will display inventory from the Hydrogen Demo Store.`,
+      body: `To connect this project to your Shopify store\u2019s inventory, update \`${project.name}/.env\` with your store ID and Storefront API key.`
+    });
+  }
+  return {
+    ...project,
+    ...setupSummary
+  };
+}
+
+export { setupRemoteTemplate };

package/dist/lib/remix-config.js

@@ -0,0 +1,135 @@
+import { createRequire } from 'node:module';
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
+import { readdir } from 'node:fs/promises';
+import { AbortError } from '@shopify/cli-kit/node/error';
+import { outputWarn } from '@shopify/cli-kit/node/output';
+import { fileExists } from '@shopify/cli-kit/node/fs';
+
+const BUILD_DIR = "dist";
+const CLIENT_SUBDIR = "client";
+const WORKER_SUBDIR = "worker";
+const oxygenServerMainFields = ["browser", "module", "main"];
+function getProjectPaths(appPath, entry) {
+  const root = appPath ?? process.cwd();
+  const publicPath = path.join(root, "public");
+  const buildPath = path.join(root, BUILD_DIR);
+  const buildPathClient = path.join(buildPath, CLIENT_SUBDIR);
+  const buildPathWorkerFile = path.join(buildPath, WORKER_SUBDIR, "index.js");
+  return {
+    root,
+    buildPath,
+    buildPathClient,
+    buildPathWorkerFile,
+    publicPath
+  };
+}
+async function getRemixConfig(root, mode = process.env.NODE_ENV) {
+  const { readConfig } = await import('@remix-run/dev/dist/config.js');
+  const config = await readConfig(root, mode);
+  if (process.env.LOCAL_DEV) {
+    const packagesPath = fileURLToPath(new URL("../../..", import.meta.url));
+    config.watchPaths ??= [];
+    config.watchPaths.push(
+      ...(await readdir(packagesPath)).map(
+        (pkg) => pkg === "hydrogen-react" ? path.resolve(packagesPath, pkg, "dist", "browser-dev", "index.mjs") : path.resolve(packagesPath, pkg, "dist", "development", "index.js")
+      )
+    );
+    config.watchPaths.push(
+      path.join(packagesPath, "cli", "dist", "virtual-routes", "**", "*")
+    );
+  }
+  return config;
+}
+function assertOxygenChecks(config) {
+  try {
+    createRequire(import.meta.url).resolve("@shopify/remix-oxygen");
+  } catch {
+    return;
+  }
+  if (!config.serverEntryPoint) {
+    throw new AbortError(
+      "Could not find a server entry point.",
+      "Please add a server option to your remix.config.js pointing to an Oxygen worker entry file."
+    );
+  } else {
+    assertEntryFileExists(config.rootDirectory, config.serverEntryPoint);
+  }
+  if (config.serverPlatform !== "neutral") {
+    throw new AbortError(
+      'The serverPlatform in remix.config.js must be "neutral".'
+    );
+  }
+  if (config.serverModuleFormat !== "esm") {
+    throw new AbortError(
+      'The serverModuleFormat in remix.config.js must be "esm".'
+    );
+  }
+  if (config.serverDependenciesToBundle !== "all") {
+    throw new AbortError(
+      'The serverDependenciesToBundle in remix.config.js must be "all".'
+    );
+  }
+  if (!config.serverConditions?.includes("worker")) {
+    throw new AbortError(
+      'The serverConditions in remix.config.js must include "worker".'
+    );
+  }
+  if (process.env.NODE_ENV === "development" && !config.serverConditions?.includes("development")) {
+    outputWarn(
+      "Add `process.env.NODE_ENV` value to serverConditions in remix.config.js to enable debugging features in development."
+    );
+  }
+  if (!config.serverMainFields || !oxygenServerMainFields.every((v, i) => config.serverMainFields?.[i] === v)) {
+    throw new AbortError(
+      `The serverMainFields in remix.config.js must be ${JSON.stringify(
+        oxygenServerMainFields
+      )}.`
+    );
+  }
+  const cdnUrl = process.env.HYDROGEN_ASSET_BASE_URL;
+  if (cdnUrl && !config.publicPath.startsWith(cdnUrl)) {
+    throw new AbortError(
+      "The publicPath in remix.config.js must be prepended with the value of `process.env.HYDROGEN_ASSET_BASE_URL`."
+    );
+  }
+  const expectedServerBuildPath = path.join(
+    BUILD_DIR,
+    WORKER_SUBDIR,
+    "index.js"
+  );
+  if (config.serverBuildPath !== path.resolve(config.rootDirectory, expectedServerBuildPath)) {
+    throw new AbortError(
+      `The serverBuildPath in remix.config.js must be "${expectedServerBuildPath}".`
+    );
+  }
+  const expectedAssetsBuildDirectory = path.join(BUILD_DIR, CLIENT_SUBDIR);
+  if (!config.assetsBuildDirectory.startsWith(
+    path.resolve(config.rootDirectory, expectedAssetsBuildDirectory)
+  )) {
+    throw new AbortError(
+      `The assetsBuildDirectory in remix.config.js must be in "${expectedAssetsBuildDirectory}".`
+    );
+  }
+}
+async function assertEntryFileExists(root, fileRelative) {
+  const fileAbsolute = path.resolve(root, fileRelative);
+  const exists = await fileExists(fileAbsolute);
+  if (!exists) {
+    if (!path.extname(fileAbsolute)) {
+      const files = await readdir(path.dirname(fileAbsolute));
+      const exists2 = files.some((file) => {
+        const { name, ext } = path.parse(file);
+        return name === path.basename(fileAbsolute) && /^\.[jt]s$/.test(ext);
+      });
+      if (exists2)
+        return;
+    }
+    throw new AbortError(
+      `Entry file "${fileRelative}" not found.`,
+      "Please ensure the file exists and that the path is correctly added to the `server` property in remix.config.js."
+    );
+  }
+}
+
+export { assertOxygenChecks, getProjectPaths, getRemixConfig };

package/dist/lib/remix-version-check.js

@@ -0,0 +1,51 @@
+import { createRequire } from 'node:module';
+import { fileURLToPath } from 'node:url';
+import { renderWarning } from '@shopify/cli-kit/node/ui';
+
+function checkRemixVersions() {
+  const require2 = createRequire(import.meta.url);
+  const hydrogenPkgJson = require2(fileURLToPath(
+    new URL("../../package.json", import.meta.url)
+  ));
+  const requiredVersionInHydrogen = hydrogenPkgJson.dependencies["@remix-run/dev"];
+  const pkgs = [
+    "dev",
+    "react",
+    "server-runtime",
+    "css-bundle",
+    "node",
+    "express",
+    "eslint-config"
+  ].map((name) => getRemixPackageVersion(require2, name));
+  const outOfSyncPkgs = pkgs.filter(
+    (pkg) => pkg.version && pkg.version !== requiredVersionInHydrogen
+  );
+  if (outOfSyncPkgs.length === 0)
+    return;
+  const items = outOfSyncPkgs.reduce((acc, item) => {
+    if (item.version) {
+      acc.push(`${item.name}@${item.version}`);
+    }
+    return acc;
+  }, []);
+  renderWarning({
+    headline: `The current version of Hydrogen requires Remix @${requiredVersionInHydrogen}. The following packages are out of sync:`,
+    body: [
+      { list: { items } },
+      "\nPlease ensure your Remix packages have the same version and are in sync with Hydrogen."
+    ]
+  });
+}
+function getRemixPackageVersion(require2, name) {
+  const pkgName = "@remix-run/" + name;
+  const result = { name: pkgName, version: "" };
+  try {
+    const pkgJsonPath = require2.resolve(`${pkgName}/package.json`);
+    const pkgJson = require2(pkgJsonPath);
+    result.version = pkgJson.version;
+  } catch {
+  }
+  return result;
+}
+
+export { checkRemixVersions };

package/dist/lib/remix-version-check.test.js

@@ -0,0 +1,38 @@
+import { vi, describe, it, expect } from 'vitest';
+import { mockAndCaptureOutput } from '@shopify/cli-kit/node/testing/output';
+import { checkRemixVersions } from './remix-version-check.js';
+
+const requireMock = vi.fn();
+vi.mock("node:module", async () => {
+  const { createRequire } = await vi.importActual(
+    "node:module"
+  );
+  return {
+    createRequire: (url) => {
+      const actualRequire = createRequire(url);
+      requireMock.mockImplementation((mod) => actualRequire(mod));
+      const require2 = requireMock;
+      require2.resolve = actualRequire.resolve.bind(actualRequire);
+      return require2;
+    }
+  };
+});
+describe("remix-version-check", () => {
+  it("does nothing when versions are in sync", () => {
+    const outputMock = mockAndCaptureOutput();
+    checkRemixVersions();
+    expect(outputMock.warn()).toBe("");
+  });
+  it("warns when versions are out of sync", () => {
+    const expectedVersion = "42.0.0-test";
+    vi.mocked(requireMock).mockReturnValueOnce({
+      dependencies: { "@remix-run/dev": expectedVersion }
+    });
+    const outputMock = mockAndCaptureOutput();
+    checkRemixVersions();
+    const output = outputMock.warn();
+    expect(output).toMatch(`Hydrogen requires Remix @${expectedVersion}`);
+    expect(output).toMatch(`@remix-run/dev@`);
+    expect(output).toMatch(`@remix-run/react@`);
+  });
+});

package/dist/lib/remix-version-interop.js

@@ -1,5 +1,5 @@
 import { createRequire } from 'module';
-import { getRemixConfig } from './config.js';
+import { getRemixConfig } from './remix-config.js';
 
 function isRemixV2() {
   try {
@@ -10,10 +10,10 @@ function isRemixV2() {
     return false;
   }
 }
-async function getV2Flags(root) {
+async function getV2Flags(root, remixConfigFuture) {
   const isV2 = isRemixV2();
   const futureFlags = {
-    ...!isV2 && (await getRemixConfig(root, true)).future
+    ...!isV2 && (remixConfigFuture ?? (await getRemixConfig(root)).future)
   };
   return {
     isV2Meta: isV2 || !!futureFlags.v2_meta,
@@ -21,8 +21,8 @@ async function getV2Flags(root) {
     isV2RouteConvention: isV2 ? !isV1RouteConventionInstalled() : !!futureFlags.v2_routeConvention
   };
 }
-function convertRouteToV2(route) {
-  return route.replace(/\/index$/, "/_index").replace(/(?<!^)\//g, ".");
+function convertRouteToV1(route) {
+  return route.replace(/(^|\.)_index$/, "$1index").replace(/\.(?!\w+\])/g, "/");
 }
 function convertTemplateToRemixVersion(template, { isV2Meta, isV2ErrorBoundary }) {
   template = isV2Meta ? convertToMetaV2(template) : convertToMetaV1(template);
@@ -51,4 +51,4 @@ function isV1RouteConventionInstalled() {
   }
 }
 
-export { convertRouteToV2, convertTemplateToRemixVersion, getV2Flags, isRemixV2 };
+export { convertRouteToV1, convertTemplateToRemixVersion, getV2Flags, isRemixV2 };

package/dist/lib/remix-version-interop.test.js

@@ -1,7 +1,17 @@
 import { describe, it, expect } from 'vitest';
-import { convertTemplateToRemixVersion } from './remix-version-interop.js';
+import { convertRouteToV1, convertTemplateToRemixVersion } from './remix-version-interop.js';
 
 describe("remix-version-interop", () => {
+  describe("v2_routeConvention", () => {
+    it("converts routes to v1", () => {
+      expect(convertRouteToV1("_index")).toEqual("index");
+      expect(convertRouteToV1("path.to.file")).toEqual("path/to/file");
+      expect(convertRouteToV1("path.to._index")).toEqual("path/to/index");
+      expect(convertRouteToV1("patht.to.[sitemap.xml]")).toEqual(
+        "patht/to/[sitemap.xml]"
+      );
+    });
+  });
   describe("v2_meta", () => {
     const META_TEMPLATE = `
     import {type MetaFunction} from '@shopify/remix-oxygen';
@@ -48,7 +58,7 @@ describe("remix-version-interop", () => {
       return <div>stuff</div>;
     }
 
-    export const ErrorBoundaryV1: ErrorBoundaryComponent = ({error}) => {
+    export const ErrorBoundaryV1 = ({error}: {error: Error}) => {
       console.error(error);
     
       return <div>There was an error.</div>;

package/dist/lib/render-errors.js

@@ -1,11 +1,12 @@
 import { renderFatalError } from '@shopify/cli-kit/node/ui';
 import { outputContent, outputToken } from '@shopify/cli-kit/node/output';
 import { hydrogenStorefrontsUrl } from './admin-urls.js';
-import { parseGid } from './graphql.js';
+import { parseGid } from './gid.js';
 
 function renderMissingStorefront({
-  adminSession,
-  storefront
+  session,
+  storefront,
+  cliCommand
 }) {
   renderFatalError({
     name: "NoStorefrontError",
@@ -15,22 +16,23 @@ function renderMissingStorefront({
     )}`.value,
     tryMessage: outputContent`Couldn’t find ${storefront.title} (ID: ${parseGid(
       storefront.id
-    )}) on ${adminSession.storeFqdn}. Check that the storefront exists and run ${outputToken.genericShellCommand(
-      `npx shopify hydrogen link`
+    )}) on ${session.storeFqdn}. Check that the storefront exists and run ${outputToken.genericShellCommand(
+      `${cliCommand} link`
     )} to link this project to it.\n\n${outputToken.link(
       "Hydrogen Storefronts Admin",
-      hydrogenStorefrontsUrl(adminSession)
+      hydrogenStorefrontsUrl(session)
     )}`.value
   });
 }
-function renderMissingLink({ adminSession }) {
+function renderMissingLink({ session, cliCommand }) {
   renderFatalError({
     name: "NoLinkedStorefrontError",
     type: 0,
-    message: `No linked Hydrogen storefront on ${adminSession.storeFqdn}`,
-    tryMessage: outputContent`To pull environment variables, link this project to a Hydrogen storefront. To select a storefront to link, run ${outputToken.genericShellCommand(
-      `npx shopify hydrogen link`
-    )}.`.value
+    message: `No linked Hydrogen storefront on ${session.storeFqdn}`,
+    tryMessage: [
+      "To pull environment variables, link this project to a Hydrogen storefront. To select a storefront to link, run",
+      { command: `${cliCommand} link` }
+    ]
   });
 }