feat: obtain@react-native/dev-middleware dynamically

.changeset/beige-humans-bake.md

@@ -0,0 +1,6 @@
+---
+"@callstack/repack-dev-server": minor
+"@callstack/repack": minor
+---
+
+Drop dependency on `@react-native/dev-middleware` and obtain dev middleware dynamically depending on version of React Native in the project

packages/dev-server/package.json

@@ -31,7 +31,6 @@
     "@babel/code-frame": "^7.26.2",
     "@fastify/middie": "^8.3.0",
     "@fastify/sensible": "^5.5.0",
-    "@react-native/dev-middleware": "^0.80.0",
     "fastify": "^4.24.3",
     "fastify-favicon": "^4.3.0",
     "fastify-plugin": "^4.5.1",
@@ -43,6 +42,7 @@
     "ws": "^8.18.1"
   },
   "devDependencies": {
+    "@react-native/dev-middleware": "^0.80.0",
     "@types/babel__code-frame": "^7.0.6",
     "@types/node": "catalog:",
     "@types/ws": "^8.18.0",

packages/dev-server/src/createServer.ts

@@ -2,7 +2,6 @@ import { Writable } from 'node:stream';
 import util from 'node:util';
 import middie from '@fastify/middie';
 import fastifySensible from '@fastify/sensible';
-import { createDevMiddleware } from '@react-native/dev-middleware';
 import Fastify from 'fastify';
 import { createProxyMiddleware } from 'http-proxy-middleware';
 import apiPlugin from './plugins/api/apiPlugin.js';
@@ -69,7 +68,7 @@ export async function createServer(config: Server.Config) {
 
   let handledDevMiddlewareNotice = false;
 
-  const devMiddleware = createDevMiddleware({
+  const devMiddleware = options.devMiddleware.createDevMiddleware({
     projectRoot: options.rootDir,
     serverBaseUrl: options.url,
     logger: {

packages/dev-server/src/types.ts

@@ -1,4 +1,5 @@
 import type { ServerOptions as HttpsServerOptions } from 'node:https';
+import type * as DevMiddleware from '@react-native/dev-middleware';
 import type { FastifyBaseLogger } from 'fastify';
 import type { Options as ProxyOptions } from 'http-proxy-middleware';
 import type { CompilerDelegate } from './plugins/compiler/types.js';
@@ -68,6 +69,9 @@ export namespace Server {
 
     /** Whether to enable logging requests. */
     logRequests?: boolean;
+
+    /** `@react-native/dev-middleware` module. */
+    devMiddleware: typeof DevMiddleware;
   }
 
   /**

packages/dev-server/src/utils/normalizeOptions.ts

@@ -1,4 +1,5 @@
 import type { ServerOptions as HttpsServerOptions } from 'node:https';
+import type * as DevMiddleware from '@react-native/dev-middleware';
 import type { Options as ProxyOptions } from 'http-proxy-middleware';
 import type { DevServerOptions, Server } from '../types.js';
 
@@ -40,6 +41,7 @@ export interface NormalizedOptions {
   proxy: ProxyOptions[] | undefined;
   url: string;
   disableRequestLogging: boolean;
+  devMiddleware: typeof DevMiddleware;
   rootDir: string;
 }
 
@@ -62,6 +64,8 @@ export function normalizeOptions(options: Server.Options): NormalizedOptions {
     hot,
     proxy,
     url,
+    // dev middleware
+    devMiddleware: options.devMiddleware,
     // fastify options
     disableRequestLogging: !options.logRequests,
     // project options

packages/repack/src/commands/common/getDevMiddleware.ts

@@ -0,0 +1,12 @@
+export async function getDevMiddleware(reactNativePath: string) {
+  const reactNativeCommunityCliPluginPath = require.resolve(
+    '@react-native/community-cli-plugin',
+    { paths: [reactNativePath] }
+  );
+
+  const devMiddlewarePath = require.resolve('@react-native/dev-middleware', {
+    paths: [reactNativeCommunityCliPluginPath],
+  });
+
+  return import(devMiddlewarePath);
+}

packages/repack/src/commands/common/index.ts

@@ -1,4 +1,5 @@
 export * from './adaptFilenameToPlatform.js';
+export * from './getDevMiddleware.js';
 export * from './getMimeType.js';
 export * from './runAdbReverse.js';
 export * from './parseFileUrl.js';

packages/repack/src/commands/rspack/start.ts

@@ -10,6 +10,7 @@ import {
 import { CLIError } from '../common/cliError.js';
 import { makeCompilerConfig } from '../common/config/makeCompilerConfig.js';
 import {
+  getDevMiddleware,
   getMimeType,
   parseFileUrl,
   resetPersistentCache,
@@ -56,6 +57,9 @@ export async function start(
   const devServerOptions = configs[0].devServer ?? {};
   const showHttpRequests = args.verbose || args.logRequests;
 
+  // dynamically import dev middleware to match version of react-native
+  const devMiddleware = await getDevMiddleware(cliConfig.reactNativePath);
+
   const reporter = composeReporters(
     [
       new ConsoleReporter({ asJson: args.json, isVerbose: args.verbose }),
@@ -90,6 +94,7 @@ export async function start(
       ...devServerOptions,
       rootDir: cliConfig.root,
       logRequests: showHttpRequests,
+      devMiddleware,
     },
     delegate: (ctx) => {
       if (args.interactive) {

packages/repack/src/commands/webpack/start.ts

@@ -12,6 +12,7 @@ import type { HMRMessage } from '../../types.js';
 import { CLIError } from '../common/cliError.js';
 import { makeCompilerConfig } from '../common/config/makeCompilerConfig.js';
 import {
+  getDevMiddleware,
   getMimeType,
   parseFileUrl,
   resetPersistentCache,
@@ -58,6 +59,9 @@ export async function start(
   const devServerOptions = configs[0].devServer ?? {};
   const showHttpRequests = args.verbose || args.logRequests;
 
+  // dynamically import dev middleware to match version of react-native
+  const devMiddleware = await getDevMiddleware(cliConfig.reactNativePath);
+
   const reporter = composeReporters(
     [
       new ConsoleReporter({ asJson: args.json, isVerbose: args.verbose }),
@@ -88,6 +92,7 @@ export async function start(
       ...devServerOptions,
       rootDir: cliConfig.root,
       logRequests: showHttpRequests,
+      devMiddleware,
     },
     delegate: (ctx): Server.Delegate => {
       if (args.interactive) {