fix: remove transient dependency on connect

Author: marklawlor

example/package.json

@@ -11,14 +11,15 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@expo/metro-runtime": "~6.1.1",
     "@tailwindcss/postcss": "^4.1.11",
     "expo": "54.0.0-preview.13",
     "expo-dev-client": "6.0.4",
     "expo-status-bar": "3.0.6",
     "expo-system-ui": "6.0.6",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "react-native": "0.81.0",
+    "react-native": "0.81.1",
     "react-native-reanimated": "4.0.2",
     "react-native-web": "~0.21.1",
     "react-native-worklets": "0.4.1",

package.json

@@ -161,23 +161,20 @@
     "expo": "54.0.0-preview.13",
     "lightningcss": ">=1.27.0",
     "react": "19.1.0",
-    "react-native": "0.81.0"
+    "react-native": "0.81.1"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@commitlint/config-conventional": "^19.8.1",
     "@eslint/js": "^9.30.1",
-    "@expo/metro-runtime": "~6.1.1",
     "@ianvs/prettier-plugin-sort-imports": "^4.4.2",
     "@tailwindcss/postcss": "^4.1.12",
     "@testing-library/react-native": "^13.3.3",
     "@tsconfig/react-native": "^3.0.6",
     "@types/babel__core": "^7",
-    "@types/connect": "^3.4.38",
     "@types/debug": "^4.1.12",
     "@types/jest": "^30.0.0",
     "@types/react": "^19.1.10",
-    "@types/react-refresh": "^0",
     "@types/react-test-renderer": "^19",
     "babel-plugin-tester": "^12.0.0",
     "babel-preset-expo": "~14.0.6",

src/metro/index.ts

@@ -2,7 +2,6 @@
 import { dirname, relative, sep } from "node:path";
 import { versions } from "node:process";
 
-import connect from "connect";
 import debug from "debug";
 import type { MetroConfig } from "metro-config";
 
@@ -50,9 +49,6 @@ export function withReactNativeCSS<
     setupTypeScript(typescriptEnvPath);
   }
 
-  const originalMiddleware = config.server?.enhanceMiddleware;
-  const originalResolver = config.resolver?.resolveRequest;
-
   return {
     ...config,
     transformerPath: require.resolve("./metro-transformer"),
@@ -68,13 +64,14 @@ export function withReactNativeCSS<
           return { type: "empty" };
         }
 
+        const parentResolver =
+          config.resolver?.resolveRequest ?? context.resolveRequest;
+
         // Don't hijack the resolution of react-native imports
         if (!globalClassNamePolyfill) {
-          const parentResolver = originalResolver ?? context.resolveRequest;
           return parentResolver(context, moduleName, platform);
         }
 
-        const parentResolver = originalResolver ?? context.resolveRequest;
         const resolver = platform === "web" ? webResolver : nativeResolver;
         const resolved = resolver(
           parentResolver,
@@ -88,8 +85,7 @@ export function withReactNativeCSS<
     },
     server: {
       ...config.server,
-      enhanceMiddleware(middleware, metroServer) {
-        const server = connect();
+      enhanceMiddleware(metroMiddleware, metroServer) {
         const bundler: any = metroServer.getBundler().getBundler();
 
         if (!bundler.__react_native_css__patched) {
@@ -230,9 +226,14 @@ export function withReactNativeCSS<
           };
         }
 
-        return originalMiddleware
-          ? server.use(originalMiddleware(middleware, metroServer))
-          : server.use(middleware);
+        /**
+         * We don't modify the middleware, we just use this function to get the metroServer
+         * So simply return the existing middleware
+         */
+        return (
+          config.server?.enhanceMiddleware?.(metroMiddleware, metroServer) ??
+          metroMiddleware
+        );
       },
     },
   };