This is an alternate metro bundler fix for multiple out of tree platforms

.ado/templates/e2e-test-job.yml

@@ -34,7 +34,7 @@ jobs:
       - task: CmdLine@2
         displayName: run-windows
         inputs:
-          script: react-native run-windows --no-packager --arch ${{ parameters.BuildPlatform }} --release --logging --msbuildprops BaseIntDir=$(BaseIntDir)
+          script: yarn windows --no-packager --arch ${{ parameters.BuildPlatform }} --release --logging --msbuildprops BaseIntDir=$(BaseIntDir)
           workingDirectory: packages/E2ETest
 
       - task: PublishBuildArtifacts@1

.ado/templates/react-native-init.yml

@@ -143,5 +143,5 @@ steps:
   - task: CmdLine@2
     displayName: Create bundle testcli
     inputs:
-      script: react-native bundle --entry-file index.js platform windows --bundle-output test.bundle
+      script: npx --no-install react-native bundle --entry-file index.js --platform windows --bundle-output test.bundle
       workingDirectory: $(Agent.BuildDirectory)\testcli

.ado/windows-vs-pr.yml

@@ -259,21 +259,21 @@ jobs:
       - task: CmdLine@2
         displayName: run-windows (Debug)
         inputs:
-          script: react-native run-windows --no-packager --no-launch --no-deploy --arch $(BuildPlatform) --logging --msbuildprops BaseIntDir=$(BaseIntDir)
+          script: yarn windows --no-packager --no-launch --no-deploy --arch $(BuildPlatform) --logging --msbuildprops BaseIntDir=$(BaseIntDir)
           workingDirectory: packages/microsoft-reactnative-sampleapps
         condition: and(succeeded(), eq(variables['BuildConfiguration'], 'Debug'))
 
       - task: CmdLine@2
         displayName: run-windows (Release)
         inputs:
-          script: react-native run-windows --no-packager --no-launch --no-deploy --arch $(BuildPlatform) --logging --release --msbuildprops BaseIntDir=$(BaseIntDir)
+          script: yarn windows --no-packager --no-launch --no-deploy --arch $(BuildPlatform) --logging --release --msbuildprops BaseIntDir=$(BaseIntDir)
           workingDirectory: packages/microsoft-reactnative-sampleapps
         condition: and(succeeded(), eq(variables['BuildConfiguration'], 'Release'))
 
       - task: CmdLine@2
         displayName: Create SampleApp bundle
         inputs:
-          script: node node_modules/react-native/local-cli/cli.js bundle --entry-file index.windows.js --bundle-output SampleApp.bundle
+          script: yarn bundle-cpp
           workingDirectory: packages\microsoft-reactnative-sampleapps
         condition: succeeded()
 

change/@office-iss-react-native-win32-2020-04-11-18-14-13-altmetrofix.json

@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "Use a custom resolver wrapper to allow metro to run for multiple platforms at once",
+  "packageName": "@office-iss/react-native-win32",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-04-12T01:14:10.605Z"
+}

change/react-native-windows-2020-04-11-18-14-13-altmetrofix.json

@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "Use a custom resolver wrapper to allow metro to run for multiple platforms at once",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-04-12T01:14:13.308Z"
+}

packages/E2ETest/metro.config.js

@@ -4,13 +4,9 @@
  *
  * @format
  */
-const fs = require('fs');
 const path = require('path');
 const blacklist = require('metro-config/src/defaults/blacklist');
 
-const rnPath = fs.realpathSync(
-  path.resolve(require.resolve('react-native/package.json'), '..')
-);
 const rnwPath = path.resolve(__dirname, '../../vnext');
 
 module.exports = {
@@ -23,35 +19,15 @@ module.exports = {
   ],
 
   resolver: {
+    resolveRequest: require('react-native-windows/metro-react-native-platform').reactNativePlatformResolver(
+      { windows: 'react-native-windows' }
+    ),
     extraNodeModules: {
       // Redirect metro to rnwPath instead of node_modules/react-native-windows, since metro doesn't like symlinks
-      'react-native': rnwPath,
       'react-native-windows': rnwPath,
     },
-    // Include the macos platform in addition to the defaults because the fork includes macos, but doesn't declare it
-    platforms: ['ios', 'android', 'windesktop', 'windows', 'web', 'macos'],
-    // Since there are multiple copies of react-native, we need to ensure that metro only sees one of them
-    // This should go away after RN 0.60 when haste is removed
     blacklistRE: blacklist([
       new RegExp('.*E2ETest/msbuild.*'.replace(/[/\\]/g, '\\/')), // Avoid error EBUSY: resource busy or locked, open 'D:\a\1\s\packages\E2ETest\msbuild.ProjectImports.zip' in pipeline
-      new RegExp(`${path.resolve(rnPath)}.*`.replace(/[/\\]/g, '/')),
-      new RegExp(
-        `${path.resolve(rnwPath, 'ReactCopies').replace(/[/\\]/g, '/')}.*`
-      ),
-      new RegExp(
-        `${path
-          .resolve(rnwPath, 'node_modules/react-native')
-          .replace(/[/\\]/g, '/')}.*`
-      ),
-      new RegExp(
-        `${path
-          .resolve(
-            require.resolve('@react-native-community/cli/package.json'),
-            '../node_modules/react-native'
-          )
-          .replace(/[/\\]/g, '/')}.*`
-      ),
-
       // This stops "react-native run-windows" from causing the metro server to crash if its already running
       new RegExp(
         `${path.resolve(__dirname, 'windows').replace(/[/\\]/g, '/')}.*`

packages/E2ETest/package.json

@@ -5,11 +5,11 @@
   "scripts": {
     "build": "just-scripts build",
     "clean": "just-scripts clean",
-    "postinstall": "node postinstall.js",
     "start": "react-native start",
     "lint": "just-scripts lint",
     "lint:fix": "just-scripts lint:fix",
     "watch": "tsc -w",
+    "windows": "react-native run-windows",
     "prettier": "prettier --write --loglevel warn \"**/**/*.ts\"",
     "e2e": "react-native run-windows --no-launch --logging && npm run e2etest",
     "e2ebundle": "npm run bundle && react-native run-windows --no-launch --no-packager --bundle --logging && npm run e2etest",

packages/microsoft-reactnative-sampleapps/metro.config.js

@@ -4,13 +4,9 @@
  *
  * @format
  */
-const fs = require('fs');
 const path = require('path');
 const blacklist = require('metro-config/src/defaults/blacklist');
 
-const rnPath = fs.realpathSync(
-  path.resolve(require.resolve('react-native/package.json'), '..'),
-);
 const rnwPath = path.resolve(__dirname, '../../vnext');
 
 module.exports = {
@@ -23,20 +19,19 @@ module.exports = {
   ],
 
   resolver: {
+    resolveRequest: require('react-native-windows/metro-react-native-platform').reactNativePlatformResolver(
+      {windows: 'react-native-windows'},
+    ),
     extraNodeModules: {
       // Redirect metro to rnwPath instead of node_modules/react-native-windows, since metro doesn't like symlinks
-      'react-native': rnwPath,
       'react-native-windows': rnwPath,
     },
-    // Include the macos platform in addition to the defaults because the fork includes macos, but doesn't declare it
-    platforms: ['ios', 'android', 'windesktop', 'windows', 'web', 'macos'],
     // Since there are multiple copies of react-native, we need to ensure that metro only sees one of them
     // This should go away after RN 0.60 when haste is removed
     blacklistRE: blacklist([
       new RegExp(
         '.*microsoft-reactnative-sampleapps/msbuild.*'.replace(/[/\\]/g, '\\/'),
       ), // Avoid error EBUSY: resource busy or locked, open 'D:\a\1\s\packages\E2ETest\msbuild.ProjectImports.zip' in pipeline
-      new RegExp(`${path.resolve(rnPath)}.*`.replace(/[/\\]/g, '/')),
       new RegExp(
         `${path.resolve(rnwPath, 'ReactCopies').replace(/[/\\]/g, '/')}.*`,
       ),
@@ -45,15 +40,6 @@ module.exports = {
           .resolve(rnwPath, 'node_modules/react-native')
           .replace(/[/\\]/g, '/')}.*`,
       ),
-      new RegExp(
-        `${path
-          .resolve(
-            require.resolve('@react-native-community/cli/package.json'),
-            '../node_modules/react-native',
-          )
-          .replace(/[/\\]/g, '/')}.*`,
-      ),
-
       // This stops "react-native run-windows" from causing the metro server to crash if its already running
       new RegExp(
         `${path.resolve(__dirname, 'windows').replace(/[/\\]/g, '/')}.*`,

packages/microsoft-reactnative-sampleapps/package.json

@@ -7,11 +7,11 @@
     "bundle-cpp": "just-scripts prepareBundle && react-native bundle --platform windows --entry-file index.windows.js --bundle-output windows/SampleAppCpp/Bundle/index.windows.bundle --assets-dest windows/SampleAppCpp/Bundle",
     "bundle-cs": "just-scripts prepareBundle && react-native bundle --platform windows --entry-file index.windows.js --bundle-output windows/SampleAppCS/Bundle/index.windows.bundle --assets-dest windows/SampleAppCS/Bundle",
     "clean": "just-scripts clean",
-    "postinstall": "node postinstall.js",
     "start": "react-native start",
     "lint": "just-scripts lint",
     "lint:fix": "just-scripts lint:fix",
-    "watch": "tsc -w"
+    "watch": "tsc -w",
+    "windows": "react-native run-windows"
   },
   "dependencies": {
     "react": "16.9.0",
@@ -28,4 +28,4 @@
     "metro-react-native-babel-preset": "^0.56.0",
     "react-test-renderer": "16.9.0"
   }
-}
+}

packages/playground/metro.config.js

@@ -8,9 +8,6 @@ const fs = require('fs');
 const path = require('path');
 const blacklist = require('metro-config/src/defaults/blacklist');
 
-const rnPath = fs.realpathSync(
-  path.resolve(require.resolve('react-native/package.json'), '..'),
-);
 const rnwPath = fs.realpathSync(
   path.resolve(require.resolve('react-native-windows/package.json'), '..'),
 );
@@ -25,20 +22,14 @@ module.exports = {
   ],
 
   resolver: {
+    resolveRequest: require('react-native-windows/metro-react-native-platform').reactNativePlatformResolver(
+      {windows: 'react-native-windows'},
+    ),
     extraNodeModules: {
-      // Redirect react-native to react-native-windows
-      'react-native': rnwPath,
+      // Redirect react-native-windows to avoid symlink (metro doesn't like symlinks)
       'react-native-windows': rnwPath,
     },
-    // Include the macos platform in addition to the defaults because the fork includes macos, but doesn't declare it
-    platforms: ['ios', 'android', 'windesktop', 'windows', 'web', 'macos'],
-    // Since there are multiple copies of react-native, we need to ensure that metro only sees one of them
-    // This should go in RN 0.61 when haste is removed
     blacklistRE: blacklist([
-      new RegExp(
-        `${(path.resolve(rnPath) + path.sep).replace(/[/\\]/g, '/')}.*`,
-      ),
-
       // This stops "react-native run-windows" from causing the metro server to crash if its already running
       new RegExp(
         `${path.resolve(__dirname, 'windows').replace(/[/\\]/g, '/')}.*`,

packages/react-native-win32/metro-react-native-platform.js

@@ -0,0 +1,41 @@
+/**
+ * @format
+ */
+const {resolve} = require('metro-resolver');
+
+/**
+ * platformImplementations is a map of platform to npm package that implements that platform
+ *
+ * Ex:
+ * {
+ *    windows: 'react-native-windows'
+ *    macos: 'react-native-macos'
+ * }
+ */
+function reactNativePlatformResolver(platformImplementations) {
+  return (context, _realModuleName, platform, moduleName) => {
+    let backupResolveRequest = context.resolveRequest;
+    delete context.resolveRequest;
+
+    try {
+      let modifiedModuleName = moduleName;
+      if (platformImplementations[platform]) {
+        if (moduleName === 'react-native') {
+          modifiedModuleName = platformImplementations[platform];
+        } else if (moduleName.startsWith('react-native/')) {
+          modifiedModuleName = `${
+            platformImplementations[platform]
+          }/${modifiedModuleName.slice('react-native/'.length)}`;
+        }
+      }
+      let result = resolve(context, modifiedModuleName, platform);
+      context.resolveRequest = backupResolveRequest;
+      return result;
+    } catch (e) {
+      context.resolveRequest = backupResolveRequest;
+      throw e;
+    }
+  };
+}
+
+module.exports = {reactNativePlatformResolver};