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

## 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

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"
+}

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);

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);

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);