Verify metro.config.js when start debugging (microsoft#2023)

Author: EzioLi01

src/common/reactNativeProjectHelper.ts

@@ -4,6 +4,7 @@
 import * as fs from "fs";
 import * as path from "path";
 import { ProjectVersionHelper } from "./projectVersionHelper";
+import { OutputChannelLogger } from "../extension/log/OutputChannelLogger";
 
 export interface ParsedPackage {
     packageName: string;
@@ -96,4 +97,22 @@ export class ReactNativeProjectHelper {
         );
         return hermesEnabled;
     }
+
+    public static async verifyMetroConfigFile(projectRoot: string) {
+        const logger = OutputChannelLogger.getChannel(OutputChannelLogger.MAIN_CHANNEL_NAME, true);
+        const version = await ProjectVersionHelper.getReactNativeVersions(projectRoot);
+        const metroConfigPath = path.join(projectRoot, "metro.config.js");
+        const content = fs.readFileSync(metroConfigPath, "utf-8");
+        const isNewMetroConfig = content.includes("getDefaultConfig");
+        if (parseInt(version.reactNativeVersion.substring(2, 4)) <= 72 && !isNewMetroConfig) {
+            logger.warning(
+                'The version of "metro.config.js" in current project will be deprecated from rn 0.73, please update your "metro.config.js" file according to template: https://github.com/facebook/react-native/blob/main/packages/react-native/template/metro.config.js',
+            );
+        } else if (parseInt(version.reactNativeVersion.substring(2, 4)) > 72 && !isNewMetroConfig) {
+            // As official mentioned, the new version of metro config will be required from 0.73, will enable this once the old version of config is totally disabled.
+            // throw new Error(
+            //     'The version of "metro.config.js" in current project is deprecated, please update your "metro.config.js" file according to template: https://github.com/facebook/react-native/blob/main/packages/react-native/template/metro.config.js',
+            // );
+        }
+    }
 }

src/debugger/direct/directDebugSession.ts

@@ -24,6 +24,7 @@ import { BaseCDPMessageHandler } from "../../cdp-proxy/CDPMessageHandlers/baseCD
 import { TipNotificationService } from "../../extension/services/tipsNotificationsService/tipsNotificationService";
 import { RNSession } from "../debugSessionWrapper";
 import { SettingsHelper } from "../../extension/settingsHelper";
+import { ReactNativeProjectHelper } from "../../common/reactNativeProjectHelper";
 import { IWDPHelper } from "./IWDPHelper";
 
 nls.config({
@@ -78,6 +79,7 @@ export class DirectDebugSession extends DebugSessionBase {
 
         try {
             try {
+                await ReactNativeProjectHelper.verifyMetroConfigFile(launchArgs.cwd);
                 await this.initializeSettings(launchArgs);
                 logger.log("Launching the application");
                 logger.verbose(`Launching the application: ${JSON.stringify(launchArgs, null, 2)}`);
@@ -139,6 +141,9 @@ export class DirectDebugSession extends DebugSessionBase {
         this.previousAttachArgs = attachArgs;
 
         try {
+            if (attachArgs.request === "attach") {
+                await ReactNativeProjectHelper.verifyMetroConfigFile(attachArgs.cwd);
+            }
             await this.initializeSettings(attachArgs);
 
             const packager = this.appLauncher.getPackager();

src/debugger/rnDebugSession.ts

@@ -21,6 +21,7 @@ import {
 } from "./debugSessionBase";
 import { JsDebugConfigAdapter } from "./jsDebugConfigAdapter";
 import { RNSession } from "./debugSessionWrapper";
+import { ReactNativeProjectHelper } from "../common/reactNativeProjectHelper";
 
 nls.config({
     messageFormat: nls.MessageFormat.bundle,
@@ -56,6 +57,7 @@ export class RNDebugSession extends DebugSessionBase {
     ): Promise<void> {
         try {
             try {
+                await ReactNativeProjectHelper.verifyMetroConfigFile(launchArgs.cwd);
                 await this.initializeSettings(launchArgs);
                 logger.log("Launching the application");
                 logger.verbose(`Launching the application: ${JSON.stringify(launchArgs, null, 2)}`);
@@ -98,6 +100,9 @@ export class RNDebugSession extends DebugSessionBase {
 
         return new Promise<void>(async (resolve, reject) => {
             try {
+                if (attachArgs.request === "attach") {
+                    await ReactNativeProjectHelper.verifyMetroConfigFile(attachArgs.cwd);
+                }
                 await this.initializeSettings(attachArgs);
                 logger.log("Attaching to the application");
                 logger.verbose(