Staging

.eslintrc.cjs

@@ -0,0 +1,18 @@
+/**
+ * @type {import("@types/eslint").Linter.BaseConfig}
+ */
+module.exports = {
+  extends: [
+    '@remix-run/eslint-config',
+    'plugin:hydrogen/recommended',
+    'plugin:hydrogen/typescript',
+  ],
+  rules: {
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/naming-convention': 'off',
+    'hydrogen/prefer-image-component': 'off',
+    'no-useless-escape': 'off',
+    '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
+    'no-case-declarations': 'off',
+  },
+};

app/components/Footer.tsx

@@ -79,9 +79,12 @@ const MenuSection = ({
 export function Footer(fetchdata: any) {
   const footerMetaObject = fetchdata?.footerMetaObject;
   const footerData = footerMetaObject?.metaobjects?.nodes?.[0]?.fields;
-  const sortedFooterData = footerData.sort((a: any, b: any) => {
-    return MENU_ORDER.indexOf(a.key) - MENU_ORDER.indexOf(b.key);
-  });
+  const sortedFooterData = Array.isArray(footerData)
+    ? [...footerData].sort(
+        (a: any, b: any) =>
+          MENU_ORDER.indexOf(a.key) - MENU_ORDER.indexOf(b.key),
+      )
+    : [];
 
   return (
     <footer className="footer-wrapper">

app/components/Header.tsx

@@ -39,7 +39,7 @@ export function HeaderMenu({
   primaryDomainUrl: HeaderQuery['shop']['primaryDomain']['url'];
   viewport: Viewport;
 }) {
-  const {publicStoreDomain} = useRootLoaderData();
+  const publicStoreDomain = useRootLoaderData()?.publicStoreDomain ?? '';
   const className = `header-menu-${viewport}`;
 
   function closeAside(event: React.MouseEvent<HTMLAnchorElement>) {
@@ -65,13 +65,24 @@ export function HeaderMenu({
       {(menu || FALLBACK_HEADER_MENU).items.map((item) => {
         if (!item.url) return null;
 
-        // if the url is internal, we strip the domain
-        const url =
+        const isStoreHost =
           item.url.includes('myshopify.com') ||
-          item.url.includes(publicStoreDomain) ||
-          item.url.includes(primaryDomainUrl)
-            ? new URL(item.url).pathname
-            : item.url;
+          (publicStoreDomain !== '' && item.url.includes(publicStoreDomain)) ||
+          (primaryDomainUrl !== '' && item.url.includes(primaryDomainUrl));
+
+        // Relative menu paths (e.g. /collections) are already fine for <NavLink to>.
+        // new URL(relative) throws without a base; only parse absolute store URLs.
+        let url = item.url;
+        if (
+          isStoreHost &&
+          (item.url.startsWith('http://') || item.url.startsWith('https://'))
+        ) {
+          try {
+            url = new URL(item.url).pathname;
+          } catch {
+            /* keep original */
+          }
+        }
         return (
           <NavLink
             className="header-menu-item"

app/components/Layout.tsx

@@ -20,8 +20,9 @@ export type LayoutProps = {
   footer: Promise<FooterQuery>;
   header: HeaderQuery;
   isLoggedIn: boolean;
-  fetchData: any;
-  footerMetaObject: any;
+  /** Passed through on error boundaries; unused by layout chrome. */
+  fetchData?: unknown;
+  footerMetaObject?: unknown;
 };
 
 export function Layout({

app/entry.server.tsx

@@ -1,11 +1,9 @@
 import type {EntryContext} from '@shopify/remix-oxygen';
 import {RemixServer} from '@remix-run/react';
 import {isbot} from 'isbot';
-import ReactDOMServer from 'react-dom/server'; // default import for CJS
+import {renderToReadableStream} from 'react-dom/server.browser';
 import {createContentSecurityPolicy} from '@shopify/hydrogen';
 
-const {renderToReadableStream} = ReactDOMServer; // destructure from default
-
 export default async function handleRequest(
   request: Request,
   responseStatusCode: number,

app/root.tsx

@@ -1,22 +1,24 @@
 import {useNonce} from '@shopify/hydrogen';
-import {
-  defer,
-  type SerializeFrom,
-  type LoaderFunctionArgs,
-} from '@shopify/remix-oxygen';
+import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {
   Links,
   Meta,
   Outlet,
   Scripts,
-  useMatches,
+  useRouteLoaderData,
   useRouteError,
   useLoaderData,
   ScrollRestoration,
   isRouteErrorResponse,
   type ShouldRevalidateFunction,
 } from '@remix-run/react';
 import type {CustomerAccessToken} from '@shopify/hydrogen/storefront-api-types';
+import type {
+  CartApiQueryFragment,
+  FooterQuery,
+  HeaderQuery,
+  RootMetaObjectQuery,
+} from 'storefrontapi.generated';
 import favicon from '../public/favicon.svg';
 import './styles/reset.css';
 import './styles/app.css';
@@ -61,9 +63,29 @@ export function links() {
 }
 
 
+/**
+ * Remix `SerializeFrom` loses top-level keys on `defer()` payloads; this matches runtime loader data.
+ */
+export type RootLoaderClientData = {
+  cart: Promise<CartApiQueryFragment | null>;
+  footer: Promise<FooterQuery>;
+  header: HeaderQuery;
+  isLoggedIn: boolean;
+  publicStoreDomain: string;
+  footerMetaObject: RootMetaObjectQuery;
+};
+
+const FALLBACK_HEADER: HeaderQuery = {
+  shop: {
+    id: 'gid://shopify/Shop/0',
+    name: '',
+    description: '',
+    primaryDomain: {url: ''},
+  },
+};
+
 export const useRootLoaderData = () => {
-  const [root] = useMatches();
-  return root?.data as SerializeFrom<typeof loader>;
+  return useRouteLoaderData('root') as unknown as RootLoaderClientData | undefined;
 };
 
 export async function loader({context}: LoaderFunctionArgs) {
@@ -112,7 +134,7 @@ export async function loader({context}: LoaderFunctionArgs) {
 
 export default function App() {
   const nonce = useNonce();
-  const data = useLoaderData<typeof loader>();
+  const data = useLoaderData<typeof loader>() as unknown as RootLoaderClientData;
   return (
     <html lang="en">
       <head>
@@ -122,7 +144,13 @@ export default function App() {
         <Links />
       </head>
       <body>
-        <Layout footerMetaObject={data?.footerMetaObject} {...data}>
+        <Layout
+          cart={data.cart}
+          footer={data.footer}
+          header={data.header}
+          isLoggedIn={data.isLoggedIn}
+          footerMetaObject={data.footerMetaObject}
+        >
           <Outlet />
         </Layout>
         <ScrollRestoration nonce={nonce} />
@@ -155,7 +183,14 @@ export function ErrorBoundary() {
         <Links />
       </head>
       <body>
-        <Layout {...rootData}>
+        <Layout
+          fetchData={rootData}
+          cart={rootData?.cart ?? Promise.resolve(null)}
+          footer={rootData?.footer ?? Promise.resolve({} as FooterQuery)}
+          header={rootData?.header ?? FALLBACK_HEADER}
+          isLoggedIn={rootData?.isLoggedIn ?? false}
+          footerMetaObject={rootData?.footerMetaObject}
+        >
           <div className="route-error">
             <h1>Oops</h1>
             <h2>{errorStatus}</h2>

env.d.ts

@@ -0,0 +1,21 @@
+import type {
+  HydrogenCart,
+  HydrogenEnv,
+  HydrogenSession,
+  Storefront,
+} from '@shopify/hydrogen';
+
+declare global {
+  /** Worker / Oxygen bindings; matches `hydrogen env pull` shape. */
+  interface Env extends HydrogenEnv {}
+}
+
+declare module '@remix-run/server-runtime' {
+  interface AppLoadContext {
+    cart: HydrogenCart;
+    env: HydrogenEnv;
+    session: HydrogenSession;
+    storefront: Storefront;
+    waitUntil?: (promise: Promise<unknown>) => void;
+  }
+}