@shopify/cli-hydrogen 5.1.2 → 5.2.0

package/dist/commands/hydrogen/build.js

@@ -1,7 +1,7 @@
 import { Flags } from '@oclif/core';
 import Command from '@shopify/cli-kit/node/base-command';
 import { outputInfo, outputContent, outputToken, outputWarn } from '@shopify/cli-kit/node/output';
-import { rmdir, fileSize, glob, removeFile, copyFile } from '@shopify/cli-kit/node/fs';
+import { rmdir, fileSize, glob, removeFile, fileExists, copyFile } from '@shopify/cli-kit/node/fs';
 import { resolvePath, relativePath, joinPath } from '@shopify/cli-kit/node/path';
 import { getPackageManager } from '@shopify/cli-kit/node/node-package-manager';
 import colors from '@shopify/cli-kit/node/colors';
@@ -130,6 +130,9 @@ This build is missing ${missingRoutes.length} route${missingRoutes.length > 1 ?
   }
 }
 async function copyPublicFiles(publicPath, buildPathClient) {
+  if (!await fileExists(publicPath)) {
+    return;
+  }
   return copyFile(publicPath, buildPathClient);
 }
 

package/dist/commands/hydrogen/dev.js

@@ -6,8 +6,8 @@ import { renderFatalError } from '@shopify/cli-kit/node/ui';
 import colors from '@shopify/cli-kit/node/colors';
 import { copyPublicFiles } from './build.js';
 import { getProjectPaths, assertOxygenChecks, getRemixConfig } from '../../lib/remix-config.js';
-import { muteDevLogs, muteRemixLogs, createRemixLogger, enhanceH2Logs } from '../../lib/log.js';
-import { commonFlags, deprecated, flagsToCamelObject } from '../../lib/flags.js';
+import { muteDevLogs, createRemixLogger, enhanceH2Logs } from '../../lib/log.js';
+import { commonFlags, deprecated, flagsToCamelObject, DEFAULT_PORT } from '../../lib/flags.js';
 import Command from '@shopify/cli-kit/node/base-command';
 import { Flags } from '@oclif/core';
 import { startMiniOxygen } from '../../lib/mini-oxygen.js';
@@ -16,6 +16,8 @@ import { addVirtualRoutes } from '../../lib/virtual-routes.js';
 import { spawnCodegenProcess } from '../../lib/codegen.js';
 import { getAllEnvironmentVariables } from '../../lib/environment-variables.js';
 import { getConfig } from '../../lib/shopify-config.js';
+import { findPort } from '../../lib/find-port.js';
+import { setupLiveReload } from '../../lib/live-reload.js';
 import { checkRemixVersions } from '../../lib/remix-version-check.js';
 
 const LOG_REBUILDING = "\u{1F9F1} Rebuilding...";
@@ -56,7 +58,7 @@ class Dev extends Command {
   }
 }
 async function runDev({
-  port,
+  port: portFlag = DEFAULT_PORT,
   path: appPath,
   useCodegen = false,
   codegenConfigPath,
@@ -68,7 +70,6 @@ async function runDev({
   if (!process.env.NODE_ENV)
     process.env.NODE_ENV = "development";
   muteDevLogs();
-  await muteRemixLogs();
   if (debug)
     (await import('node:inspector')).open();
   const { root, publicPath, buildPathClient, buildPathWorkerFile } = getProjectPaths(appPath);
@@ -102,14 +103,15 @@ async function runDev({
   let isInitialBuild = true;
   let initialBuildDurationMs = 0;
   let initialBuildStartTimeMs = Date.now();
+  const liveReload = remixConfig.future.v2_dev ? await setupLiveReload(remixConfig.devServerPort) : void 0;
   let miniOxygen;
   async function safeStartMiniOxygen() {
     if (miniOxygen)
       return;
     miniOxygen = await startMiniOxygen({
       root,
-      port,
-      watch: true,
+      port: await findPort(portFlag),
+      watch: !liveReload,
       buildPathWorkerFile,
       buildPathClient,
       env: await envPromise
@@ -145,13 +147,15 @@ View GraphiQL API browser: ${graphiqlUrl}`)]
     },
     {
       reloadConfig,
-      onBuildStart() {
+      onBuildStart(ctx) {
         if (!isInitialBuild && !skipRebuildLogs) {
           outputInfo(LOG_REBUILDING);
           console.time(LOG_REBUILT);
         }
+        liveReload?.onBuildStart(ctx);
       },
-      async onBuildFinish() {
+      onBuildManifest: liveReload?.onBuildManifest,
+      async onBuildFinish(context, duration, succeeded) {
         if (isInitialBuild) {
           await copyingFiles;
           initialBuildDurationMs = Date.now() - initialBuildStartTimeMs;
@@ -162,16 +166,21 @@ View GraphiQL API browser: ${graphiqlUrl}`)]
           if (!miniOxygen)
             console.log("");
         }
-        if (!miniOxygen) {
-          if (!await serverBundleExists()) {
-            return renderFatalError({
-              name: "BuildError",
-              type: 0,
-              message: "MiniOxygen cannot start because the server bundle has not been generated.",
-              tryMessage: "This is likely due to an error in your app and Remix is unable to compile. Try fixing the app and MiniOxygen will start."
-            });
+        if (!miniOxygen && !await serverBundleExists()) {
+          return renderFatalError({
+            name: "BuildError",
+            type: 0,
+            message: "MiniOxygen cannot start because the server bundle has not been generated.",
+            tryMessage: "This is likely due to an error in your app and Remix is unable to compile. Try fixing the app and MiniOxygen will start."
+          });
+        }
+        if (succeeded) {
+          if (!miniOxygen) {
+            await safeStartMiniOxygen();
+          } else if (liveReload) {
+            await miniOxygen.reload({ worker: true });
           }
-          await safeStartMiniOxygen();
+          liveReload?.onAppReady(context);
         }
       },
       async onFileCreated(file) {

package/dist/commands/hydrogen/init.js

@@ -70,6 +70,9 @@ async function runInit(options = parseProcessFlags(process.argv, FLAG_MAP)) {
   supressNodeExperimentalWarnings();
   options.git ??= true;
   const showUpgrade = await checkHydrogenVersion(
+    // Resolving the CLI package from a local directory might fail because
+    // this code could be run from a global dependency (e.g. on `npm create`).
+    // Therefore, pass the known path to the package.json directly from here:
     fileURLToPath(new URL("../../../package.json", import.meta.url)),
     "cli"
   );

package/dist/commands/hydrogen/init.test.js

@@ -145,6 +145,7 @@ describe("init", () => {
         expect(output).toMatch("Help");
         expect(output).toMatch("Next steps");
         expect(output).toMatch(
+          // Output contains banner characters. USe [^\w]*? to match them.
           /Run `cd .*? &&[^\w]*?npm[^\w]*?install[^\w]*?&&[^\w]*?npm[^\w]*?run[^\w]*?dev`/ims
         );
       });
@@ -220,6 +221,7 @@ describe("init", () => {
         expect(output).toMatch("Help");
         expect(output).toMatch("Next steps");
         expect(output).toMatch(
+          // Output contains banner characters. USe [^\w]*? to match them.
           /Run `cd .*? &&[^\w]*?npm[^\w]*?install[^\w]*?&&[^\w]*?npm[^\w]*?run[^\w]*?dev`/ims
         );
       });

package/dist/commands/hydrogen/preview.js

@@ -1,8 +1,9 @@
 import Command from '@shopify/cli-kit/node/base-command';
 import { muteDevLogs } from '../../lib/log.js';
 import { getProjectPaths } from '../../lib/remix-config.js';
-import { commonFlags } from '../../lib/flags.js';
+import { commonFlags, DEFAULT_PORT } from '../../lib/flags.js';
 import { startMiniOxygen } from '../../lib/mini-oxygen.js';
+import { findPort } from '../../lib/find-port.js';
 
 class Preview extends Command {
   static description = "Runs a Hydrogen storefront in an Oxygen worker for production.";
@@ -16,7 +17,7 @@ class Preview extends Command {
   }
 }
 async function runPreview({
-  port,
+  port = DEFAULT_PORT,
   path: appPath
 }) {
   if (!process.env.NODE_ENV)
@@ -25,7 +26,7 @@ async function runPreview({
   const { root, buildPathWorkerFile, buildPathClient } = getProjectPaths(appPath);
   const miniOxygen = await startMiniOxygen({
     root,
-    port,
+    port: await findPort(port),
     buildPathClient,
     buildPathWorkerFile
   });

package/dist/commands/hydrogen/setup.js

@@ -57,6 +57,8 @@ async function runSetup(options) {
     const typescript = !!remixConfig.tsconfigPath;
     backgroundWorkPromise = backgroundWorkPromise.then(
       () => Promise.all([
+        // When starting from hello-world, the server entry point won't
+        // include all the cart logic from skeleton, so we need to copy it.
         generateProjectFile("../server.ts", { ...remixConfig, typescript }),
         ...typescript ? [
           copyFile(
@@ -71,6 +73,7 @@ async function runSetup(options) {
             )
           )
         ] : [],
+        // Copy app entries
         generateProjectEntries({
           rootDirectory: remixConfig.rootDirectory,
           appDirectory: remixConfig.appDirectory,

package/dist/generator-templates/starter/app/components/Footer.tsx

@@ -93,7 +93,7 @@ function activeLinkStyle({
   isPending: boolean;
 }) {
   return {
-    fontWeight: isActive ? 'bold' : '',
+    fontWeight: isActive ? 'bold' : undefined,
     color: isPending ? 'grey' : 'white',
   };
 }

package/dist/generator-templates/starter/app/components/Header.tsx

@@ -172,7 +172,7 @@ function activeLinkStyle({
   isPending: boolean;
 }) {
   return {
-    fontWeight: isActive ? 'bold' : '',
+    fontWeight: isActive ? 'bold' : undefined,
     color: isPending ? 'grey' : 'black',
   };
 }

package/dist/generator-templates/starter/app/components/Search.tsx

@@ -1,13 +1,13 @@
 import {
-  useParams,
-  useFetcher,
   Link,
   Form,
+  useParams,
+  useFetcher,
+  useFetchers,
   type FormProps,
 } from '@remix-run/react';
 import {Image, Money, Pagination} from '@shopify/hydrogen';
 import React, {useRef, useEffect} from 'react';
-import {useFetchers} from '@remix-run/react';
 
 import type {
   PredictiveProductFragment,

package/dist/generator-templates/starter/app/root.tsx

@@ -5,19 +5,40 @@ import {
   Outlet,
   Scripts,
   useCatch,
+  LiveReload,
   useMatches,
   useRouteError,
   useLoaderData,
   ScrollRestoration,
   isRouteErrorResponse,
+  type ShouldRevalidateFunction,
 } from '@remix-run/react';
-import type {CustomerAccessToken} from '@shopify/hydrogen-react/storefront-api-types';
+import type {CustomerAccessToken} from '@shopify/hydrogen/storefront-api-types';
 import type {HydrogenSession} from '../server';
 import favicon from '../public/favicon.svg';
 import resetStyles from './styles/reset.css';
 import appStyles from './styles/app.css';
 import {Layout} from '~/components/Layout';
 
+// This is important to avoid re-fetching root queries on sub-navigations
+export const shouldRevalidate: ShouldRevalidateFunction = ({
+  formMethod,
+  currentUrl,
+  nextUrl,
+}) => {
+  // revalidate when a mutation is performed e.g add to cart, login...
+  if (formMethod && formMethod !== 'GET') {
+    return true;
+  }
+
+  // revalidate when manually revalidating via useRevalidator
+  if (currentUrl.toString() === nextUrl.toString()) {
+    return true;
+  }
+
+  return false;
+};
+
 export function links() {
   return [
     {rel: 'stylesheet', href: resetStyles},
@@ -93,6 +114,7 @@ export default function App() {
         </Layout>
         <ScrollRestoration />
         <Scripts />
+        <LiveReload />
       </body>
     </html>
   );
@@ -133,6 +155,7 @@ export function ErrorBoundary() {
         </Layout>
         <ScrollRestoration />
         <Scripts />
+        <LiveReload />
       </body>
     </html>
   );

package/dist/generator-templates/starter/app/routes/$.tsx

@@ -5,3 +5,7 @@ export async function loader({request}: LoaderArgs) {
     status: 404,
   });
 }
+
+export default function CatchAllPage() {
+  return null;
+}

package/dist/generator-templates/starter/app/routes/_index.tsx

@@ -1,6 +1,10 @@
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {defer, type LoaderArgs} from '@shopify/remix-oxygen';
-import {Await, useLoaderData, Link} from '@remix-run/react';
+import {
+  Await,
+  useLoaderData,
+  Link,
+  type V2_MetaFunction,
+} from '@remix-run/react';
 import {Suspense} from 'react';
 import {Image, Money} from '@shopify/hydrogen';
 import type {

package/dist/generator-templates/starter/app/routes/account.$.tsx

@@ -1,5 +1,4 @@
-import type {LoaderArgs} from '@shopify/remix-oxygen';
-import {redirect} from '@shopify/remix-oxygen';
+import {redirect, type LoaderArgs} from '@shopify/remix-oxygen';
 
 export async function loader({context}: LoaderArgs) {
   if (await context.session.get('customerAccessToken')) {

package/dist/generator-templates/starter/app/routes/account.addresses.tsx

@@ -5,13 +5,13 @@ import {
   redirect,
   type ActionArgs,
   type LoaderArgs,
-  type V2_MetaFunction,
 } from '@shopify/remix-oxygen';
 import {
   Form,
   useActionData,
   useNavigation,
   useOutletContext,
+  type V2_MetaFunction,
 } from '@remix-run/react';
 
 export type ActionResponse = {

package/dist/generator-templates/starter/app/routes/account.orders._index.tsx

@@ -1,11 +1,6 @@
-import {Link, useLoaderData} from '@remix-run/react';
+import {Link, useLoaderData, type V2_MetaFunction} from '@remix-run/react';
 import {Money, Pagination, getPaginationVariables} from '@shopify/hydrogen';
-import {
-  json,
-  redirect,
-  type LoaderArgs,
-  type V2_MetaFunction,
-} from '@shopify/remix-oxygen';
+import {json, redirect, type LoaderArgs} from '@shopify/remix-oxygen';
 import type {
   CustomerOrdersFragment,
   OrderItemFragment,

package/dist/generator-templates/starter/app/routes/account.profile.tsx

@@ -1,12 +1,17 @@
 import type {CustomerFragment} from 'storefrontapi.generated';
 import type {CustomerUpdateInput} from '@shopify/hydrogen/storefront-api-types';
-import type {ActionArgs, LoaderArgs} from '@shopify/remix-oxygen';
-import {json, redirect, type V2_MetaFunction} from '@shopify/remix-oxygen';
+import {
+  json,
+  redirect,
+  type ActionArgs,
+  type LoaderArgs,
+} from '@shopify/remix-oxygen';
 import {
   Form,
   useActionData,
   useNavigation,
   useOutletContext,
+  type V2_MetaFunction,
 } from '@remix-run/react';
 
 export type ActionResponse = {

package/dist/generator-templates/starter/app/routes/account.tsx

@@ -109,13 +109,13 @@ function AccountLayout({
     <div className="account">
       <h1>{heading}</h1>
       <br />
-      <AcccountMenu />
+      <AccountMenu />
       {children}
     </div>
   );
 }
 
-function AcccountMenu() {
+function AccountMenu() {
   function isActiveStyle({
     isActive,
     isPending,
@@ -124,10 +124,11 @@ function AcccountMenu() {
     isPending: boolean;
   }) {
     return {
-      fontWeight: isActive ? 'bold' : '',
+      fontWeight: isActive ? 'bold' : undefined,
       color: isPending ? 'grey' : 'black',
     };
   }
+
   return (
     <nav role="navigation">
       <NavLink to="/account/orders" style={isActiveStyle}>

package/dist/generator-templates/starter/app/routes/account_.activate.$id.$activationToken.tsx

@@ -1,5 +1,9 @@
-import type {ActionArgs, LoaderArgs} from '@shopify/remix-oxygen';
-import {json, redirect} from '@shopify/remix-oxygen';
+import {
+  json,
+  redirect,
+  type ActionArgs,
+  type LoaderArgs,
+} from '@shopify/remix-oxygen';
 import {Form, useActionData, type V2_MetaFunction} from '@remix-run/react';
 
 type ActionResponse = {

package/dist/generator-templates/starter/app/routes/account_.login.tsx

@@ -3,9 +3,13 @@ import {
   redirect,
   type ActionArgs,
   type LoaderArgs,
-  type V2_MetaFunction,
 } from '@shopify/remix-oxygen';
-import {Form, Link, useActionData} from '@remix-run/react';
+import {
+  Form,
+  Link,
+  useActionData,
+  type V2_MetaFunction,
+} from '@remix-run/react';
 
 type ActionResponse = {
   error: string | null;

package/dist/generator-templates/starter/app/routes/account_.logout.tsx

@@ -1,9 +1,5 @@
-import {
-  json,
-  redirect,
-  type ActionArgs,
-  type V2_MetaFunction,
-} from '@shopify/remix-oxygen';
+import {json, redirect, type ActionArgs} from '@shopify/remix-oxygen';
+import {type V2_MetaFunction} from '@remix-run/react';
 
 export const meta: V2_MetaFunction = () => {
   return [{title: 'Logout'}];

package/dist/generator-templates/starter/app/routes/blogs.$blogHandle.$articleHandle.tsx

@@ -1,6 +1,5 @@
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {json, type LoaderArgs} from '@shopify/remix-oxygen';
-import {useLoaderData} from '@remix-run/react';
+import {useLoaderData, type V2_MetaFunction} from '@remix-run/react';
 import {Image} from '@shopify/hydrogen';
 
 export const meta: V2_MetaFunction = ({data}) => {

package/dist/generator-templates/starter/app/routes/blogs.$blogHandle._index.tsx

@@ -1,6 +1,5 @@
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {json, type LoaderArgs} from '@shopify/remix-oxygen';
-import {Link, useLoaderData} from '@remix-run/react';
+import {Link, useLoaderData, type V2_MetaFunction} from '@remix-run/react';
 import {Image, Pagination, getPaginationVariables} from '@shopify/hydrogen';
 import type {ArticleItemFragment} from 'storefrontapi.generated';
 

package/dist/generator-templates/starter/app/routes/blogs._index.tsx

@@ -1,6 +1,5 @@
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {json, type LoaderArgs} from '@shopify/remix-oxygen';
-import {Link, useLoaderData} from '@remix-run/react';
+import {Link, useLoaderData, type V2_MetaFunction} from '@remix-run/react';
 import {Pagination, getPaginationVariables} from '@shopify/hydrogen';
 
 export const meta: V2_MetaFunction = () => {

package/dist/generator-templates/starter/app/routes/cart.tsx

@@ -1,8 +1,7 @@
-import {Await, useMatches} from '@remix-run/react';
+import {Await, useMatches, type V2_MetaFunction} from '@remix-run/react';
 import {Suspense} from 'react';
 import type {CartQueryData} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {type ActionArgs, json} from '@shopify/remix-oxygen';
 import type {CartApiQueryFragment} from 'storefrontapi.generated';
 import {CartMain} from '~/components/Cart';

package/dist/generator-templates/starter/app/routes/collections.$handle.tsx

@@ -1,6 +1,5 @@
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {json, redirect, type LoaderArgs} from '@shopify/remix-oxygen';
-import {useLoaderData, Link} from '@remix-run/react';
+import {useLoaderData, Link, type V2_MetaFunction} from '@remix-run/react';
 import {
   Pagination,
   getPaginationVariables,

package/dist/generator-templates/starter/app/routes/pages.$handle.tsx

@@ -1,6 +1,5 @@
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {json, type LoaderArgs} from '@shopify/remix-oxygen';
-import {useLoaderData} from '@remix-run/react';
+import {useLoaderData, type V2_MetaFunction} from '@remix-run/react';
 
 export const meta: V2_MetaFunction = ({data}) => {
   return [{title: `Hydrogen | ${data.page.title}`}];

package/dist/generator-templates/starter/app/routes/policies.$handle.tsx

@@ -1,7 +1,6 @@
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {json, type LoaderArgs} from '@shopify/remix-oxygen';
-import {Link, useLoaderData} from '@remix-run/react';
-import {type Shop} from '@shopify/hydrogen-react/storefront-api-types';
+import {Link, useLoaderData, type V2_MetaFunction} from '@remix-run/react';
+import {type Shop} from '@shopify/hydrogen/storefront-api-types';
 
 type SelectedPolicies = keyof Pick<
   Shop,

package/dist/generator-templates/starter/app/routes/products.$handle.tsx

@@ -1,8 +1,12 @@
 import {Suspense} from 'react';
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {defer, redirect, type LoaderArgs} from '@shopify/remix-oxygen';
-import type {FetcherWithComponents} from '@remix-run/react';
-import {Await, Link, useLoaderData} from '@remix-run/react';
+import {
+  Await,
+  Link,
+  useLoaderData,
+  type V2_MetaFunction,
+  type FetcherWithComponents,
+} from '@remix-run/react';
 import type {
   ProductFragment,
   ProductVariantsQuery,
@@ -17,7 +21,10 @@ import {
   getSelectedProductOptions,
   CartForm,
 } from '@shopify/hydrogen';
-import type {CartLineInput} from '@shopify/hydrogen/storefront-api-types';
+import type {
+  CartLineInput,
+  SelectedOption,
+} from '@shopify/hydrogen/storefront-api-types';
 import {getVariantUrl} from '~/utils';
 
 export const meta: V2_MetaFunction = ({data}) => {
@@ -47,15 +54,6 @@ export async function loader({params, request, context}: LoaderArgs) {
     variables: {handle, selectedOptions},
   });
 
-  // In order to show which variants are available in the UI, we need to query
-  // all of them. But there might be a *lot*, so instead separate the variants
-  // into it's own separate query that is deferred. So there's a brief moment
-  // where variant options might show as available when they're not, but after
-  // this deffered query resolves, the UI will update.
-  const variants = storefront.query(VARIANTS_QUERY, {
-    variables: {handle},
-  });
-
   if (!product?.id) {
     throw new Response(null, {status: 404});
   }
@@ -63,7 +61,8 @@ export async function loader({params, request, context}: LoaderArgs) {
   const firstVariant = product.variants.nodes[0];
   const firstVariantIsDefault = Boolean(
     firstVariant.selectedOptions.find(
-      (option) => option.name === 'Title' && option.value === 'Default Title',
+      (option: SelectedOption) =>
+        option.name === 'Title' && option.value === 'Default Title',
     ),
   );
 
@@ -76,6 +75,16 @@ export async function loader({params, request, context}: LoaderArgs) {
       return redirectToFirstVariant({product, request});
     }
   }
+
+  // In order to show which variants are available in the UI, we need to query
+  // all of them. But there might be a *lot*, so instead separate the variants
+  // into it's own separate query that is deferred. So there's a brief moment
+  // where variant options might show as available when they're not, but after
+  // this deffered query resolves, the UI will update.
+  const variants = storefront.query(VARIANTS_QUERY, {
+    variables: {handle},
+  });
+
   return defer({product, variants});
 }
 
@@ -337,7 +346,6 @@ const PRODUCT_VARIANT_FRAGMENT = `#graphql
       title
       handle
     }
-    quantityAvailable
     selectedOptions {
       name
       value

package/dist/generator-templates/starter/app/routes/search.tsx

@@ -1,6 +1,5 @@
-import type {V2_MetaFunction} from '@shopify/remix-oxygen';
 import {defer, type LoaderArgs} from '@shopify/remix-oxygen';
-import {useLoaderData} from '@remix-run/react';
+import {useLoaderData, type V2_MetaFunction} from '@remix-run/react';
 import {getPaginationVariables} from '@shopify/hydrogen';
 
 import {SearchForm, SearchResults, NoSearchResults} from '~/components/Search';

package/dist/generator-templates/starter/package.json

@@ -15,8 +15,8 @@
   "dependencies": {
     "@remix-run/react": "1.19.1",
     "@shopify/cli": "3.48.0",
-    "@shopify/cli-hydrogen": "^5.1.2",
-    "@shopify/hydrogen": "^2023.7.2",
+    "@shopify/cli-hydrogen": "^5.2.0",
+    "@shopify/hydrogen": "^2023.7.3",
     "@shopify/remix-oxygen": "^1.1.3",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",

package/dist/generator-templates/starter/remix.config.js

@@ -17,6 +17,7 @@ module.exports = {
   serverPlatform: 'neutral',
   serverMinify: process.env.NODE_ENV === 'production',
   future: {
+    v2_dev: true,
     v2_meta: true,
     v2_headers: true,
     v2_errorBoundary: true,