Drop support for Node 18 and installGlobals (#12171)

Author: brophdawg11

.changeset/tidy-pens-help.md

@@ -0,0 +1,10 @@
+---
+"@react-router/express": major
+"@react-router/node": major
+"@react-router/dev": major
+"react-router": major
+---
+
+Drop support for Node 18, update minimum Node vestion to 20
+
+- Remove `installGlobals()` as this should no longer be necessary

.github/workflows/integration-full.yml

@@ -34,7 +34,7 @@ jobs:
     uses: ./.github/workflows/shared-integration.yml
     with:
       os: "ubuntu-latest"
-      node_version: "[18, 20]"
+      node_version: "[20, 22]"
       browser: '["chromium", "firefox"]'
 
   integration-windows:
@@ -43,7 +43,7 @@ jobs:
     uses: ./.github/workflows/shared-integration.yml
     with:
       os: "windows-latest"
-      node_version: "[18, 20]"
+      node_version: "[20, 22]"
       browser: '["msedge"]'
 
   integration-macos:
@@ -52,5 +52,5 @@ jobs:
     uses: ./.github/workflows/shared-integration.yml
     with:
       os: "macos-latest"
-      node_version: "[18, 20]"
+      node_version: "[20, 22]"
       browser: '["webkit"]'

.github/workflows/integration-pr-ubuntu.yml

@@ -31,5 +31,5 @@ jobs:
     uses: ./.github/workflows/shared-integration.yml
     with:
       os: "ubuntu-latest"
-      node_version: "[20]"
+      node_version: "[22]"
       browser: '["chromium"]'

.github/workflows/integration-pr-windows-macos.yml

@@ -21,7 +21,7 @@ jobs:
     uses: ./.github/workflows/shared-integration.yml
     with:
       os: "ubuntu-latest"
-      node_version: "[20]"
+      node_version: "[22]"
       browser: '["firefox"]'
 
   integration-msedge:
@@ -30,7 +30,7 @@ jobs:
     uses: ./.github/workflows/shared-integration.yml
     with:
       os: "windows-latest"
-      node_version: "[20]"
+      node_version: "[22]"
       browser: '["msedge"]'
 
   integration-webkit:
@@ -39,5 +39,5 @@ jobs:
     uses: ./.github/workflows/shared-integration.yml
     with:
       os: "macos-latest"
-      node_version: "[20]"
+      node_version: "[22]"
       browser: '["webkit"]'

.github/workflows/shared-integration.yml

@@ -9,7 +9,7 @@ on:
       node_version:
         required: true
         # this is limited to string | boolean | number (https://github.saobby.my.eu.orgmunity/t/can-action-inputs-be-arrays/16457)
-        # but we want to pass an array (node_version: "[18, 20]"),
+        # but we want to pass an array (node_version: "[20, 22]"),
         # so we'll need to manually stringify it for now
         type: string
       browser:

.github/workflows/test.yml

@@ -26,8 +26,8 @@ jobs:
       fail-fast: false
       matrix:
         node:
-          - 18
           - 20
+          - 22
 
     runs-on: ubuntu-latest
 

docs/deploying/custom-node.md

@@ -7,3 +7,41 @@ title: Custom Node.js
 <docs-warning>
   This document is a work in progress. There's not much to see here (yet).
 </docs-warning>
+
+## Polyfilling `fetch`
+
+React Router officially supports Active and Maintenance[^1] [Node LTS veleases][node-releases] at any given point in time. Dropping support for End of Life Node versions may be done in a React Router Minor release.
+
+[^1]: Based on timing, React Router may drop support for a Node Maintenance LTS version shortly before it goes end-of-life if it better aligns with a React Router Major SemVer release.
+
+At the time React Router v7 was released, all versions had a usable `fetch` implementation so there is generally no need to polyfill any `fetch` APIs so long as you're on Node 22 or one of the later Node 20 releases.
+
+- Node 22 (Active LTS) has a stable [`fetch`][node-22-fetch] implementation
+- Node 20 (Maintenance LTS) has an experimental (but suitable from our testing) [`fetch`][node-20-fetch] implementation
+
+If you do find that you need to polyfill anything, you can do so directly from the [undici] package which node uses internally.
+
+```ts
+import {
+  fetch as nodeFetch,
+  File as NodeFile,
+  FormData as NodeFormData,
+  Headers as NodeHeaders,
+  Request as NodeRequest,
+  Response as NodeResponse,
+} from "undici";
+
+export function polyfillFetch() {
+  global.File = NodeFile;
+  global.Headers = NodeHeaders;
+  global.Request = NodeRequest;
+  global.Response = NodeResponse;
+  global.fetch = nodeFetch;
+  global.FormData = NodeFormData;
+}
+```
+
+[node-releases]: https://nodejs.org/en/about/previous-releases
+[node-20-fetch]: https://nodejs.org/docs/latest-v20.x/api/globals.html#fetch
+[node-22-fetch]: https://nodejs.org/docs/latest-v22.x/api/globals.html#fetch
+[undici]: https://github.com/nodejs/undici

integration/helpers/create-fixture.ts

@@ -15,7 +15,6 @@ import {
   UNSAFE_decodeViaTurboStream as decodeViaTurboStream,
 } from "react-router";
 import { createRequestHandler as createExpressHandler } from "@react-router/express";
-import { installGlobals } from "@react-router/node";
 
 import { viteConfig } from "./vite.js";
 
@@ -43,8 +42,6 @@ export function json(value: JsonObject) {
 }
 
 export async function createFixture(init: FixtureInit, mode?: ServerMode) {
-  installGlobals();
-
   let projectDir = await createFixtureProject(init, mode);
   let buildPath = url.pathToFileURL(
     path.join(projectDir, "build/server/index.js")

integration/helpers/node-template/package.json

@@ -34,6 +34,6 @@
     "typescript": "^5.1.0"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   }
 }

integration/helpers/vite-cloudflare-template/package.json

@@ -30,6 +30,6 @@
     "wrangler": "^3.28.2"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   }
 }