From a58d8a60860004f9a9b1ae8275aded7e4c65aa39 Mon Sep 17 00:00:00 2001
From: "Jon Thysell (JAUNTY)" <jthysell@microsoft.com>
Date: Fri, 20 Oct 2023 16:24:24 -0700
Subject: [PATCH] [0.73] Update app template's metro config with latest
 upstream changes

This PR backports #12279 to 0.73.

This PR applies the changes we need to an app's metro config on top of a
more recent snap of the default metro config for an RN app.

Resolves: #12268
---
 ...-c4c4d87a-92df-4bee-b696-1445c7e5d6c7.json |  7 +++++++
 vnext/template/metro.config.js                | 19 ++++++++++-------
 vnext/template/metro.devMode.config.js        | 21 ++++++++++++-------
 vnext/templates/cpp-app/metro.config.js       | 19 ++++++++++-------
 4 files changed, 45 insertions(+), 21 deletions(-)
 create mode 100644 change/react-native-windows-c4c4d87a-92df-4bee-b696-1445c7e5d6c7.json

diff --git a/change/react-native-windows-c4c4d87a-92df-4bee-b696-1445c7e5d6c7.json b/change/react-native-windows-c4c4d87a-92df-4bee-b696-1445c7e5d6c7.json
new file mode 100644
index 00000000000..5c2d2359965
--- /dev/null
+++ b/change/react-native-windows-c4c4d87a-92df-4bee-b696-1445c7e5d6c7.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "[0.73] Update app template's metro config with latest upstream changes",
+  "packageName": "react-native-windows",
+  "email": "jthysell@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/vnext/template/metro.config.js b/vnext/template/metro.config.js
index 7cab9f209e6..155cc81b72e 100644
--- a/vnext/template/metro.config.js
+++ b/vnext/template/metro.config.js
@@ -1,9 +1,5 @@
-/**
- * Metro configuration for React Native
- * https://github.com/facebook/react-native
- *
- * @format
- */
+const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
+
 const fs = require('fs');
 const path = require('path');
 const exclusionList = require('metro-config/src/defaults/exclusionList');
@@ -12,7 +8,14 @@ const rnwPath = fs.realpathSync(
   path.resolve(require.resolve('react-native-windows/package.json'), '..'),
 );
 
-module.exports = {
+/**
+ * Metro configuration
+ * https://facebook.github.io/metro/docs/configuration
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+
+const config = {
   resolver: {
     blockList: exclusionList([
       // This stops "react-native run-windows" from causing the metro server to crash if its already running
@@ -36,3 +39,5 @@ module.exports = {
     assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry',
   },
 };
+
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);
diff --git a/vnext/template/metro.devMode.config.js b/vnext/template/metro.devMode.config.js
index 182d26f83d6..903bb117085 100644
--- a/vnext/template/metro.devMode.config.js
+++ b/vnext/template/metro.devMode.config.js
@@ -1,9 +1,5 @@
-/**
- * Metro configuration for React Native
- * https://github.com/facebook/react-native
- *
- * @format
- */
+const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
+
 const fs = require('fs');
 const path = require('path');
 const exclusionList = require('metro-config/src/defaults/exclusionList');
@@ -17,7 +13,14 @@ const rnwRootNodeModules = path.resolve(rnwPath, '..', 'node_modules');
 const rnwPackages = path.resolve(rnwPath, '..', 'packages');
 // devMode]
 
-module.exports = {
+/**
+ * Metro configuration
+ * https://facebook.github.io/metro/docs/configuration
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+
+const config = {
   // [devMode
   watchFolders: [rnwPath, rnwRootNodeModules, rnwPackages],
   // devMode]
@@ -45,5 +48,9 @@ module.exports = {
         inlineRequires: true,
       },
     }),
+    // This fixes the 'missing-asset-registry-path` error (see https://github.com/microsoft/react-native-windows/issues/11437)
+    assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry',
   },
 };
+
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);
diff --git a/vnext/templates/cpp-app/metro.config.js b/vnext/templates/cpp-app/metro.config.js
index 081607cec21..f5e6fd068c8 100644
--- a/vnext/templates/cpp-app/metro.config.js
+++ b/vnext/templates/cpp-app/metro.config.js
@@ -1,9 +1,5 @@
-/**
- * Metro configuration for React Native
- * https://github.com/facebook/react-native
- *
- * @format
- */
+const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
+
 const fs = require('fs');
 const path = require('path');
 const exclusionList = require('metro-config/src/defaults/exclusionList');
@@ -17,7 +13,14 @@ const rnwRootNodeModules = path.resolve(rnwPath, '..', 'node_modules');
 const rnwPackages = path.resolve(rnwPath, '..', 'packages');
 // devMode]{{/devMode}}
 
-module.exports = {
+/**
+ * Metro configuration
+ * https://facebook.github.io/metro/docs/configuration
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+
+const config = {
   //{{#devMode}} [devMode
   watchFolders: [rnwPath, rnwRootNodeModules, rnwPackages],
   // devMode]{{/devMode}}
@@ -49,3 +52,5 @@ module.exports = {
     assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry',
   },
 };
+
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);