chore: use undici / native node fetch (#11364)

* chore: use undici / native node fetch

* revert snapshot change

examples/ssr-data-router/package.json

@@ -10,7 +10,6 @@
     "debug": "node --inspect-brk server.js"
   },
   "dependencies": {
-    "@remix-run/node": "^1.12.0",
     "@remix-run/router": "^1.8.0",
     "compression": "1.7.4",
     "cross-env": "^7.0.3",

examples/ssr-data-router/server.js

@@ -1,10 +1,6 @@
 let path = require("path");
 let fsp = require("fs/promises");
 let express = require("express");
-let { installGlobals } = require("@remix-run/node");
-
-// Polyfill Web Fetch API
-installGlobals();
 
 let root = process.cwd();
 let isProduction = process.env.NODE_ENV === "production";

jest/jest.config.shared.js

@@ -9,14 +9,6 @@ const ignorePatterns = [
 /** @type {import('jest').Config} */
 module.exports = {
   moduleNameMapper: {
-    "^@remix-run/web-blob$": require.resolve("@remix-run/web-blob"),
-    "^@remix-run/web-fetch$": require.resolve("@remix-run/web-fetch"),
-    "^@remix-run/web-form-data$": require.resolve("@remix-run/web-form-data"),
-    "^@remix-run/web-stream$": require.resolve("@remix-run/web-stream"),
-    "^@web3-storage/multipart-parser$": require.resolve(
-      "@web3-storage/multipart-parser"
-    ),
-
     "^@remix-run/router$": "<rootDir>/../router/index.ts",
     "^react-router$": "<rootDir>/../react-router/index.ts",
     "^react-router-dom$": "<rootDir>/../react-router-dom/index.tsx",

package.json

@@ -48,7 +48,6 @@
     "@octokit/plugin-paginate-rest": "^2.21.3",
     "@octokit/rest": "^18.12.0",
     "@remix-run/changelog-github": "^0.0.5",
-    "@remix-run/web-fetch": "4.3.6",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-replace": "^4.0.0",
     "@rollup/plugin-typescript": "^8.5.0",
@@ -102,6 +101,7 @@
     "semver": "^7.5.4",
     "type-fest": "^2.19.0",
     "typescript": "^5.1.6",
+    "undici": "^6.10.1",
     "unified": "^10.1.2",
     "unist-util-remove": "^3.1.0"
   },

packages/react-router-dom/__tests__/setup.ts

@@ -2,25 +2,28 @@ import {
   TextEncoder as NodeTextEncoder,
   TextDecoder as NodeTextDecoder,
 } from "util";
-import { fetch, Request, Response, Headers } from "@remix-run/web-fetch";
 import { AbortController as NodeAbortController } from "abort-controller";
 
 // https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#configuring-your-testing-environment
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
 if (!globalThis.fetch) {
-  // Built-in lib.dom.d.ts expects `fetch(Request | string, ...)` but the web
-  // fetch API allows a URL so @remix-run/web-fetch defines
-  // `fetch(string | URL | Request, ...)`
-  // @ts-expect-error
+  const { TextDecoder, TextEncoder } = require("node:util");
+  global.TextDecoder = TextDecoder;
+  global.TextEncoder = TextEncoder;
+
+  const { ReadableStream, WritableStream } = require("node:stream/web");
+  global.ReadableStream = ReadableStream;
+  global.WritableStream = WritableStream;
+
+  const { fetch, FormData, Request, Response, Headers } = require("undici");
+
   globalThis.fetch = fetch;
-  // Same as above, lib.dom.d.ts doesn't allow a URL to the Request constructor
-  // @ts-expect-error
   globalThis.Request = Request;
-  // web-std/fetch Response does not currently implement Response.error()
-  // @ts-expect-error
   globalThis.Response = Response;
   globalThis.Headers = Headers;
+
+  global.FormData = global.FormData || FormData;
 }
 
 if (!globalThis.AbortController) {

packages/react-router/__tests__/setup.ts

@@ -1,19 +1,21 @@
-import { fetch, Request, Response, Headers } from "@remix-run/web-fetch";
-
 // https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#configuring-your-testing-environment
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
 if (!globalThis.fetch) {
-  // Built-in lib.dom.d.ts expects `fetch(Request | string, ...)` but the web
-  // fetch API allows a URL so @remix-run/web-fetch defines
-  // `fetch(string | URL | Request, ...)`
-  // @ts-expect-error
+  const { TextDecoder, TextEncoder } = require("node:util");
+  global.TextDecoder = TextDecoder;
+  global.TextEncoder = TextEncoder;
+
+  const { ReadableStream, WritableStream } = require("node:stream/web");
+  global.ReadableStream = ReadableStream;
+  global.WritableStream = WritableStream;
+
+  const { fetch, FormData, Request, Response, Headers } = require("undici");
+
   globalThis.fetch = fetch;
-  // Same as above, lib.dom.d.ts doesn't allow a URL to the Request constructor
-  // @ts-expect-error
   globalThis.Request = Request;
-  // web-std/fetch Response does not currently implement Response.error()
-  // @ts-expect-error
   globalThis.Response = Response;
   globalThis.Headers = Headers;
+
+  global.FormData = global.FormData || FormData;
 }

packages/router/__tests__/router-test.ts

@@ -1892,7 +1892,7 @@ describe("a router", () => {
       expect(
         A.actions.root.stub.mock.calls[0][0].request.headers.get("Content-Type")
       ).toMatch(
-        /^multipart\/form-data; boundary=NodeFetchFormDataBoundary[a-z0-9]+/
+        /^multipart\/form-data; boundary=----formdata-undici-[a-z0-9]+/
       );
     });
 

packages/router/__tests__/setup.ts

@@ -1,32 +1,25 @@
-import {
-  TextEncoder as NodeTextEncoder,
-  TextDecoder as NodeTextDecoder,
-} from "util";
-import { fetch, Request, Response, Headers } from "@remix-run/web-fetch";
 import { AbortController as NodeAbortController } from "abort-controller";
 
 if (!globalThis.fetch) {
-  // Built-in lib.dom.d.ts expects `fetch(Request | string, ...)` but the web
-  // fetch API allows a URL so @remix-run/web-fetch defines
-  // `fetch(string | URL | Request, ...)`
-  // @ts-expect-error
+  const { TextDecoder, TextEncoder } = require("node:util");
+  global.TextDecoder = global.TextDecoder || TextDecoder;
+  global.TextEncoder = global.TextEncoder || TextEncoder;
+
+  const { ReadableStream, WritableStream } = require("node:stream/web");
+  global.ReadableStream = ReadableStream;
+  global.WritableStream = WritableStream;
+
+  const { fetch, FormData, Request, Response, Headers } = require("undici");
+
   globalThis.fetch = fetch;
-  // Same as above, lib.dom.d.ts doesn't allow a URL to the Request constructor
-  // @ts-expect-error
   globalThis.Request = Request;
-  // web-std/fetch Response does not currently implement Response.error()
-  // @ts-expect-error
   globalThis.Response = Response;
   globalThis.Headers = Headers;
+
+  global.FormData = global.FormData || FormData;
 }
 
 if (!globalThis.AbortController) {
   // @ts-expect-error
   globalThis.AbortController = NodeAbortController;
 }
-
-if (!globalThis.TextEncoder || !globalThis.TextDecoder) {
-  globalThis.TextEncoder = NodeTextEncoder;
-  // @ts-expect-error
-  globalThis.TextDecoder = NodeTextDecoder;
-}