@shopify/hydrogen 0.12.0 → 0.13.0

package/dist/esnext/foundation/Router/{Router.js → BrowserRouter.client.js}

@@ -2,17 +2,19 @@ import { createBrowserHistory } from 'history';
 import React, { createContext, useContext, useMemo, useState, useEffect, } from 'react';
 import { META_ENV_SSR } from '../ssr-interop';
 import { useServerState } from '../useServerState';
-const RouterContext = createContext({});
+export const RouterContext = createContext({});
 let currentPath = '';
-export const Router = ({ history: pHistory, children, }) => {
+let isFirstLoad = true;
+export const BrowserRouter = ({ history: pHistory, children, }) => {
+    if (META_ENV_SSR)
+        return React.createElement(React.Fragment, null, children);
     const history = useMemo(() => pHistory || createBrowserHistory(), [pHistory]);
-    const [firstLoad, setFirstLoad] = useState(true);
     const [location, setLocation] = useState(history.location);
     const { pending, serverState, setServerState } = useServerState();
     useEffect(() => {
         // The app has just loaded
-        if (firstLoad)
-            setFirstLoad(false);
+        if (isFirstLoad)
+            isFirstLoad = false;
         // A navigation event has just happened
         else if (!pending && currentPath !== serverState.pathname) {
             window.scrollTo(0, 0);

package/dist/esnext/foundation/Router/Router.server.d.ts

@@ -1,8 +1,10 @@
 import { ReactElement } from 'react';
 declare type RouterProps = {
+    /** Any React elements. */
     children: Array<ReactElement> | ReactElement;
-    serverProps: Record<string, any>;
-    fallback: ReactElement;
 };
-export declare function Router({ children, fallback, serverProps, }: RouterProps): ReactElement | null;
+/**
+ * The `Router` component provides the context for routing in your Hydrogen app.
+ */
+export declare function Router({ children }: RouterProps): ReactElement;
 export {};

package/dist/esnext/foundation/Router/Router.server.js

@@ -1,23 +1,8 @@
-import React, { Children } from 'react';
-import { useServerRequest } from '../ServerRequestProvider';
-import { FileRoutes } from './FileRoutes';
-import { Boomerang } from '../Boomerang/Boomerang.client';
-export function Router({ children, fallback, serverProps, }) {
-    const request = useServerRequest();
-    const currentPath = new URL(request.url).pathname;
-    return recurseChildren(request, serverProps, fallback, currentPath, children);
-}
-function recurseChildren(request, serverProps, fallback, currentPath, children) {
-    for (const child of Children.toArray(children)) {
-        if (child.type === FileRoutes) {
-            const fileRoutingResult = child.type({ ...child.props, serverProps });
-            if (fileRoutingResult)
-                return (React.createElement(React.Fragment, null,
-                    fileRoutingResult,
-                    React.createElement(Boomerang, { pageTemplate: fileRoutingResult.type.name })));
-        }
-    }
-    return (React.createElement(React.Fragment, null,
-        fallback,
-        React.createElement(Boomerang, { pageTemplate: 'fallback' })));
+import React from 'react';
+import { BrowserRouter } from './BrowserRouter.client';
+/**
+ * The `Router` component provides the context for routing in your Hydrogen app.
+ */
+export function Router({ children }) {
+    return React.createElement(BrowserRouter, null, children);
 }

package/dist/esnext/foundation/ServerRequestProvider/ServerRequestProvider.js

@@ -25,16 +25,16 @@ export function ServerRequestProvider({ isRSC, request, children, }) {
 export function useServerRequest() {
     let request;
     try {
-        // Context only works in SSR rendering
-        request = useContext(RequestContextSSR);
-    }
-    catch (error) {
-        // If normal context failed it means this is not an SSR request.
-        // Try getting RSC cache instead:
+        // This cache only works during RSC rendering:
         // @ts-ignore
         const cache = React.unstable_getCacheForType(requestCacheRSC);
         request = cache ? cache.get(requestCacheRSC.key) : null;
     }
+    catch (error) {
+        // If RSC cache failed it means this is not an RSC request.
+        // Try getting SSR context instead:
+        request = useContext(RequestContextSSR);
+    }
     if (!request) {
         // @ts-ignore
         if (__DEV__ && typeof jest !== 'undefined') {
@@ -55,19 +55,19 @@ export function useRequestCacheData(key, fetcher) {
     const cache = request.ctx.cache;
     const cacheKey = hashKey(key);
     if (!cache.has(cacheKey)) {
-        let data;
+        let result;
         let promise;
         cache.set(cacheKey, () => {
-            if (data !== undefined) {
+            if (result !== undefined) {
                 collectQueryTimings(request, key, 'rendered');
-                return data;
+                return result;
             }
             if (!promise) {
                 const startApiTime = getTime();
-                promise = fetcher().then((r) => {
-                    data = { data: r };
+                promise = fetcher().then((data) => {
+                    result = { data };
                     collectQueryTimings(request, key, 'resolved', getTime() - startApiTime);
-                }, (e) => (data = { error: e }));
+                }, (error) => (result = { error }));
             }
             throw promise;
         });
@@ -84,25 +84,20 @@ export function preloadRequestCacheData(request, preloadQueries) {
     preloadQueries === null || preloadQueries === void 0 ? void 0 : preloadQueries.forEach((preloadQuery, cacheKey) => {
         collectQueryTimings(request, preloadQuery.key, 'preload');
         if (!cache.has(cacheKey)) {
-            let data;
+            let result;
             let promise;
             cache.set(cacheKey, () => {
-                if (data !== undefined) {
+                if (result !== undefined) {
                     collectQueryTimings(request, preloadQuery.key, 'rendered');
-                    return data;
+                    return result;
                 }
                 if (!promise) {
                     const startApiTime = getTime();
-                    promise = preloadQuery.fetcher().then((r) => {
-                        data = { data: r };
+                    promise = preloadQuery.fetcher().then((data) => {
+                        result = { data };
                         collectQueryTimings(request, preloadQuery.key, 'resolved', getTime() - startApiTime);
-                    }, (e) => {
-                        // The preload query failed for some reason:
-                        // On Cloudfare, this happens when a Cache item has expired at max-age
-                        //
-                        // We need to remove this entry from cache so that render cycle will retry on its own
-                        cache.delete(cacheKey);
-                        collectQueryTimings(request, preloadQuery.key, 'expired', getTime() - startApiTime);
+                    }, (error) => {
+                        result = { error };
                     });
                 }
                 return promise;

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

@@ -1,2 +1 @@
-export { ShopifyProvider } from './ShopifyProvider.server';
 export { ShopifyContext } from './ShopifyProvider.client';

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

@@ -1,2 +1 @@
-export { ShopifyProvider } from './ShopifyProvider.server';
 export { ShopifyContext } from './ShopifyProvider.client';

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

@@ -1,4 +1,3 @@
 export * from './ServerStateProvider';
 export { useShop } from './useShop';
-export { ShopifyProvider } from './ShopifyProvider';
 export { useUrl } from './useUrl';

package/dist/esnext/foundation/index.js

@@ -1,4 +1,3 @@
 export * from './ServerStateProvider';
 export { useShop } from './useShop';
-export { ShopifyProvider } from './ShopifyProvider';
 export { useUrl } from './useUrl';

package/dist/esnext/{hooks → foundation}/useNavigate/useNavigate.d.ts

@@ -1,10 +1,13 @@
 declare type NavigationOptions = {
-    /** Whether to update the state object or URL of the current history entry. Default to false */
+    /** Whether to update the state object or URL of the current history entry. Defaults to false. */
     replace?: boolean;
-    /** Whether to reload the whole document on navigation */
+    /** Whether to reload the whole document on navigation. */
     reloadDocument?: boolean;
-    /** The custom client state with the navigation */
+    /** The custom client state with the navigation. */
     clientState?: any;
 };
+/**
+ * The useNavigate hook imperatively navigates between routes.
+ */
 export declare function useNavigate(): (path: string, options?: NavigationOptions) => void;
 export {};

package/dist/esnext/{hooks → foundation}/useNavigate/useNavigate.js

@@ -1,4 +1,7 @@
-import { useRouter } from '../../foundation/Router/Router';
+import { useRouter } from '../Router/BrowserRouter.client';
+/**
+ * The useNavigate hook imperatively navigates between routes.
+ */
 export function useNavigate() {
     const router = useRouter();
     return (path, options = { replace: false, reloadDocument: false }) => {

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

@@ -14,7 +14,7 @@ export interface HydrogenUseQueryOptions {
  * The `useQuery` hook executes an asynchronous operation like `fetch` in a way that
  * supports [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html). It's based
  * on [react-query](https://react-query.tanstack.com/reference/useQuery). You can use this
- * hook to call any third-party APIs.
+ * hook to call any third-party APIs from a server component.
  */
 export declare function useQuery<T>(
 /** A string or array to uniquely identify the current query. */
@@ -24,9 +24,7 @@ queryFn: () => Promise<T>,
 /** The options to manage the cache behavior of the sub-request. */
 queryOptions?: HydrogenUseQueryOptions): {
     data?: undefined;
-    error: Response; /**
-     * Attempt to read the query from cache. If it doesn't exist or if it's stale, regenerate it.
-     */
+    error: Response;
 } | {
     data: T;
     error?: undefined;

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

@@ -6,7 +6,7 @@ import { useRequestCacheData, useServerRequest } from '../ServerRequestProvider'
  * The `useQuery` hook executes an asynchronous operation like `fetch` in a way that
  * supports [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html). It's based
  * on [react-query](https://react-query.tanstack.com/reference/useQuery). You can use this
- * hook to call any third-party APIs.
+ * hook to call any third-party APIs from a server component.
  */
 export function useQuery(
 /** A string or array to uniquely identify the current query. */
@@ -16,7 +16,10 @@ queryFn,
 /** The options to manage the cache behavior of the sub-request. */
 queryOptions) {
     const request = useServerRequest();
-    const withCacheIdKey = ['__QUERY_CACHE_ID__', ...key];
+    const withCacheIdKey = [
+        '__QUERY_CACHE_ID__',
+        ...(typeof key === 'string' ? [key] : key),
+    ];
     const fetcher = cachedQueryFnBuilder(withCacheIdKey, queryFn, queryOptions);
     collectQueryTimings(request, withCacheIdKey, 'requested');
     if (queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.preload) {

package/dist/esnext/foundation/useRouteParams/RouteParamsProvider.client.d.ts

@@ -0,0 +1,9 @@
+import React, { FC } from 'react';
+declare type RouteParamsContextValue = {
+    routeParams: Record<string, string>;
+};
+export declare const RouteParamsContext: React.Context<RouteParamsContextValue>;
+export declare const RouteParamsProvider: FC<{
+    routeParams: Record<string, string>;
+}>;
+export {};

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

@@ -0,0 +1,7 @@
+import React, { createContext } from 'react';
+export const RouteParamsContext = createContext({
+    routeParams: {},
+});
+export const RouteParamsProvider = ({ children, routeParams, }) => {
+    return (React.createElement(RouteParamsContext.Provider, { value: { routeParams } }, children));
+};

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

@@ -0,0 +1,4 @@
+/**
+ *  The `useRouteParams` hook retrieves the parameters of an active route. The hook is available in both server and client components.
+ */
+export declare function useRouteParams(): Record<string, string>;

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

@@ -0,0 +1,9 @@
+import { useEnvContext } from '../ssr-interop';
+import { RouteParamsContext } from './RouteParamsProvider.client';
+/**
+ *  The `useRouteParams` hook retrieves the parameters of an active route. The hook is available in both server and client components.
+ */
+export function useRouteParams() {
+    const router = useEnvContext((req) => req.ctx.router, RouteParamsContext);
+    return router.routeParams;
+}

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

@@ -9,7 +9,7 @@ export function useUrl() {
         const serverUrl = new URL(useEnvContext((req) => req.url));
         if (serverUrl.pathname === RSC_PATHNAME) {
             const state = JSON.parse(serverUrl.searchParams.get('state') || '{}');
-            const parsedUrl = `${serverUrl.origin}/${(_a = state.pathname) !== null && _a !== void 0 ? _a : ''}${(_b = state.search) !== null && _b !== void 0 ? _b : ''}`;
+            const parsedUrl = `${serverUrl.origin}${(_a = state.pathname) !== null && _a !== void 0 ? _a : ''}${(_b = state.search) !== null && _b !== void 0 ? _b : ''}`;
             return new URL(parsedUrl);
         }
         return new URL(serverUrl);

package/dist/esnext/framework/Hydration/ServerComponentRequest.server.d.ts

@@ -10,6 +10,11 @@ export declare type PreloadQueryEntry = {
 };
 export declare type PreloadQueriesByURL = Map<string, PreloadQueryEntry>;
 export declare type AllPreloadQueries = Map<string, PreloadQueriesByURL>;
+export declare type RouterContextData = {
+    routeRendered: boolean;
+    serverProps: Record<string, any>;
+    routeParams: Record<string, string>;
+};
 /**
  * This augments the `Request` object from the Fetch API:
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Request
@@ -29,6 +34,7 @@ export declare class ServerComponentRequest extends Request {
         queryCacheControl: Array<QueryCacheControlHeaders>;
         queryTimings: Array<QueryTiming>;
         preloadQueries: PreloadQueriesByURL;
+        router: RouterContextData;
         [key: string]: any;
     };
     constructor(input: any);

package/dist/esnext/framework/Hydration/ServerComponentRequest.server.js

@@ -38,6 +38,11 @@ export class ServerComponentRequest extends Request {
         this.ctx = {
             cache: new Map(),
             head: new HeadData({}),
+            router: {
+                routeRendered: false,
+                serverProps: {},
+                routeParams: {},
+            },
             queryCacheControl: [],
             queryTimings: [],
             preloadQueries: new Map(),

package/dist/esnext/framework/Hydration/ServerComponentResponse.server.d.ts

@@ -1,4 +1,5 @@
 import type { CachingStrategy } from '../../types';
+import React from 'react';
 export declare class ServerComponentResponse extends Response {
     private wait;
     private cacheOptions?;
@@ -23,7 +24,9 @@ export declare class ServerComponentResponse extends Response {
         statusText?: string;
         headers?: Record<string, any>;
     }): void;
-    redirect(location: string, status?: number): void;
+    redirect(location: string, status?: number): React.FunctionComponentElement<{
+        to: string;
+    }>;
     /**
      * Send the response from a Server Component. Renders React components to string,
      * and returns `null` to make React happy.

package/dist/esnext/framework/Hydration/ServerComponentResponse.server.js

@@ -1,5 +1,7 @@
 import { renderToString } from 'react-dom/server';
 import { CacheSeconds, generateCacheControlHeader } from '../CachingStrategy';
+import Redirect from '../../foundation/Redirect/Redirect.client';
+import React from 'react';
 export class ServerComponentResponse extends Response {
     constructor() {
         super(...arguments);
@@ -36,7 +38,10 @@ export class ServerComponentResponse extends Response {
         }
     }
     redirect(location, status = 307) {
+        // writeHead is used for SSR, so that the server responds with a redirect
         this.writeHead({ status, headers: { location } });
+        // in the case of an RSC request, instead render a client component that will redirect
+        return React.createElement(Redirect, { to: location });
     }
     /**
      * Send the response from a Server Component. Renders React components to string,

package/dist/esnext/framework/middleware.js

@@ -8,11 +8,17 @@ export function graphiqlMiddleware({ shopifyConfig, dev, }) {
         next();
     };
 }
+let entrypointError = null;
 /**
  * Provides middleware to Node.js Express-like servers. Used by the Hydrogen
  * Vite dev server plugin as well as production Node.js implementation.
  */
 export function hydrogenMiddleware({ dev, cache, indexTemplate, getServerEntrypoint, devServer, }) {
+    if (dev && devServer) {
+        // Store this globally for devtools
+        // @ts-ignore
+        globalThis.__viteDevServer = devServer;
+    }
     /**
      * We're running in the Node.js runtime without access to `fetch`,
      * which is needed for proxy requests and server-side API requests.
@@ -24,8 +30,25 @@ export function hydrogenMiddleware({ dev, cache, indexTemplate, getServerEntrypo
         var _a, _b, _c;
         try {
             await webPolyfills;
-            const entrypoint = await getServerEntrypoint();
-            const handleRequest = (_a = entrypoint.default) !== null && _a !== void 0 ? _a : entrypoint;
+            const entrypoint = await Promise.resolve(getServerEntrypoint()).catch((error) => {
+                // Errors are only thrown the first time we try to load the entry point.
+                // After refreshing the browser, this just loads an empty module
+                // and doesn't throw anymore. Store this error in the outer scope
+                // to keep throwing it on refresh until things are fixed.
+                entrypointError = error;
+            });
+            const handleRequest = (_a = entrypoint === null || entrypoint === void 0 ? void 0 : entrypoint.default) !== null && _a !== void 0 ? _a : entrypoint;
+            if (typeof handleRequest !== 'function') {
+                if (entrypointError) {
+                    throw entrypointError;
+                }
+                else {
+                    // This means there is no error when loading the entry point but
+                    // we are still not getting a function as the default export.
+                    throw new Error('Something is wrong in your project. Make sure to add "export default renderHydrogen(...)" in your server entry file.');
+                }
+            }
+            entrypointError = null;
             const eventResponse = await handleRequest(request, {
                 dev,
                 cache,
@@ -50,7 +73,6 @@ export function hydrogenMiddleware({ dev, cache, indexTemplate, getServerEntrypo
         catch (e) {
             if (dev && devServer)
                 devServer.ssrFixStacktrace(e);
-            console.log(e.stack);
             response.statusCode = 500;
             /**
              * Attempt to print the error stack within the template.

package/dist/esnext/framework/plugin.js

@@ -10,6 +10,7 @@ import hydrationAutoImport from './plugins/vite-plugin-hydration-auto-import';
 import inspect from 'vite-plugin-inspect';
 import react from '@vitejs/plugin-react';
 import path from 'path';
+import cssModulesRsc from './plugins/vite-plugin-css-modules-rsc';
 export default (shopifyConfig, pluginOptions = {}) => {
     return [
         process.env.VITE_INSPECT && inspect(),
@@ -19,6 +20,7 @@ export default (shopifyConfig, pluginOptions = {}) => {
         react(),
         hydrationAutoImport(),
         ssrInterop(),
+        cssModulesRsc(),
         rsc({
             clientComponentPaths: [
                 path.join(path.dirname(require.resolve('@shopify/hydrogen/package.json'))),
@@ -29,7 +31,10 @@ export default (shopifyConfig, pluginOptions = {}) => {
                 const entryServer = process.env.HYDROGEN_SERVER_ENTRY || HYDROGEN_DEFAULT_SERVER_ENTRY;
                 return (source.includes(entryServer) ||
                     // TODO update this after handleEvent is replaced with handleRequest
-                    /(handle-worker-event|index|entry-server)\.js/.test(importer));
+                    /(handle-worker-event|index|entry-server)\.js/.test(importer) ||
+                    // Support importing server components for testing
+                    // TODO: revisit this when RSC splits into two bundles
+                    /\.test\.[tj]sx?$/.test(importer));
             },
         }),
         platformEntry(),

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

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

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

@@ -0,0 +1,28 @@
+export default function cssModulesRsc() {
+    // 1. Original CSS module: `.myStyle { color: red; }`
+    // 2. CSS module after 'pre' Vite transforms: `.myStyle_hashedXYZ { color: red; }`
+    // 3. CSS module after 'post' Vite transforms: `export const myStyle = 'myStyle_hashedXYZ';`
+    let cssMap = new Map();
+    return [
+        {
+            name: 'css-modules-rsc',
+            configResolved() {
+                cssMap = new Map();
+            },
+            transform(code, id) {
+                if (/\.module\.(s?css|sass|less)/.test(id)) {
+                    cssMap.set(id, code);
+                }
+            },
+        },
+        {
+            name: 'css-modules-rsc-post',
+            enforce: 'post',
+            transform(code, id) {
+                if (id.includes('.module.') && cssMap.has(id)) {
+                    return code.replace(/export default .*$/gms, `import React from 'react'; export const StyleTag = () => React.createElement('style', {}, \`${cssMap.get(id)}\`);`);
+                }
+            },
+        },
+    ];
+}

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

@@ -1,85 +1,71 @@
 export default () => {
     return {
         name: 'vite-plugin-hydrogen-config',
-        config: async (config, env) => ({
-            resolve: {
-                alias: {
-                    // This library is currently included as a compiled vendor lib, not published yet to NPM
-                    'react-server-dom-vite/client-proxy': require.resolve('@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-client-proxy.js'),
+        config: async (config, env) => {
+            var _a, _b;
+            return ({
+                resolve: {
+                    alias: {
+                        // This library is currently included as a compiled vendor lib, not published yet to NPM
+                        'react-server-dom-vite/client-proxy': require.resolve('@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-client-proxy.js'),
+                    },
                 },
-            },
-            build: {
-                minify: 'esbuild',
-                sourcemap: true,
-                /**
-                 * By default, SSR dedupe logic gets bundled which runs `require('module')`.
-                 * We don't want this in our workers runtime, because `require` is not supported.
-                 */
-                rollupOptions: process.env.WORKER
-                    ? {
-                        output: {
-                            format: 'es',
-                        },
-                    }
-                    : {},
-            },
-            ssr: {
-                external: ['isomorphic-dompurify'],
-                /**
-                 * 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: Boolean(process.env.WORKER) || [/react-server-dom-vite/],
-                target: process.env.WORKER ? 'webworker' : 'node',
-            },
-            // Reload when updating local Hydrogen lib
-            server: process.env.LOCAL_DEV && {
-                watch: {
-                    ignored: ['!**/node_modules/@shopify/hydrogen/**'],
-                },
-            },
-            optimizeDeps: {
-                exclude: ['@shopify/hydrogen/client', '@shopify/hydrogen/entry-client'],
-                include: [
+                build: {
+                    minify: (_b = (_a = config.build) === null || _a === void 0 ? void 0 : _a.minify) !== null && _b !== void 0 ? _b : 'esbuild',
+                    sourcemap: true,
                     /**
-                     * Additionally, the following dependencies have trouble loading the
-                     * correct version of the dependency (server vs client). This tells Vite to take the
-                     * server versions and optimize them for ESM.
+                     * By default, SSR dedupe logic gets bundled which runs `require('module')`.
+                     * We don't want this in our workers runtime, because `require` is not supported.
                      */
-                    'react-helmet-async',
+                    rollupOptions: process.env.WORKER
+                        ? {
+                            output: {
+                                format: 'es',
+                            },
+                        }
+                        : {},
+                },
+                ssr: {
                     /**
-                     * Vite cannot find the following dependencies since they might be
-                     * required in RSC asynchronously. This tells Vite to optimize them
-                     * at server start to avoid posterior page reloads and issues (#429 #430).
+                     * Tell Vite to bundle everything when we're building for Workers.
+                     * Otherwise, bundle RSC plugin as a workaround to apply the vendor alias above.
                      */
-                    'react',
-                    'react-dom',
-                    'react-server-dom-vite/client-proxy',
-                ],
-            },
-            define: {
-                __DEV__: env.mode !== 'production',
-                __WORKER__: !!process.env.WORKER,
-            },
-            envPrefix: ['VITE_', 'PUBLIC_'],
-            base: process.env.HYDROGEN_ASSET_BASE_URL,
-        }),
-        // TODO: Remove when react-dom/fizz is fixed
-        renderChunk: process.env.WORKER
-            ? (code, chunk, opts) => {
-                if (!chunk.isEntry)
-                    return null;
-                // React fizz and flight try to access an undefined value.
-                // This puts a guard before accessing it.
-                code = code.replace(/\((\w+)\.locked\)/gm, '($1 && $1.locked)');
-                // `renderToReadableStream` is bugged in React.
-                // This adds a workaround until these issues are fixed:
-                // https://github.com/facebook/react/issues/22772
-                // https://github.com/facebook/react/issues/23113
-                code = code.replace(/var \w+\s*=\s*(\w+)\.completedRootSegment;/g, 'if($1.status===5)return;$1.status=5;\n$&');
-                code = code.replace(/{([^{]*?(\w+)\.pingedTasks\.length)/g, '{$2.status=0;\n$1');
-                return code;
-            }
-            : undefined,
+                    noExternal: Boolean(process.env.WORKER) || [/react-server-dom-vite/],
+                    target: process.env.WORKER ? 'webworker' : 'node',
+                },
+                // Reload when updating local Hydrogen lib
+                server: process.env.LOCAL_DEV && {
+                    watch: {
+                        ignored: ['!**/node_modules/@shopify/hydrogen/**'],
+                    },
+                },
+                optimizeDeps: {
+                    exclude: ['@shopify/hydrogen/client', '@shopify/hydrogen/entry-client'],
+                    include: [
+                        /**
+                         * Additionally, the following dependencies have trouble loading the
+                         * correct version of the dependency (server vs client). This tells Vite to take the
+                         * server versions and optimize them for ESM.
+                         */
+                        'react-helmet-async',
+                        'react-error-boundary',
+                        /**
+                         * Vite cannot find the following dependencies since they might be
+                         * required in RSC asynchronously. This tells Vite to optimize them
+                         * at server start to avoid posterior page reloads and issues (#429 #430).
+                         */
+                        'react',
+                        'react-dom/client',
+                        'react-server-dom-vite/client-proxy',
+                    ],
+                },
+                define: {
+                    __DEV__: env.mode !== 'production',
+                    __WORKER__: !!process.env.WORKER,
+                },
+                envPrefix: ['VITE_', 'PUBLIC_'],
+                base: process.env.HYDROGEN_ASSET_BASE_URL,
+            });
+        },
     };
 };

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

@@ -61,7 +61,7 @@ export default () => {
                 const packageJson = {
                     type: isESM ? 'module' : 'commonjs',
                     main: mainFile,
-                    exports: { '.': mainFile, mainFile },
+                    exports: { '.': mainFile, [mainFile]: mainFile },
                 };
                 fs.writeFileSync(path.join(options.dir, 'package.json'), JSON.stringify(packageJson, null, 2), 'utf-8');
             }