Support Node 18 by avoiding Headers.raw()

.changeset/sharp-rice-marry.md

@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Properly support Node v18

.github/workflows/tests_and_lint.yml

@@ -21,7 +21,7 @@ jobs:
     strategy:
       matrix:
         os: [windows-latest, ubuntu-latest]
-        node-version: [16.x, 17.x]
+        node-version: [16.x, 17.x, 18.x]
 
     name: OS ${{ matrix.os }} / NodeJS ${{ matrix.node-version }}
 

packages/hydrogen/package.json

@@ -72,6 +72,7 @@
     "@types/node-fetch": "^2.5.9",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.5",
+    "@types/set-cookie-parser": "^2.4.2",
     "@types/uuid": "^8.3.4",
     "@types/ws": "^8.2.0",
     "babel-loader": "^8.2.2",
@@ -117,6 +118,7 @@
     "path-to-regexp": "^6.2.0",
     "react-error-boundary": "^3.1.3",
     "react-helmet-async": "^1.2.3",
+    "set-cookie-parser": "^2.4.8",
     "uuid": "^8.3.2",
     "vite-plugin-inspect": "^0.3.6",
     "web-streams-polyfill": "^3.2.0",

packages/hydrogen/src/entry-server.tsx

@@ -49,6 +49,7 @@ import {ServerAnalyticsRoute} from './foundation/Analytics/ServerAnalyticsRoute.
 import {getSyncSessionApi} from './foundation/session/session';
 import {parseJSON} from './utilities/parse';
 import {htmlEncode} from './utilities';
+import {splitCookiesString} from 'set-cookie-parser';
 
 declare global {
   // This is provided by a Vite plugin
@@ -707,22 +708,37 @@ function handleFetchResponseInNode(
       nodeResponse.statusCode = response.status;
 
       if (response.body) {
-        nodeResponse.write(response.body);
+        if (response.body instanceof ReadableStream) {
+          const reader = response.body.getReader();
+          reader.read().then(function write({done, value}) {
+            value && nodeResponse.write(value);
+            !done && reader.read().then(write);
+            done && nodeResponse.end();
+          });
+        } else {
+          nodeResponse.write(response.body);
+          nodeResponse.end();
+        }
+      } else {
+        nodeResponse.end();
       }
-
-      nodeResponse.end();
     });
   }
 
   return fetchResponsePromise;
 }
 
-// From fetch Headers to Node Response
+/**
+ * Convert Headers to outgoing Node.js headers.
+ * Specifically, parse set-cookie headers to split them properly as separate
+ * `set-cookie` headers rather than a single, combined header.
+ */
 function setNodeHeaders(headers: Headers, nodeResponse: ServerResponse) {
-  // Headers.raw is only implemented in node-fetch, which is used by Hydrogen in dev and prod.
-  // It is the only way for now to access `set-cookie` header as an array.
-  // https://github.com/Shopify/hydrogen/issues/1228
-  Object.entries((headers as any).raw()).forEach(([key, value]) =>
-    nodeResponse.setHeader(key, value as string)
-  );
+  for (const [key, value] of headers.entries()) {
+    if (key.toLowerCase() === 'set-cookie') {
+      nodeResponse.setHeader('set-cookie', splitCookiesString(value));
+    } else {
+      nodeResponse.setHeader(key, value);
+    }
+  }
 }

packages/hydrogen/src/framework/plugins/vite-plugin-hydrogen-config.ts

@@ -94,6 +94,8 @@ export default () => {
           'react-server-dom-vite/client-proxy',
           // https://github.com/vitejs/vite/issues/6215
           'react/jsx-runtime',
+          // https://github.com/nfriedly/set-cookie-parser/issues/50
+          'set-cookie-parser',
         ],
       },
 

packages/hydrogen/tsconfig.cjs.json

@@ -6,7 +6,7 @@
     "outDir": "./dist/node",
     "module": "commonjs",
     "moduleResolution": "node",
-    "lib": ["ESNext", "DOM"],
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "esModuleInterop": true,
     "types": []
   }

packages/hydrogen/tsconfig.json

@@ -8,7 +8,7 @@
     "outDir": "./dist/esnext",
     "module": "esnext",
     "moduleResolution": "node",
-    "lib": ["ESNext", "DOM"],
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "types": ["jest", "@shopify/react-testing/matchers"],
     "strict": true,
     "noUnusedLocals": true,

yarn.lock

@@ -2664,6 +2664,13 @@
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-6.2.3.tgz#5798ecf1bec94eaa64db39ee52808ec0693315aa"
   integrity sha512-KQf+QAMWKMrtBMsB8/24w53tEsxllMj6TuA80TT/5igJalLI/zm0L3oXRbIAl4Ohfc85gyHX/jhMwsVkmhLU4A==
 
+"@types/set-cookie-parser@^2.4.2":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@types/set-cookie-parser/-/set-cookie-parser-2.4.2.tgz#b6a955219b54151bfebd4521170723df5e13caad"
+  integrity sha512-fBZgytwhYAUkj/jC/FAV4RQ5EerRup1YQsXQCh8rZfiHkc4UahC192oH0smGwsXol3cL3A5oETuAHeQHmhXM4w==
+  dependencies:
+    "@types/node" "*"
+
 "@types/[email protected]":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/stack-trace/-/stack-trace-0.0.29.tgz#eb7a7c60098edb35630ed900742a5ecb20cfcb4d"