Update app template's metro config with latest upstream changes (#12279)

jonthysell · web-flow · commit 68094c0c5ffa · 2023-10-21T00:10:28.000Z
## Description 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. ### Type of Change - Bug fix (non-breaking change which fixes an issue) - Breaking change (fix or feature that would cause existing functionality to not work as expected) - ### Why To fix new apps not loading because of a badly configured bundle. Resolves: #12268 ### What Coped the current RN template metro.config.js and applied our changes. ## Screenshots N/A ## Testing Verified a new app loads correctly ## Changelog Should this change be included in the release notes: yes Update app template's metro config with latest upstream changes
diff --git a/change/react-native-windows-c4c4d87a-92df-4bee-b696-1445c7e5d6c7.json b/change/react-native-windows-c4c4d87a-92df-4bee-b696-1445c7e5d6c7.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "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
@@ -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
@@ -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
@@ -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);
