fix: example apps metro paths (#2511)

# Summary

Fixes paths in Metro config

apps/fabric-example/metro.config.js

@@ -2,19 +2,16 @@ const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
 
 /**
  * Metro configuration
- * https://facebook.github.io/metro/docs/configuration
+ * https://reactnative.dev/docs/metro
  *
  * @type {import('metro-config').MetroConfig}
  */
-
-/* eslint-disable import/no-commonjs */
-
 const path = require('path');
 const exclusionList = require('metro-config/src/defaults/exclusionList');
 const escape = require('escape-string-regexp');
-const pack = require('../package.json');
+const pack = require('../../package.json');
 
-const root = path.resolve(__dirname, '..');
+const root = path.resolve(__dirname, '../..');
 const projectNodeModules = path.join(__dirname, 'node_modules');
 
 const modules = [...Object.keys(pack.peerDependencies)];

apps/fabric-macos-example/metro.config.js

@@ -9,9 +9,9 @@ const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
 const path = require('path');
 const exclusionList = require('metro-config/src/defaults/exclusionList');
 
-const pack = require('../package.json');
+const pack = require('../../package.json');
 
-const root = path.resolve(__dirname, '..');
+const root = path.resolve(__dirname, '../..');
 const projectNodeModules = path.join(__dirname, 'node_modules');
 
 const modules = [...Object.keys(pack.peerDependencies), 'react-native-macos'];

apps/fabric-windows-example/metro.config.js

@@ -1,4 +1,4 @@
-const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
 
 /**
  * Metro configuration
@@ -9,14 +9,14 @@ const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
 const path = require('path');
 const exclusionList = require('metro-config/src/defaults/exclusionList');
 const escape = require('escape-string-regexp');
-const pack = require('../package.json');
+const pack = require('../../package.json');
 
-const root = path.resolve(__dirname, '..');
+const root = path.resolve(__dirname, '../..');
 const projectNodeModules = path.join(__dirname, 'node_modules');
 
 const fs = require('fs');
 const rnwPath = fs.realpathSync(
-  path.resolve(require.resolve('react-native-windows/package.json'), '..')
+  path.resolve(require.resolve('react-native-windows/package.json'), '..'),
 );
 
 const modules = [...Object.keys(pack.peerDependencies), 'react-native-windows'];
@@ -30,16 +30,17 @@ const config = {
   resolver: {
     blockList: exclusionList(
       modules.map(
-        (m) =>
+        m => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`),
-          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
       ),
       // This stops "react-native run-windows" from causing the metro server to
       // crash if its already running
-      new RegExp(`${path.join(__dirname, 'windows').replace(/[/\\]+/g, '/')}.*`),
+      new RegExp(
+        `${path.join(__dirname, 'windows').replace(/[/\\]+/g, '/')}.*`,
+      ),
       // This prevents "react-native run-windows" from hitting: EBUSY: resource busy or locked, open msbuild.ProjectImports.zip or other files produced by msbuild
       new RegExp(`${rnwPath}/build/.*`),
       new RegExp(`${rnwPath}/target/.*`),
-      /.*\.ProjectImports\.zip/
+      /.*\.ProjectImports\.zip/,
     ),
     nodeModulesPaths: [projectNodeModules, path.join(__dirname, '../../')],
     extraNodeModules: modules.reduce((acc, name) => {

apps/paper-macos-example/metro.config.js

@@ -11,7 +11,7 @@ const exclusionList = require('metro-config/src/defaults/exclusionList');
 
 const pack = require('../../package.json');
 
-const root = path.resolve(__dirname, '..');
+const root = path.resolve(__dirname, '../..');
 const projectNodeModules = path.join(__dirname, 'node_modules');
 
 const modules = [...Object.keys(pack.peerDependencies), 'react-native-macos'];

apps/paper-windows-example/metro.config.js

@@ -9,9 +9,9 @@ const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
 const path = require('path');
 const exclusionList = require('metro-config/src/defaults/exclusionList');
 const escape = require('escape-string-regexp');
-const pack = require('../package.json');
+const pack = require('../../package.json');
 
-const root = path.resolve(__dirname, '..');
+const root = path.resolve(__dirname, '../..');
 const projectNodeModules = path.join(__dirname, 'node_modules');
 
 const fs = require('fs');

apps/tests-example/metro.config.js

@@ -6,14 +6,12 @@ const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
  *
  * @type {import('metro-config').MetroConfig}
  */
-/* eslint-disable import/no-commonjs */
-
 const path = require('path');
 const exclusionList = require('metro-config/src/defaults/exclusionList');
 const escape = require('escape-string-regexp');
-const pack = require('../package.json');
+const pack = require('../../package.json');
 
-const root = path.resolve(__dirname, '..');
+const root = path.resolve(__dirname, '../..');
 const projectNodeModules = path.join(__dirname, 'node_modules');
 
 const modules = [...Object.keys(pack.peerDependencies)];
@@ -32,19 +30,17 @@ const config = {
       )
     ),
     nodeModulesPaths: [projectNodeModules, path.join(__dirname, '../../')],
-    extraNodeModules: modules.reduce(
+    extraNodeModules: modules.reduce((acc, name) => {
-      (acc, name) => {
+      acc[name] = path.join(__dirname, 'node_modules', name);
-        acc[name] = path.join(__dirname, 'node_modules', name);
+      return acc;
-        return acc;
+    }, {}),
-      },
-      { 'react-native-svg': `${__dirname}/../` }
-    ),
   },
 
   transformer: {
     getTransformOptions: async () => ({
       transform: {
         experimentalImportSupport: false,
+        inlineRequires: true,
       },
     }),
   },

apps/web-example/metro.config.js

@@ -9,16 +9,16 @@ const config = getDefaultConfig(__dirname);
 // excludes the one from the parent folder when bundling.
 config.resolver.blockList = [
   ...Array.from(config.resolver.blockList ?? []),
-  new RegExp(path.resolve('..', 'node_modules', 'react-native')),
+  new RegExp(path.resolve('../..', 'node_modules', 'react-native')),
-  new RegExp(path.resolve('..', 'node_modules', 'react')),
+  new RegExp(path.resolve('../..', 'node_modules', 'react')),
 ];
 
 config.resolver.nodeModulesPaths = [
   path.resolve(__dirname, './node_modules'),
-  path.resolve(__dirname, '../node_modules'),
+  path.resolve(__dirname, '../../node_modules'),
 ];
 
-config.watchFolders = [path.resolve(__dirname, '..')];
+config.watchFolders = [path.resolve(__dirname, '../..')];
 
 config.transformer.getTransformOptions = async () => ({
   transform: {