@shopify/hydrogen 1.1.0 → 1.3.1

package/dist/esnext/foundation/ssr-interop.js

@@ -5,7 +5,7 @@
  * NOTE: Do not remove SSR-prefixed comments in this file.
  */
 import { useContext } from 'react';
-//@SSR import {useServerRequest} from './ServerRequestProvider';
+//@SSR import {useServerRequest} from './ServerRequestProvider/index.js';
 // This is replaced by Vite to import.meta.env.SSR
 export const META_ENV_SSR = false;
 const reactContextType = Symbol.for('react.context');
@@ -23,7 +23,7 @@ const reactContextType = Symbol.for('react.context');
  * The returned type depends on what the server getter returns.
  * @example
  * ```js
- * import {MyClientContext} from './my-client-react-context-provider';
+ * import {MyClientContext} from './my-client-react-context-provider.js';
  * useEnvContext(req => req.ctx.myServerContext, MyClientContext)
  * ```
  */

package/dist/esnext/foundation/useNavigate/useNavigate.js

@@ -1,5 +1,5 @@
-import { useRouter } from '../Router/BrowserRouter.client';
-import { useBasePath } from '../useRouteParams/RouteParamsProvider.client';
+import { useRouter } from '../Router/BrowserRouter.client.js';
+import { useBasePath } from '../useRouteParams/RouteParamsProvider.client.js';
 /**
  * The useNavigate hook imperatively navigates between routes.
  */

package/dist/esnext/foundation/useQuery/hooks.d.ts

@@ -1,4 +1,4 @@
-import type { CachingStrategy, PreloadOptions, QueryKey } from '../../types';
+import type { CachingStrategy, PreloadOptions, QueryKey } from '../../types.js';
 export interface HydrogenUseQueryOptions {
     /** The [caching strategy](https://shopify.dev/custom-storefronts/hydrogen/framework/cache#caching-strategies) to help you
      * determine which cache control header to set.
@@ -13,6 +13,9 @@ export interface HydrogenUseQueryOptions {
      */
     shouldCacheResponse?: (body: any) => boolean;
 }
+declare global {
+    var __HYDROGEN_CACHE_ID__: string;
+}
 /**
  * The `useQuery` hook executes an asynchronous operation like `fetch` in a way that
  * supports [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html). You can use this

package/dist/esnext/foundation/useQuery/hooks.js

@@ -1,7 +1,7 @@
-import { getLoggerWithContext, collectQueryCacheControlHeaders, collectQueryTimings, } from '../../utilities/log';
-import { deleteItemFromCache, generateSubRequestCacheControlHeader, getItemFromCache, isStale, setItemInCache, } from '../Cache/cache-sub-request';
-import { useRequestCacheData, useServerRequest } from '../ServerRequestProvider';
-import { CacheShort, NO_STORE } from '../Cache/strategies';
+import { getLoggerWithContext, collectQueryCacheControlHeaders, collectQueryTimings, } from '../../utilities/log/index.js';
+import { deleteItemFromCache, generateSubRequestCacheControlHeader, getItemFromCache, isStale, setItemInCache, } from '../Cache/cache-sub-request.js';
+import { useRequestCacheData, useServerRequest, } from '../ServerRequestProvider/index.js';
+import { CacheShort, NO_STORE } from '../Cache/strategies/index.js';
 /**
  * The `useQuery` hook executes an asynchronous operation like `fetch` in a way that
  * supports [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html). You can use this
@@ -19,7 +19,7 @@ queryFn,
 queryOptions) {
     const request = useServerRequest();
     const withCacheIdKey = [
-        '__QUERY_CACHE_ID__',
+        __HYDROGEN_CACHE_ID__,
         ...(typeof key === 'string' ? [key] : key),
     ];
     const fetcher = cachedQueryFnBuilder(withCacheIdKey, queryFn, queryOptions);

package/dist/esnext/foundation/useQuery/index.d.ts

@@ -1 +1 @@
-export { useQuery } from './hooks';
+export { useQuery, type HydrogenUseQueryOptions, shouldPreloadQuery, } from './hooks.js';

package/dist/esnext/foundation/useQuery/index.js

@@ -1 +1 @@
-export { useQuery } from './hooks';
+export { useQuery, shouldPreloadQuery, } from './hooks.js';

package/dist/esnext/foundation/useRequestContext/index.js

@@ -1,4 +1,4 @@
-import { META_ENV_SSR, useEnvContext } from '../ssr-interop';
+import { META_ENV_SSR, useEnvContext } from '../ssr-interop.js';
 /**
  * Provides access to the current request context.
  * @param scope - An optional string used to scope the request context. It is recommended to

package/dist/esnext/foundation/useRouteParams/useRouteParams.js

@@ -1,5 +1,5 @@
-import { useEnvContext } from '../ssr-interop';
-import { RouteParamsContext } from './RouteParamsProvider.client';
+import { useEnvContext } from '../ssr-interop.js';
+import { RouteParamsContext } from './RouteParamsProvider.client.js';
 /**
  *  The `useRouteParams` hook retrieves the parameters of an active route. The hook is available in both server and client components.
  */

package/dist/esnext/foundation/useServerProps/index.d.ts

@@ -1 +1 @@
-export { useServerProps } from './use-server-props';
+export { useServerProps } from './use-server-props.js';

package/dist/esnext/foundation/useServerProps/index.js

@@ -1 +1 @@
-export { useServerProps } from './use-server-props';
+export { useServerProps } from './use-server-props.js';

package/dist/esnext/foundation/useServerProps/use-server-props.d.ts

@@ -1,4 +1,4 @@
-import { ServerPropsContextValue, InternalServerPropsContextValue } from '../ServerPropsProvider/ServerPropsProvider';
+import { ServerPropsContextValue, InternalServerPropsContextValue } from '../ServerPropsProvider/ServerPropsProvider.js';
 /**
  * The `useServerProps` hook allows you to manage the [server props](https://shopify.dev/custom-storefronts/hydrogen/framework/server-props) passed to your server components when using Hydrogen as a React Server Component framework. The server props get cleared when you navigate from one route to another.
  *

package/dist/esnext/foundation/useServerProps/use-server-props.js

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { ServerPropsContext, } from '../ServerPropsProvider/ServerPropsProvider';
+import { ServerPropsContext, } from '../ServerPropsProvider/ServerPropsProvider.js';
 /**
  * The `useServerProps` hook allows you to manage the [server props](https://shopify.dev/custom-storefronts/hydrogen/framework/server-props) passed to your server components when using Hydrogen as a React Server Component framework. The server props get cleared when you navigate from one route to another.
  *

package/dist/esnext/foundation/useSession/useSession.d.ts

@@ -1,2 +1,3 @@
 /** The `useSession` hook reads session data in server components. */
 export declare const useSession: () => Record<string, string>;
+export declare const useFlashSession: (key: string) => string;

package/dist/esnext/foundation/useSession/useSession.js

@@ -1,7 +1,20 @@
-import { useServerRequest } from '../ServerRequestProvider';
+import { useServerRequest } from '../ServerRequestProvider/index.js';
 /** The `useSession` hook reads session data in server components. */
 export const useSession = function () {
     const request = useServerRequest();
     const session = request.ctx.session?.get() || {};
     return session;
 };
+export const useFlashSession = function (key) {
+    const request = useServerRequest();
+    const data = request.ctx.session?.get() || {};
+    let value = data[key];
+    if (value) {
+        delete data[key];
+        request.ctx.flashSession[key] = value;
+    }
+    request.ctx.session?.set(data);
+    value = request.ctx.flashSession[key];
+    delete request.ctx.flashSession[key];
+    return value;
+};

package/dist/esnext/foundation/useShop/index.d.ts

@@ -1 +1 @@
-export { useShop } from './use-shop';
+export { useShop } from './use-shop.js';

package/dist/esnext/foundation/useShop/index.js

@@ -1 +1 @@
-export { useShop } from './use-shop';
+export { useShop } from './use-shop.js';

package/dist/esnext/foundation/useShop/use-shop.d.ts

@@ -3,4 +3,4 @@
  * [the `shopify` property in the `hydrogen.config.js` file](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config).
  * The `useShop` hook must be a descendent of a `ShopifyProvider` component.
  */
-export declare function useShop(): import("../ShopifyProvider/types").ShopifyContextValue;
+export declare function useShop(): import("../ShopifyProvider/types.js").ShopifyContextValue;

package/dist/esnext/foundation/useShop/use-shop.js

@@ -1,5 +1,5 @@
-import { ShopifyContext } from '../ShopifyProvider';
-import { useEnvContext } from '../ssr-interop';
+import { ShopifyContext } from '../ShopifyProvider/index.js';
+import { useEnvContext } from '../ssr-interop.js';
 /**
  * The `useShop` hook provides access to values within
  * [the `shopify` property in the `hydrogen.config.js` file](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config).

package/dist/esnext/foundation/useUrl/index.d.ts

@@ -1 +1 @@
-export { useUrl } from './useUrl';
+export { useUrl } from './useUrl.js';

package/dist/esnext/foundation/useUrl/index.js

@@ -1 +1 @@
-export { useUrl } from './useUrl';
+export { useUrl } from './useUrl.js';

package/dist/esnext/foundation/useUrl/useUrl.js

@@ -1,8 +1,8 @@
 import { useContext, useMemo } from 'react';
-import { RSC_PATHNAME } from '../../constants';
-import { parseJSON } from '../../utilities/parse';
-import { RouterContext } from '../Router/BrowserRouter.client';
-import { useEnvContext, META_ENV_SSR } from '../ssr-interop';
+import { RSC_PATHNAME } from '../../constants.js';
+import { parseJSON } from '../../utilities/parse.js';
+import { RouterContext } from '../Router/BrowserRouter.client.js';
+import { useEnvContext, META_ENV_SSR } from '../ssr-interop.js';
 /**
  * The `useUrl` hook retrieves the current URL in a server or client component.
  */

package/dist/esnext/framework/load-config.js

@@ -1,6 +1,6 @@
 // Provide Hydrogen config loader to external tools like the CLI
-import { VIRTUAL_PROXY_HYDROGEN_CONFIG_ID } from './plugins/vite-plugin-hydrogen-virtual-files';
-import { viteception } from './viteception';
+import { VIRTUAL_PROXY_HYDROGEN_CONFIG_ID } from './plugins/vite-plugin-hydrogen-virtual-files.js';
+import { viteception } from './viteception.js';
 export async function loadConfig(options = { root: process.cwd() }) {
     const { loaded } = await viteception([VIRTUAL_PROXY_HYDROGEN_CONFIG_ID], options);
     return { configuration: loaded[0].default };

package/dist/esnext/framework/middleware.d.ts

@@ -1,4 +1,4 @@
-import type { ShopifyConfig } from '../shared-types';
+import type { ShopifyConfig } from '../shared-types.js';
 import type { IncomingMessage, NextFunction } from 'connect';
 import type { ServerResponse } from 'http';
 import type { ViteDevServer } from 'vite';

package/dist/esnext/framework/middleware.js

@@ -1,4 +1,4 @@
-import { graphiqlHtml } from './graphiql';
+import { graphiqlHtml } from './graphiql.js';
 export function graphiqlMiddleware({ getShopifyConfig, dev, }) {
     return async function (request, response, next) {
         if (dev && isGraphiqlRequest(request)) {
@@ -24,7 +24,7 @@ export function hydrogenMiddleware({ dev, cache, indexTemplate, getServerEntrypo
      * which is needed for proxy requests and server-side API requests.
      */
     const webPolyfills = !globalThis.fetch || !globalThis.ReadableStream
-        ? import('../utilities/web-api-polyfill')
+        ? import('../utilities/web-api-polyfill.js')
         : undefined;
     return async function (request, response, next) {
         try {

package/dist/esnext/framework/plugin.d.ts

@@ -1,4 +1,4 @@
-import type { HydrogenVitePluginOptions } from './types';
+import type { HydrogenVitePluginOptions } from './types.js';
 import type { Plugin } from 'vite';
 declare const hydrogenPlugin: {
     (pluginOptions?: HydrogenVitePluginOptions): Plugin[];

package/dist/esnext/framework/plugin.js

@@ -1,21 +1,22 @@
-import hydrogenConfig from './plugins/vite-plugin-hydrogen-config';
-import hydrogenMiddleware from './plugins/vite-plugin-hydrogen-middleware';
-import hydrogenClientMiddleware from './plugins/vite-plugin-hydrogen-client-middleware';
-import hydrogenVirtualFiles from './plugins/vite-plugin-hydrogen-virtual-files';
-import platformEntry from './plugins/vite-plugin-platform-entry';
-import rsc from './plugins/vite-plugin-hydrogen-rsc';
-import ssrInterop from './plugins/vite-plugin-ssr-interop';
-import purgeQueryCache from './plugins/vite-plugin-purge-query-cache';
-import hydrationAutoImport from './plugins/vite-plugin-hydration-auto-import';
+import hydrogenConfig from './plugins/vite-plugin-hydrogen-config.js';
+import hydrogenMiddleware from './plugins/vite-plugin-hydrogen-middleware.js';
+import hydrogenClientMiddleware from './plugins/vite-plugin-hydrogen-client-middleware.js';
+import hydrogenVirtualFiles from './plugins/vite-plugin-hydrogen-virtual-files.js';
+import platformEntry from './plugins/vite-plugin-platform-entry.js';
+import rsc from './plugins/vite-plugin-hydrogen-rsc.js';
+import ssrInterop from './plugins/vite-plugin-ssr-interop.js';
+import hydrationAutoImport from './plugins/vite-plugin-hydration-auto-import.js';
 import inspect from 'vite-plugin-inspect';
 import react from '@vitejs/plugin-react';
-import cssModulesRsc from './plugins/vite-plugin-css-modules-rsc';
-import clientImports from './plugins/vite-plugin-client-imports';
-import suppressWarnings from './plugins/vite-plugin-hydrogen-suppress-warnings';
+import cssRsc from './plugins/vite-plugin-css-rsc.js';
+import cssModulesRsc from './plugins/vite-plugin-css-modules-rsc.js';
+import clientImports from './plugins/vite-plugin-client-imports.js';
+import suppressWarnings from './plugins/vite-plugin-hydrogen-suppress-warnings.js';
+import assetsVersion from './plugins/vite-plugin-assets-version.js';
 const hydrogenPlugin = (pluginOptions = {}) => {
     return [
         process.env.VITE_INSPECT && inspect(),
-        hydrogenConfig(),
+        hydrogenConfig(pluginOptions),
         hydrogenClientMiddleware(),
         clientImports(),
         hydrogenMiddleware(pluginOptions),
@@ -23,11 +24,12 @@ const hydrogenPlugin = (pluginOptions = {}) => {
         react(),
         hydrationAutoImport(),
         ssrInterop(),
-        cssModulesRsc(),
+        pluginOptions.experimental?.css === 'global' ? cssRsc() : cssModulesRsc(),
         rsc(pluginOptions),
         platformEntry(),
         suppressWarnings(),
-        pluginOptions.purgeQueryCacheOnBuild && purgeQueryCache(),
+        pluginOptions.assetHashVersion &&
+            assetsVersion(pluginOptions.assetHashVersion),
     ];
 };
 export default hydrogenPlugin; // For ESM

package/dist/esnext/framework/plugins/vite-plugin-assets-version.d.ts

@@ -0,0 +1,2 @@
+import { Plugin } from 'vite';
+export default function assetsVersion(version?: string): Plugin;

package/dist/esnext/framework/plugins/vite-plugin-assets-version.js

@@ -0,0 +1,8 @@
+export default function assetsVersion(version) {
+    return {
+        name: 'hydrogen:augment-with-version',
+        augmentChunkHash() {
+            return version ?? '';
+        },
+    };
+}

package/dist/esnext/framework/plugins/vite-plugin-css-modules-rsc.js

@@ -1,4 +1,4 @@
-import { HYDROGEN_DEFAULT_SERVER_ENTRY } from './vite-plugin-hydrogen-middleware';
+import { HYDROGEN_DEFAULT_SERVER_ENTRY } from './vite-plugin-hydrogen-middleware.js';
 import MagicString from 'magic-string';
 import path from 'path';
 const cssModuleRE = /\.module\.(s?css|sass|less|stylus)/;

package/dist/esnext/framework/plugins/vite-plugin-css-rsc.d.ts

@@ -0,0 +1,2 @@
+import { Plugin } from 'vite';
+export default function cssRsc(): Plugin;

package/dist/esnext/framework/plugins/vite-plugin-css-rsc.js

@@ -0,0 +1,108 @@
+import path from 'path';
+import MagicString from 'magic-string';
+import { normalizePath } from 'vite';
+const VITE_CSS_CHUNK_NAME = 'style.css';
+const INJECT_STYLES_COMMENT = '<!--__INJECT_STYLES__-->';
+// Keep this in the outer scope to share it
+// across client <> server builds.
+let clientBuildPath;
+export default function cssRsc() {
+    let config;
+    return {
+        name: 'hydrogen:css-rsc',
+        enforce: 'post',
+        config() {
+            // Disable CSS code split to avoid preloading styles
+            // that are already included in index.html
+            return { build: { cssCodeSplit: false } };
+        },
+        configResolved(_config) {
+            config = _config;
+        },
+        transform(code, id, options) {
+            if (options?.ssr && id.includes('index.html?raw')) {
+                // Mark the client build index.html to inject styles later
+                const s = new MagicString(code);
+                s.replace('</head>', INJECT_STYLES_COMMENT + '</head>');
+                return {
+                    code: s.toString(),
+                    map: s.generateMap({ file: id, source: id }),
+                };
+            }
+        },
+        transformIndexHtml(html, { server }) {
+            // Add discovered styles during dev
+            if (server) {
+                const tags = [];
+                const foundCssFiles = new Set();
+                for (const [key, value] of server.moduleGraph.idToModuleMap.entries()) {
+                    if (
+                    // Note: Some CSS-in-JS libraries use `.css.js`
+                    // extension and we should match it here:
+                    /\.(css|sass|scss|stylus|less)(\.|\?|$)/.test(normalizePath(key).split('/').pop())) {
+                        let { url, file, lastHMRTimestamp, importers } = value;
+                        if (!foundCssFiles.has(file) &&
+                            !Array.from(importers).some((importer) => foundCssFiles.has(importer.file))) {
+                            foundCssFiles.add(file);
+                            // Vite is adding hash and timestamp to the CSS files downloaded
+                            // from client components. Adding the same query string params
+                            // here prevents this file from being downloaded twice.
+                            if (lastHMRTimestamp) {
+                                const timestampQuery = `?t=${lastHMRTimestamp}`;
+                                // The timestamp needs to be the first query string param.
+                                url = url.includes('?')
+                                    ? url.replace('?', timestampQuery + '&')
+                                    : url + timestampQuery;
+                            }
+                            tags.push(value.type === 'css'
+                                ? { tag: 'link', attrs: { rel: 'stylesheet', href: url } }
+                                : { tag: 'script', attrs: { type: 'module', src: url } });
+                        }
+                    }
+                }
+                return tags;
+            }
+        },
+        generateBundle(options, bundle, isWrite) {
+            if (config.build?.ssr) {
+                // -- Server build
+                if (!clientBuildPath) {
+                    // Default value
+                    clientBuildPath = normalizePath(path.resolve(config.root, config.build.outDir, '..', 'client'));
+                }
+                const relativeClientPath = normalizePath(path.relative(normalizePath(path.resolve(config.root, config.build.outDir)), clientBuildPath));
+                let cssAssetFileName = '';
+                const cssAsset = Object.values(bundle).find((file) => file.type === 'asset' && file.name === VITE_CSS_CHUNK_NAME);
+                const outputChunk = Object.values(bundle).find((file) => file.type === 'chunk' && file.isEntry);
+                if (cssAsset) {
+                    cssAssetFileName = cssAsset.fileName;
+                    // Move the CSS file to the client build assets
+                    cssAsset.fileName = normalizePath(path.join(relativeClientPath, cssAsset.fileName));
+                }
+                let assetPrefix = process.env.HYDROGEN_ASSET_BASE_URL || '/';
+                if (!assetPrefix.endsWith('/'))
+                    assetPrefix += '/';
+                // Add a reference to the CSS file in indexTemplate
+                outputChunk.code = outputChunk.code.replace(INJECT_STYLES_COMMENT, cssAssetFileName &&
+                    `<link rel="stylesheet" href="${assetPrefix + cssAssetFileName}">`);
+            }
+            else {
+                // -- Client build
+                // Save outDir from client build in the outer scope
+                // to read it during the server build. The CLI runs Vite in
+                // the same process so the scope is shared across builds.
+                clientBuildPath = normalizePath(path.resolve(config.root, config.build.outDir));
+                const indexHtml = bundle['index.html'];
+                const cssAsset = Object.values(bundle).find((file) => file.type === 'asset' && file.name === VITE_CSS_CHUNK_NAME);
+                if (cssAsset) {
+                    // The client build CSS is incomplete because it only includes
+                    // CSS imported in client components (server components are not
+                    // discovered in this build). Remove it from this build and
+                    // let it be added by the server build after this.
+                    delete bundle[cssAsset.fileName];
+                    indexHtml.source = indexHtml.source.replace(new RegExp(`\\s*<link[^<>]+${cssAsset.fileName.replace('.', '\\.')}.*?>`, ''), '');
+                }
+            }
+        },
+    };
+}

package/dist/esnext/framework/plugins/vite-plugin-hydrogen-config.d.ts

@@ -1,3 +1,4 @@
 import { Plugin } from 'vite';
-declare const _default: () => Plugin;
+import type { HydrogenVitePluginOptions } from '../types.js';
+declare const _default: (pluginOptions: HydrogenVitePluginOptions) => Plugin;
 export default _default;

package/dist/esnext/framework/plugins/vite-plugin-hydrogen-config.js

@@ -1,4 +1,5 @@
-export default () => {
+import Crypto from 'crypto';
+export default (pluginOptions) => {
     const rollupOptions = {
         output: {},
     };
@@ -23,7 +24,7 @@ export default () => {
         };
     }
     return {
-        name: 'vite-plugin-hydrogen-config',
+        name: 'hydrogen:config',
         config: async (config, env) => ({
             resolve: {
                 alias: {
@@ -48,7 +49,7 @@ export default () => {
                  * Tell Vite to bundle everything when we're building for Workers.
                  * Otherwise, bundle RSC plugin as a workaround to apply the vendor alias above.
                  */
-                noExternal: isWorker || [/react-server-dom-vite/],
+                noExternal: isWorker || [/react-server-dom-vite/, /@shopify\/hydrogen/],
                 target: isWorker ? 'webworker' : 'node',
             },
             // Reload when updating local Hydrogen lib
@@ -93,7 +94,10 @@ export default () => {
             define: {
                 __HYDROGEN_DEV__: env.mode !== 'production',
                 __HYDROGEN_WORKER__: isWorker,
-                __HYDROGEN_TEST__: false, // Used in unit tests
+                __HYDROGEN_TEST__: false,
+                __HYDROGEN_CACHE_ID__: pluginOptions.purgeQueryCacheOnBuild
+                    ? `"${Crypto.randomBytes(8).toString('hex').slice(0, 8)}"`
+                    : '"__QUERY_CACHE_ID__"',
             },
             envPrefix: ['VITE_', 'PUBLIC_'],
             base: process.env.HYDROGEN_ASSET_BASE_URL,

package/dist/esnext/framework/plugins/vite-plugin-hydrogen-middleware.d.ts

@@ -1,5 +1,5 @@
 import { Plugin } from 'vite';
-import type { HydrogenVitePluginOptions } from '../types';
+import type { HydrogenVitePluginOptions } from '../types.js';
 export declare const HYDROGEN_DEFAULT_SERVER_ENTRY: string;
 declare const _default: (pluginOptions: HydrogenVitePluginOptions) => Plugin;
 export default _default;

package/dist/esnext/framework/plugins/vite-plugin-hydrogen-middleware.js

@@ -2,9 +2,9 @@ import { loadEnv } from 'vite';
 import bodyParser from 'body-parser';
 import path from 'path';
 import { promises as fs } from 'fs';
-import { hydrogenMiddleware, graphiqlMiddleware } from '../middleware';
-import { InMemoryCache } from '../cache/in-memory';
-import { VIRTUAL_PROXY_HYDROGEN_CONFIG_ID } from './vite-plugin-hydrogen-virtual-files';
+import { hydrogenMiddleware, graphiqlMiddleware } from '../middleware.js';
+import { InMemoryCache } from '../cache/in-memory.js';
+import { VIRTUAL_PROXY_HYDROGEN_CONFIG_ID } from './vite-plugin-hydrogen-virtual-files.js';
 export const HYDROGEN_DEFAULT_SERVER_ENTRY = process.env.HYDROGEN_SERVER_ENTRY || '/src/App.server';
 export default (pluginOptions) => {
     return {

package/dist/esnext/framework/plugins/vite-plugin-hydrogen-rsc.d.ts

@@ -1,2 +1,2 @@
-import { HydrogenVitePluginOptions } from '../types';
+import { HydrogenVitePluginOptions } from '../types.js';
 export default function (options?: HydrogenVitePluginOptions): any;

package/dist/esnext/framework/plugins/vite-plugin-hydrogen-rsc.js

@@ -1,7 +1,7 @@
 // @ts-ignore
 import reactServerDomVite from '@shopify/hydrogen/vendor/react-server-dom-vite/plugin.js';
-import { HYDROGEN_DEFAULT_SERVER_ENTRY } from './vite-plugin-hydrogen-middleware';
-import { VIRTUAL_PROXY_HYDROGEN_ROUTES_ID } from './vite-plugin-hydrogen-virtual-files';
+import { HYDROGEN_DEFAULT_SERVER_ENTRY } from './vite-plugin-hydrogen-middleware.js';
+import { VIRTUAL_PROXY_HYDROGEN_ROUTES_ID } from './vite-plugin-hydrogen-virtual-files.js';
 export default function (options) {
     return reactServerDomVite({
         serverBuildEntries: [

package/dist/esnext/framework/plugins/vite-plugin-hydrogen-virtual-files.d.ts

@@ -1,5 +1,5 @@
 import { Plugin } from 'vite';
-import type { HydrogenVitePluginOptions } from '../types';
+import type { HydrogenVitePluginOptions } from '../types.js';
 export declare const HYDROGEN_DEFAULT_SERVER_ENTRY: string;
 export declare const VIRTUAL_PROXY_HYDROGEN_CONFIG_ID: string;
 export declare const VIRTUAL_PROXY_HYDROGEN_ROUTES_ID: string;

package/dist/esnext/framework/plugins/vite-plugin-hydrogen-virtual-files.js

@@ -1,11 +1,14 @@
 import { normalizePath } from 'vite';
 import path from 'path';
 import { promises as fs } from 'fs';
-import { viteception } from '../viteception';
+import { viteception } from '../viteception.js';
+import MagicString from 'magic-string';
 export const HYDROGEN_DEFAULT_SERVER_ENTRY = process.env.HYDROGEN_SERVER_ENTRY || '/src/App.server';
 // The character ":" breaks Vite with Node >= 16.15. Use "_" instead
 const VIRTUAL_PREFIX = 'virtual__';
 const PROXY_PREFIX = 'proxy__';
+const ERROR_FILE = 'error.jsx';
+const VIRTUAL_ERROR_FILE = VIRTUAL_PREFIX + ERROR_FILE;
 const HYDROGEN_CONFIG_ID = 'hydrogen.config.ts';
 const VIRTUAL_HYDROGEN_CONFIG_ID = VIRTUAL_PREFIX + HYDROGEN_CONFIG_ID;
 export const VIRTUAL_PROXY_HYDROGEN_CONFIG_ID = VIRTUAL_PREFIX + PROXY_PREFIX + HYDROGEN_CONFIG_ID;
@@ -15,6 +18,7 @@ export const VIRTUAL_PROXY_HYDROGEN_ROUTES_ID = VIRTUAL_PREFIX + PROXY_PREFIX +
 export default (pluginOptions) => {
     let config;
     let server;
+    let resolvedConfigPath;
     return {
         name: 'hydrogen:virtual-files',
         configResolved(_config) {
@@ -25,15 +29,18 @@ export default (pluginOptions) => {
         },
         resolveId(source, importer) {
             if (source === VIRTUAL_HYDROGEN_CONFIG_ID) {
-                return findHydrogenConfigPath(config.root, pluginOptions.configPath).then((hcPath) => 
-                // This direct dependency on a real file
-                // makes HMR work for the virtual module.
-                this.resolve(hcPath, importer, { skipSelf: true }));
+                return findHydrogenConfigPath(config.root, pluginOptions.configPath).then((hcPath) => {
+                    resolvedConfigPath = normalizePath(hcPath);
+                    // This direct dependency on a real file
+                    // makes HMR work for the virtual module.
+                    return this.resolve(hcPath, importer, { skipSelf: true });
+                });
             }
             if ([
                 VIRTUAL_PROXY_HYDROGEN_CONFIG_ID,
                 VIRTUAL_PROXY_HYDROGEN_ROUTES_ID,
                 VIRTUAL_HYDROGEN_ROUTES_ID,
+                VIRTUAL_ERROR_FILE,
             ].includes(source)) {
                 // Virtual modules convention
                 // https://vitejs.dev/guide/api-plugin.html#virtual-modules-convention
@@ -44,7 +51,7 @@ export default (pluginOptions) => {
             // Likely due to a bug in Vite, but virtual modules cannot be loaded
             // directly using ssrLoadModule from a Vite plugin. It needs to be proxied as follows:
             if (id === '\0' + VIRTUAL_PROXY_HYDROGEN_CONFIG_ID) {
-                return `import hc from '${VIRTUAL_HYDROGEN_CONFIG_ID}'; export default hc;`;
+                return `import hc from '${VIRTUAL_HYDROGEN_CONFIG_ID}'; export default typeof hc === 'function' ? hc() : hc;`;
             }
             if (id === '\0' + VIRTUAL_PROXY_HYDROGEN_ROUTES_ID) {
                 return `import hr from '${VIRTUAL_HYDROGEN_ROUTES_ID}'; export default hr;`;
@@ -71,6 +78,25 @@ export default (pluginOptions) => {
                     return { code };
                 });
             }
+            if (id === '\0' + VIRTUAL_ERROR_FILE) {
+                return importHydrogenConfig().then((hc) => {
+                    const errorPath = hc.serverErrorPage ?? '/src/Error.{jsx,tsx}';
+                    const code = `const errorPage = import.meta.glob("${errorPath}");\n export default Object.values(errorPage)[0];`;
+                    return { code };
+                });
+            }
+        },
+        transform(code, id) {
+            if (id === resolvedConfigPath) {
+                const s = new MagicString(code);
+                // Wrap in function to avoid evaluating `Oxygen.env`
+                // in the config until we have polyfilled it properly.
+                s.replace(/export\s+default\s+(\w+)\s*\(/g, (all, m1) => all.replace(m1, `() => ${m1}`));
+                return {
+                    code: s.toString(),
+                    map: s.generateMap({ file: id, source: id }),
+                };
+            }
         },
     };
     async function importHydrogenConfig() {
@@ -78,7 +104,9 @@ export default (pluginOptions) => {
             const loaded = await server.ssrLoadModule(VIRTUAL_PROXY_HYDROGEN_CONFIG_ID);
             return loaded.default;
         }
-        const { loaded } = await viteception([VIRTUAL_PROXY_HYDROGEN_CONFIG_ID]);
+        const { loaded } = await viteception([VIRTUAL_PROXY_HYDROGEN_CONFIG_ID], {
+            root: config.root,
+        });
         return loaded[0].default;
     }
 };

package/dist/esnext/framework/plugins/vite-plugin-platform-entry.js

@@ -1,5 +1,5 @@
 import { normalizePath } from 'vite';
-import { HYDROGEN_DEFAULT_SERVER_ENTRY } from './vite-plugin-hydrogen-middleware';
+import { HYDROGEN_DEFAULT_SERVER_ENTRY } from './vite-plugin-hydrogen-middleware.js';
 import MagicString from 'magic-string';
 import path from 'path';
 import fs from 'fs';