chore(remix-node): put native fetch behind config option

.changeset/good-buses-divide.md

@@ -0,0 +1,9 @@
+---
+"@remix-run/node": patch
+"@remix-run/serve": patch
+---
+
+- Put `undici` fetch polyfill behind a new `installGlobals({ nativeFetch: true })` parameter
+- `remix-serve` will default to using `undici` for the fetch polyfill if `future._unstable_singleFetch` is enabled because the single fetch implementation relies on the `undici` polyfill
+  - Any users opting into Single Fetch and managing their own polfill will need to pass the flag to `installGlobals` on their own to avoid runtime errors with Single Fetch
+

integration/error-data-request-test.ts

@@ -327,9 +327,7 @@ test.describe("single fetch", () => {
         fixture.requestSingleFetchData("/loader-return-json.data", {
           method: "TRACE",
         })
-      ).rejects.toThrowError(
-        `Failed to construct 'Request': 'TRACE' HTTP method is unsupported.`
-      );
+      ).rejects.toThrow(/'TRACE' HTTP method is unsupported\./);
     });
 
     test("returns a 404 on a data fetch to a path with no matches", async () => {

integration/helpers/create-fixture.ts

@@ -44,8 +44,9 @@ export function json(value: JsonObject) {
 }
 
 export async function createFixture(init: FixtureInit, mode?: ServerMode) {
-  installGlobals();
+  installGlobals({ nativeFetch: true });
   let compiler = init.compiler ?? "remix";
+
   let projectDir = await createFixtureProject(init, mode);
   let buildPath = url.pathToFileURL(
     path.join(

integration/helpers/vite.ts

@@ -53,7 +53,7 @@ export const EXPRESS_SERVER = (args: {
     import { installGlobals } from "@remix-run/node";
     import express from "express";
 
-    installGlobals();
+    installGlobals({ nativeFetch: true });
 
     let viteDevServer =
       process.env.NODE_ENV === "production"

integration/hmr-test.ts

@@ -180,7 +180,7 @@ let customServer = (options: { appPort: number; devReady: string }) => {
       import { createRequestHandler } from "@remix-run/express";
       import { ${options.devReady}, installGlobals } from "@remix-run/node";
 
-      installGlobals();
+      installGlobals({ nativeFetch: true });
 
       const app = express();
       app.use(express.static("public", { immutable: true, maxAge: "1y" }));

integration/vite-basename-test.ts

@@ -97,7 +97,7 @@ const customServerFile = ({
     import { createRequestHandler } from "@remix-run/express";
     import { installGlobals } from "@remix-run/node";
     import express from "express";
-    installGlobals();
+    installGlobals({ nativeFetch: true });
 
     const viteDevServer =
       process.env.NODE_ENV === "production"
@@ -416,7 +416,7 @@ test.describe("Vite base / Remix basename / express build", async () => {
         import { createRequestHandler } from "@remix-run/express";
         import { installGlobals } from "@remix-run/node";
         import express from "express";
-        installGlobals();
+        installGlobals({ nativeFetch: true });
 
         const app = express();
         app.all(

package.json

@@ -64,6 +64,7 @@
     "@remix-run/react": "workspace:*",
     "@remix-run/testing": "workspace:*",
     "@rollup/plugin-babel": "^5.2.2",
+    "@rollup/plugin-commonjs": "^21.1.0",
     "@rollup/plugin-json": "^5.0.0",
     "@rollup/plugin-node-resolve": "^11.0.1",
     "@rollup/plugin-replace": "^5.0.2",

packages/remix-architect/__tests__/setup.ts

@@ -1,2 +1,2 @@
 import { installGlobals } from "@remix-run/node";
-installGlobals();
+installGlobals({ nativeFetch: true });

packages/remix-express/__tests__/setup.ts

@@ -1,2 +1,2 @@
 import { installGlobals } from "@remix-run/node";
-installGlobals();
+installGlobals({ nativeFetch: true });

packages/remix-node/__tests__/setup.ts

@@ -1,2 +1,2 @@
 import { installGlobals } from "@remix-run/node";
-installGlobals();
+installGlobals({ nativeFetch: true });

packages/remix-node/globals.ts

@@ -1,12 +1,3 @@
-import {
-  File as NodeFile,
-  fetch as nodeFetch,
-  FormData as NodeFormData,
-  Headers as NodeHeaders,
-  Request as NodeRequest,
-  Response as NodeResponse,
-} from "undici";
-
 declare global {
   namespace NodeJS {
     interface ProcessEnv {
@@ -32,17 +23,38 @@ declare global {
   }
 }
 
-export function installGlobals() {
-  global.File = NodeFile as unknown as typeof File;
-
-  // @ts-expect-error - overriding globals
-  global.Headers = NodeHeaders;
-  // @ts-expect-error - overriding globals
-  global.Request = NodeRequest;
-  // @ts-expect-error - overriding globals
-  global.Response = NodeResponse;
-  // @ts-expect-error - overriding globals
-  global.fetch = nodeFetch;
-  // @ts-expect-error - overriding globals
-  global.FormData = NodeFormData;
+export function installGlobals({
+  nativeFetch,
+}: { nativeFetch?: boolean } = {}) {
+  if (nativeFetch) {
+    let {
+      File: UndiciFile,
+      fetch: undiciFetch,
+      FormData: UndiciFormData,
+      Headers: UndiciHeaders,
+      Request: UndiciRequest,
+      Response: UndiciResponse,
+    } = require("undici");
+    global.File = UndiciFile as unknown as typeof File;
+    global.Headers = UndiciHeaders;
+    global.Request = UndiciRequest;
+    global.Response = UndiciResponse;
+    global.fetch = undiciFetch;
+    global.FormData = UndiciFormData;
+  } else {
+    let {
+      File: RemixFile,
+      fetch: RemixFetch,
+      FormData: RemixFormData,
+      Headers: RemixHeaders,
+      Request: RemixRequest,
+      Response: RemixResponse,
+    } = require("@remix-run/web-fetch");
+    global.File = RemixFile;
+    global.Headers = RemixHeaders;
+    global.Request = RemixRequest;
+    global.Response = RemixResponse;
+    global.fetch = RemixFetch;
+    global.FormData = RemixFormData;
+  }
 }

packages/remix-node/package.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@remix-run/server-runtime": "workspace:*",
+    "@remix-run/web-fetch": "^4.4.2",
     "@web3-storage/multipart-parser": "^1.0.0",
     "cookie-signature": "^1.1.0",
     "source-map-support": "^0.5.21",

packages/remix-node/rollup.config.js

@@ -1,5 +1,6 @@
 const path = require("node:path");
 const babel = require("@rollup/plugin-babel").default;
+const commonjs = require("@rollup/plugin-commonjs");
 const nodeResolve = require("@rollup/plugin-node-resolve").default;
 const copy = require("rollup-plugin-copy");
 
@@ -37,6 +38,7 @@ module.exports = function rollup() {
           extensions: [".ts", ".tsx"],
         }),
         nodeResolve({ extensions: [".ts", ".tsx"] }),
+        commonjs({ ignoreDynamicRequires: true }),
         copy({
           targets: [
             { src: "LICENSE.md", dest: [outputDir, sourceDir] },

packages/remix-react/__tests__/setup.ts

@@ -4,5 +4,5 @@ global.TextEncoder = require("util").TextEncoder;
 global.ReadableStream = require("stream/web").ReadableStream;
 global.WritableStream = require("stream/web").WritableStream;
 
-require("@remix-run/node").installGlobals();
+require("@remix-run/node").installGlobals({ nativeFetch: true });
 global.FormData = JSDOMFormData;

packages/remix-serve/cli.ts

@@ -34,7 +34,6 @@ sourceMapSupport.install({
     return null;
   },
 });
-installGlobals();
 
 run();
 
@@ -101,6 +100,8 @@ async function run() {
 
   let build: ServerBuild = await reimportServer();
 
+  installGlobals({ nativeFetch: build.future.unstable_singleFetch });
+
   let onListen = () => {
     let address =
       process.env.HOST ||

packages/remix-server-runtime/__tests__/setup.ts

@@ -1,3 +1,3 @@
 import { installGlobals } from "@remix-run/node";
 
-installGlobals();
+installGlobals({ nativeFetch: true });

packages/remix-testing/jest.config.js

@@ -4,5 +4,5 @@ module.exports = {
   displayName: "testing",
   setupFiles: [],
   testEnvironment: "jsdom",
-  setupFilesAfterEnv: ["@testing-library/jest-dom", "./jest.setup.js"],
+  setupFilesAfterEnv: ["./jest.setup.js", "@testing-library/jest-dom"],
 };

packages/remix-testing/jest.setup.js

@@ -4,5 +4,5 @@ global.TextEncoder = require("util").TextEncoder;
 global.ReadableStream = require("stream/web").ReadableStream;
 global.WritableStream = require("stream/web").WritableStream;
 
-require("@remix-run/node").installGlobals();
+require("@remix-run/node").installGlobals({ nativeFetch: true });
 global.FormData = JSDOMFormData;

templates/classic-remix-compiler/arc/server.ts

@@ -4,6 +4,6 @@ import { installGlobals } from "@remix-run/node";
 import sourceMapSupport from "source-map-support";
 
 sourceMapSupport.install();
-installGlobals();
+installGlobals({ nativeFetch: true });
 
 export const handler = createRequestHandler({ build });