fix: does not override user-defined reporter (#2024)

Author: zhiqingchen

packages/cli-plugin-metro/src/commands/start/runServer.ts

@@ -6,6 +6,7 @@
  */
 
 import Metro from 'metro';
+import type {Reporter, ReportableEvent} from 'metro';
 import type Server from 'metro/src/Server';
 import type {Middleware} from 'metro-config';
 import {Terminal} from 'metro-core';
@@ -40,19 +41,6 @@ export type Args = {
 };
 
 async function runServer(_argv: Array<string>, ctx: Config, args: Args) {
-  let reportEvent: ((event: any) => void) | undefined;
-  const terminal = new Terminal(process.stdout);
-  const ReporterImpl = getReporterImpl(args.customLogReporterPath);
-  const terminalReporter = new ReporterImpl(terminal);
-  const reporter = {
-    update(event: any) {
-      terminalReporter.update(event);
-      if (reportEvent) {
-        reportEvent(event);
-      }
-    },
-  };
-
   const metroConfig = await loadMetroConfig(ctx, {
     config: args.config,
     maxWorkers: args.maxWorkers,
@@ -61,8 +49,14 @@ async function runServer(_argv: Array<string>, ctx: Config, args: Args) {
     watchFolders: args.watchFolders,
     projectRoot: args.projectRoot,
     sourceExts: args.sourceExts,
-    reporter,
   });
+  // if customLogReporterPath is provided, use the custom reporter, otherwise use the default one
+  let reporter: Reporter = metroConfig.reporter;
+  if (args.customLogReporterPath) {
+    const terminal = new Terminal(process.stdout);
+    const ReporterImpl = getReporterImpl(args.customLogReporterPath);
+    reporter = new ReporterImpl(terminal);
+  }
 
   if (args.assetPlugins) {
     // @ts-ignore - assigning to readonly property
@@ -95,16 +89,26 @@ async function runServer(_argv: Array<string>, ctx: Config, args: Args) {
     return middleware.use(metroMiddleware);
   };
 
-  const serverInstance = await Metro.runServer(metroConfig, {
-    host: args.host,
-    secure: args.https,
-    secureCert: args.cert,
-    secureKey: args.key,
-    // @ts-ignore - ws.Server types are incompatible
-    websocketEndpoints,
-  });
-
-  reportEvent = eventsSocketEndpoint.reportEvent;
+  const serverInstance = await Metro.runServer(
+    {
+      ...metroConfig,
+      reporter: {
+        update(event: ReportableEvent) {
+          reporter.update(event);
+          // Add reportEvent to the reporter update method.
+          eventsSocketEndpoint.reportEvent(event);
+        },
+      },
+    },
+    {
+      host: args.host,
+      secure: args.https,
+      secureCert: args.cert,
+      secureKey: args.key,
+      // @ts-ignore - ws.Server types are incompatible
+      websocketEndpoints,
+    },
+  );
 
   if (args.interactive) {
     enableWatchMode(messageSocketEndpoint, ctx);
@@ -125,10 +129,7 @@ async function runServer(_argv: Array<string>, ctx: Config, args: Args) {
   await version.logIfUpdateAvailable(ctx.root);
 }
 
-function getReporterImpl(customLogReporterPath: string | undefined) {
-  if (customLogReporterPath === undefined) {
-    return require('metro/src/lib/TerminalReporter');
-  }
+function getReporterImpl(customLogReporterPath: string) {
   try {
     // First we let require resolve it, so we can require packages in node_modules
     // as expected. eg: require('my-package/reporter');

packages/cli-plugin-metro/src/tools/loadMetroConfig.ts

@@ -6,6 +6,7 @@ import {
   mergeConfig,
   resolveConfig,
   ResolverConfigT,
+  YargArguments,
 } from 'metro-config';
 import {CLIError, logger} from '@react-native-community/cli-tools';
 import type {Config} from '@react-native-community/cli-types';
@@ -66,17 +67,6 @@ function getOverrideConfig(ctx: ConfigLoadingContext): InputConfigT {
   };
 }
 
-export interface ConfigOptionsT {
-  maxWorkers?: number;
-  port?: number;
-  projectRoot?: string;
-  resetCache?: boolean;
-  watchFolders?: string[];
-  sourceExts?: string[];
-  reporter?: any;
-  config?: string;
-}
-
 /**
  * Load Metro config.
  *
@@ -85,12 +75,9 @@ export interface ConfigOptionsT {
  */
 export default async function loadMetroConfig(
   ctx: ConfigLoadingContext,
-  options: ConfigOptionsT = {},
+  options: YargArguments = {},
 ): Promise<ConfigT> {
   const overrideConfig = getOverrideConfig(ctx);
-  if (options.reporter) {
-    overrideConfig.reporter = options.reporter;
-  }
 
   const cwd = ctx.root;
   const projectConfig = await resolveConfig(options.config, cwd);