From 3433374d442c7912d056653cb67df89257d686a0 Mon Sep 17 00:00:00 2001 From: "Andrew Coates (REDMOND)" Date: Sat, 11 Apr 2020 18:13:50 -0700 Subject: [PATCH 1/7] Use a custom resolver wrapper to allow metro to run for multiple platforms at once --- packages/E2ETest/metro.config.js | 9 ++-- .../metro.config.js | 10 ++--- packages/playground/metro.config.js | 15 +++---- .../metro-react-native-platform.js | 41 +++++++++++++++++++ packages/react-native-win32/metro.config.js | 22 +++------- .../templates/metro.config.js | 25 ++--------- vnext/metro-react-native-platform.js | 41 +++++++++++++++++++ vnext/metro.config.js | 6 ++- 8 files changed, 107 insertions(+), 62 deletions(-) create mode 100644 packages/react-native-win32/metro-react-native-platform.js create mode 100644 vnext/metro-react-native-platform.js diff --git a/packages/E2ETest/metro.config.js b/packages/E2ETest/metro.config.js index fbeeed5942a..9baece42df1 100644 --- a/packages/E2ETest/metro.config.js +++ b/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,9 +19,11 @@ 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 @@ -34,7 +32,6 @@ module.exports = { // 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, '/')}.*` ), diff --git a/packages/microsoft-reactnative-sampleapps/metro.config.js b/packages/microsoft-reactnative-sampleapps/metro.config.js index fd0f93293e9..467bddafaf9 100644 --- a/packages/microsoft-reactnative-sampleapps/metro.config.js +++ b/packages/microsoft-reactnative-sampleapps/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 = path.resolve(__dirname, '../../vnext'); module.exports = { @@ -23,20 +20,21 @@ 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'], + platforms: ['ios', 'android', 'windows'], // 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, '/')}.*`, ), diff --git a/packages/playground/metro.config.js b/packages/playground/metro.config.js index f019392ca1c..6eb0e878062 100644 --- a/packages/playground/metro.config.js +++ b/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,18 @@ 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'], + platforms: ['ios', 'android', 'windows'], // 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, '/')}.*`, diff --git a/packages/react-native-win32/metro-react-native-platform.js b/packages/react-native-win32/metro-react-native-platform.js new file mode 100644 index 00000000000..c908a32c52c --- /dev/null +++ b/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}; diff --git a/packages/react-native-win32/metro.config.js b/packages/react-native-win32/metro.config.js index 6b24f49cc0c..f4112419038 100644 --- a/packages/react-native-win32/metro.config.js +++ b/packages/react-native-win32/metro.config.js @@ -5,11 +5,6 @@ const fs = require('fs'); const path = require('path'); const blacklist = require('metro-config/src/defaults/blacklist'); -const rnPath = fs.realpathSync( - fs.realpathSync( - path.resolve(require.resolve('react-native/package.json'), '..'), - ), -); const rnw32Path = __dirname; module.exports = { @@ -20,25 +15,18 @@ module.exports = { ], resolver: { + resolveRequest: require('./metro-react-native-platform').reactNativePlatformResolver( + {win32: '@office-iss/react-native-win32'}, + ), extraNodeModules: { - // Redirect react-native and react-native-windows to this folder - 'react-native': rnw32Path, + // Redirect react-native-windows to actual path to avoid symlink 'react-native-win32': rnw32Path, }, // 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', - 'win32', - ], + platforms: ['ios', 'android', 'win32'], // 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.61 when haste is removed blacklistRE: blacklist([ - new RegExp(`${path.resolve(rnPath).replace(/[/\\]/g, '/')}.*`), new RegExp( `${path .resolve( diff --git a/vnext/local-cli/generator-windows/templates/metro.config.js b/vnext/local-cli/generator-windows/templates/metro.config.js index 2ed937d5378..73327f35eb0 100644 --- a/vnext/local-cli/generator-windows/templates/metro.config.js +++ b/vnext/local-cli/generator-windows/templates/metro.config.js @@ -4,33 +4,16 @@ * * @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 = fs.realpathSync( - path.resolve(require.resolve('react-native-windows/package.json'), '..'), -); - module.exports = { resolver: { - extraNodeModules: { - // Redirect react-native to react-native-windows - '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 in RN 0.61 when haste is removed + resolveRequest: require('react-native-windows/metro-react-native-platform').reactNativePlatformResolver( + {windows: 'react-native-windows'}, + ), + platforms: ['ios', 'android', 'windows'], 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, '/')}.*`, diff --git a/vnext/metro-react-native-platform.js b/vnext/metro-react-native-platform.js new file mode 100644 index 00000000000..c908a32c52c --- /dev/null +++ b/vnext/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}; diff --git a/vnext/metro.config.js b/vnext/metro.config.js index fc58dcd5d72..dbc0b300075 100644 --- a/vnext/metro.config.js +++ b/vnext/metro.config.js @@ -20,9 +20,11 @@ module.exports = { ], resolver: { + resolveRequest: require('./metro-react-native-platform').reactNativePlatformResolver( + {windows: 'react-native-windows'}, + ), extraNodeModules: { - // Redirect react-native and react-native-windows to this folder - 'react-native': rnwPath, + // Redirect react-native-windows to this folder 'react-native-windows': rnwPath, }, // Include the macos platform in addition to the defaults because the fork includes macos, but doesn't declare it From c7b6a18bb1d5ca6d51138c45e50fc6dbf688d8e4 Mon Sep 17 00:00:00 2001 From: "Andrew Coates (REDMOND)" Date: Sat, 11 Apr 2020 18:14:13 -0700 Subject: [PATCH 2/7] Change files --- ...eact-native-win32-2020-04-11-18-14-13-altmetrofix.json | 8 ++++++++ ...ct-native-windows-2020-04-11-18-14-13-altmetrofix.json | 8 ++++++++ 2 files changed, 16 insertions(+) create mode 100644 change/@office-iss-react-native-win32-2020-04-11-18-14-13-altmetrofix.json create mode 100644 change/react-native-windows-2020-04-11-18-14-13-altmetrofix.json diff --git a/change/@office-iss-react-native-win32-2020-04-11-18-14-13-altmetrofix.json b/change/@office-iss-react-native-win32-2020-04-11-18-14-13-altmetrofix.json new file mode 100644 index 00000000000..61ddd7837d3 --- /dev/null +++ b/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": "acoates@microsoft.com", + "dependentChangeType": "patch", + "date": "2020-04-12T01:14:10.605Z" +} \ No newline at end of file diff --git a/change/react-native-windows-2020-04-11-18-14-13-altmetrofix.json b/change/react-native-windows-2020-04-11-18-14-13-altmetrofix.json new file mode 100644 index 00000000000..6921395fd90 --- /dev/null +++ b/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": "acoates@microsoft.com", + "dependentChangeType": "patch", + "date": "2020-04-12T01:14:13.308Z" +} \ No newline at end of file From 4cc1ca2454c9aa7c162e6a6af04f17ec29a2e18e Mon Sep 17 00:00:00 2001 From: "Andrew Coates (REDMOND)" Date: Tue, 14 Apr 2020 08:14:01 -0700 Subject: [PATCH 3/7] More simplification of metro configs --- packages/E2ETest/metro.config.js | 21 ---------- packages/E2ETest/package.json | 1 - packages/E2ETest/postinstall.js | 42 ------------------- .../metro.config.js | 12 ------ .../package.json | 1 - .../postinstall.js | 42 ------------------- packages/playground/metro.config.js | 4 -- packages/react-native-win32/metro.config.js | 21 ---------- .../templates/metro.config.js | 1 - vnext/metro.config.js | 16 ------- 10 files changed, 161 deletions(-) delete mode 100644 packages/E2ETest/postinstall.js delete mode 100644 packages/microsoft-reactnative-sampleapps/postinstall.js diff --git a/packages/E2ETest/metro.config.js b/packages/E2ETest/metro.config.js index 9baece42df1..a73508a7e14 100644 --- a/packages/E2ETest/metro.config.js +++ b/packages/E2ETest/metro.config.js @@ -26,29 +26,8 @@ module.exports = { // Redirect metro to rnwPath instead of node_modules/react-native-windows, since 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 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(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, '/')}.*` diff --git a/packages/E2ETest/package.json b/packages/E2ETest/package.json index c7e6014acfb..328267d83fc 100644 --- a/packages/E2ETest/package.json +++ b/packages/E2ETest/package.json @@ -5,7 +5,6 @@ "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", diff --git a/packages/E2ETest/postinstall.js b/packages/E2ETest/postinstall.js deleted file mode 100644 index ea656da5b18..00000000000 --- a/packages/E2ETest/postinstall.js +++ /dev/null @@ -1,42 +0,0 @@ -/** - * The react-native cli getPlugins assumes that all the react-native platform packages - * are located in node_modules. - * - * When in a yarn workspace, the react-native platforms can be hoisted, so we need to - * add a link to the real location so that getPlugins works correctly. - * - * @format - * - */ -// @ts-check - -const fs = require('fs'); -const path = require('path'); -const os = require('os'); - -const checkOrCreate_node_modules = () => { - const p = path.join(__dirname, 'node_modules'); - - if (!fs.existsSync(p)) { - fs.mkdirSync(p); - } -}; -checkOrCreate_node_modules(); - -const link = (name, target) => { - const p = path.join(__dirname, 'node_modules', name); - - if (!fs.existsSync(p)) { - fs.symlinkSync(target, p, os.platform() === 'win32' ? 'junction' : 'dir'); - } -}; - -link('react-native-windows', path.resolve(__dirname, '../../vnext')); -link( - 'react-native', - path.resolve(require.resolve('react-native/package.json'), '..'), -); -link( - 'rnpm-plugin-windows', - path.resolve(require.resolve('rnpm-plugin-windows/package.json'), '..'), -); diff --git a/packages/microsoft-reactnative-sampleapps/metro.config.js b/packages/microsoft-reactnative-sampleapps/metro.config.js index 467bddafaf9..06614661e3f 100644 --- a/packages/microsoft-reactnative-sampleapps/metro.config.js +++ b/packages/microsoft-reactnative-sampleapps/metro.config.js @@ -4,7 +4,6 @@ * * @format */ -const fs = require('fs'); const path = require('path'); const blacklist = require('metro-config/src/defaults/blacklist'); @@ -27,8 +26,6 @@ module.exports = { // Redirect metro to rnwPath instead of node_modules/react-native-windows, since 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', 'windows'], // 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([ @@ -43,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, '/')}.*`, diff --git a/packages/microsoft-reactnative-sampleapps/package.json b/packages/microsoft-reactnative-sampleapps/package.json index 41cb01c0acd..9f581fe6438 100644 --- a/packages/microsoft-reactnative-sampleapps/package.json +++ b/packages/microsoft-reactnative-sampleapps/package.json @@ -7,7 +7,6 @@ "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", diff --git a/packages/microsoft-reactnative-sampleapps/postinstall.js b/packages/microsoft-reactnative-sampleapps/postinstall.js deleted file mode 100644 index ea656da5b18..00000000000 --- a/packages/microsoft-reactnative-sampleapps/postinstall.js +++ /dev/null @@ -1,42 +0,0 @@ -/** - * The react-native cli getPlugins assumes that all the react-native platform packages - * are located in node_modules. - * - * When in a yarn workspace, the react-native platforms can be hoisted, so we need to - * add a link to the real location so that getPlugins works correctly. - * - * @format - * - */ -// @ts-check - -const fs = require('fs'); -const path = require('path'); -const os = require('os'); - -const checkOrCreate_node_modules = () => { - const p = path.join(__dirname, 'node_modules'); - - if (!fs.existsSync(p)) { - fs.mkdirSync(p); - } -}; -checkOrCreate_node_modules(); - -const link = (name, target) => { - const p = path.join(__dirname, 'node_modules', name); - - if (!fs.existsSync(p)) { - fs.symlinkSync(target, p, os.platform() === 'win32' ? 'junction' : 'dir'); - } -}; - -link('react-native-windows', path.resolve(__dirname, '../../vnext')); -link( - 'react-native', - path.resolve(require.resolve('react-native/package.json'), '..'), -); -link( - 'rnpm-plugin-windows', - path.resolve(require.resolve('rnpm-plugin-windows/package.json'), '..'), -); diff --git a/packages/playground/metro.config.js b/packages/playground/metro.config.js index 6eb0e878062..14ffc7e0e10 100644 --- a/packages/playground/metro.config.js +++ b/packages/playground/metro.config.js @@ -29,10 +29,6 @@ module.exports = { // 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', 'windows'], - // 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([ // This stops "react-native run-windows" from causing the metro server to crash if its already running new RegExp( diff --git a/packages/react-native-win32/metro.config.js b/packages/react-native-win32/metro.config.js index f4112419038..86e6466979c 100644 --- a/packages/react-native-win32/metro.config.js +++ b/packages/react-native-win32/metro.config.js @@ -3,9 +3,6 @@ */ const fs = require('fs'); const path = require('path'); -const blacklist = require('metro-config/src/defaults/blacklist'); - -const rnw32Path = __dirname; module.exports = { // WatchFolders is only needed due to the yarn workspace layout of node_modules, we need to watch the symlinked locations separately @@ -18,24 +15,6 @@ module.exports = { resolveRequest: require('./metro-react-native-platform').reactNativePlatformResolver( {win32: '@office-iss/react-native-win32'}, ), - extraNodeModules: { - // Redirect react-native-windows to actual path to avoid symlink - 'react-native-win32': rnw32Path, - }, - // Include the macos platform in addition to the defaults because the fork includes macos, but doesn't declare it - platforms: ['ios', 'android', 'win32'], - // 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.61 when haste is removed - blacklistRE: blacklist([ - new RegExp( - `${path - .resolve( - require.resolve('@react-native-community/cli/package.json'), - '../node_modules/react-native', - ) - .replace(/[/\\]/g, '/')}.*`, - ), - ]), }, transformer: { getTransformOptions: async () => ({ diff --git a/vnext/local-cli/generator-windows/templates/metro.config.js b/vnext/local-cli/generator-windows/templates/metro.config.js index 73327f35eb0..75335cc35fe 100644 --- a/vnext/local-cli/generator-windows/templates/metro.config.js +++ b/vnext/local-cli/generator-windows/templates/metro.config.js @@ -12,7 +12,6 @@ module.exports = { resolveRequest: require('react-native-windows/metro-react-native-platform').reactNativePlatformResolver( {windows: 'react-native-windows'}, ), - platforms: ['ios', 'android', 'windows'], blacklistRE: blacklist([ // This stops "react-native run-windows" from causing the metro server to crash if its already running new RegExp( diff --git a/vnext/metro.config.js b/vnext/metro.config.js index dbc0b300075..45fc54df7ed 100644 --- a/vnext/metro.config.js +++ b/vnext/metro.config.js @@ -5,11 +5,6 @@ const fs = require('fs'); const path = require('path'); const blacklist = require('metro-config/src/defaults/blacklist'); -const rnPath = fs.realpathSync( - fs.realpathSync( - path.resolve(require.resolve('react-native/package.json'), '..'), - ), -); const rnwPath = __dirname; module.exports = { @@ -27,23 +22,12 @@ module.exports = { // Redirect react-native-windows to this folder '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.61 when haste is removed blacklistRE: blacklist([ - new RegExp(`${path.resolve(rnPath).replace(/[/\\]/g, '/')}.*`), new RegExp( `${path.resolve(rnwPath, 'ReactCopies').replace(/[/\\]/g, '/')}.*`, ), - new RegExp( - `${path - .resolve( - require.resolve('@react-native-community/cli/package.json'), - '../node_modules/react-native', - ) - .replace(/[/\\]/g, '/')}.*`, - ), ]), }, transformer: { From 29e80dfe0e7110d09679c728334d144961961572 Mon Sep 17 00:00:00 2001 From: "Andrew Coates (REDMOND)" Date: Tue, 14 Apr 2020 08:42:16 -0700 Subject: [PATCH 4/7] CI fixes --- .ado/templates/e2e-test-job.yml | 2 +- .ado/windows-vs-pr.yml | 6 +++--- packages/E2ETest/package.json | 1 + packages/microsoft-reactnative-sampleapps/package.json | 5 +++-- vnext/metro.config.js | 5 ++++- 5 files changed, 12 insertions(+), 7 deletions(-) diff --git a/.ado/templates/e2e-test-job.yml b/.ado/templates/e2e-test-job.yml index e31b4037136..3a5db9bf358 100644 --- a/.ado/templates/e2e-test-job.yml +++ b/.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 diff --git a/.ado/windows-vs-pr.yml b/.ado/windows-vs-pr.yml index 2ac41dde3bd..c38b149984a 100644 --- a/.ado/windows-vs-pr.yml +++ b/.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() diff --git a/packages/E2ETest/package.json b/packages/E2ETest/package.json index 328267d83fc..7ece638e6fa 100644 --- a/packages/E2ETest/package.json +++ b/packages/E2ETest/package.json @@ -9,6 +9,7 @@ "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", diff --git a/packages/microsoft-reactnative-sampleapps/package.json b/packages/microsoft-reactnative-sampleapps/package.json index 9f581fe6438..2dc825073b1 100644 --- a/packages/microsoft-reactnative-sampleapps/package.json +++ b/packages/microsoft-reactnative-sampleapps/package.json @@ -10,7 +10,8 @@ "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", @@ -27,4 +28,4 @@ "metro-react-native-babel-preset": "^0.56.0", "react-test-renderer": "16.9.0" } -} +} \ No newline at end of file diff --git a/vnext/metro.config.js b/vnext/metro.config.js index 45fc54df7ed..2c2865baff6 100644 --- a/vnext/metro.config.js +++ b/vnext/metro.config.js @@ -16,7 +16,10 @@ module.exports = { resolver: { resolveRequest: require('./metro-react-native-platform').reactNativePlatformResolver( - {windows: 'react-native-windows'}, + { + windesktop: 'react-native-windows', + windows: 'react-native-windows', + }, ), extraNodeModules: { // Redirect react-native-windows to this folder From f29da7af33a13ff9f69f8189934db86a08932994 Mon Sep 17 00:00:00 2001 From: "Andrew Coates (REDMOND)" Date: Tue, 14 Apr 2020 09:22:11 -0700 Subject: [PATCH 5/7] Fix bundle command on init app to properly use windows platform --- .ado/templates/react-native-init.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.ado/templates/react-native-init.yml b/.ado/templates/react-native-init.yml index 500e00e3f74..ef409391898 100644 --- a/.ado/templates/react-native-init.yml +++ b/.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 From 3a965e0d864c52d3b3203a5346a142c800e0c73c Mon Sep 17 00:00:00 2001 From: "Andrew Coates (REDMOND)" Date: Tue, 14 Apr 2020 12:16:08 -0700 Subject: [PATCH 6/7] More simplification of metro configs --- .../microsoft-reactnative-sampleapps/metro.config.js | 10 ---------- vnext/metro.config.js | 7 ------- 2 files changed, 17 deletions(-) diff --git a/packages/microsoft-reactnative-sampleapps/metro.config.js b/packages/microsoft-reactnative-sampleapps/metro.config.js index 06614661e3f..7a7d1e6f578 100644 --- a/packages/microsoft-reactnative-sampleapps/metro.config.js +++ b/packages/microsoft-reactnative-sampleapps/metro.config.js @@ -26,20 +26,10 @@ module.exports = { // Redirect metro to rnwPath instead of node_modules/react-native-windows, since metro doesn't like symlinks 'react-native-windows': rnwPath, }, - // 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(rnwPath, 'ReactCopies').replace(/[/\\]/g, '/')}.*`, - ), - new RegExp( - `${path - .resolve(rnwPath, '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, '/')}.*`, diff --git a/vnext/metro.config.js b/vnext/metro.config.js index 2c2865baff6..767bb59443c 100644 --- a/vnext/metro.config.js +++ b/vnext/metro.config.js @@ -25,13 +25,6 @@ module.exports = { // Redirect react-native-windows to this folder 'react-native-windows': rnwPath, }, - // 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.61 when haste is removed - blacklistRE: blacklist([ - new RegExp( - `${path.resolve(rnwPath, 'ReactCopies').replace(/[/\\]/g, '/')}.*`, - ), - ]), }, transformer: { getTransformOptions: async () => ({ From 00f1f97a78506f15acaeb6ac5dc32672a1d6fd0c Mon Sep 17 00:00:00 2001 From: "Andrew Coates (REDMOND)" Date: Wed, 15 Apr 2020 13:47:46 -0700 Subject: [PATCH 7/7] Fix asset loading --- packages/E2ETest/metro.config.js | 3 +++ packages/microsoft-reactnative-sampleapps/metro.config.js | 3 +++ packages/playground/metro.config.js | 3 +++ packages/playground/react-native.config.js | 7 ------- packages/react-native-win32/metro.config.js | 3 +++ packages/react-native-win32/react-native.config.js | 4 ---- vnext/local-cli/generator-windows/index.js | 1 - .../local-cli/generator-windows/templates/metro.config.js | 3 +++ .../generator-windows/templates/react-native.config.js | 5 ----- vnext/metro.config.js | 3 +++ vnext/react-native.config.js | 4 ---- 11 files changed, 18 insertions(+), 21 deletions(-) delete mode 100644 packages/playground/react-native.config.js delete mode 100644 vnext/local-cli/generator-windows/templates/react-native.config.js diff --git a/packages/E2ETest/metro.config.js b/packages/E2ETest/metro.config.js index a73508a7e14..a5b5455186f 100644 --- a/packages/E2ETest/metro.config.js +++ b/packages/E2ETest/metro.config.js @@ -35,6 +35,9 @@ module.exports = { ]), }, transformer: { + // The cli defaults this to a full path to react-native, which bypasses the reactNativePlatformResolver above + // Hopefully we can fix the default in the future + assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry', getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, diff --git a/packages/microsoft-reactnative-sampleapps/metro.config.js b/packages/microsoft-reactnative-sampleapps/metro.config.js index 7a7d1e6f578..d850032e67a 100644 --- a/packages/microsoft-reactnative-sampleapps/metro.config.js +++ b/packages/microsoft-reactnative-sampleapps/metro.config.js @@ -37,6 +37,9 @@ module.exports = { ]), }, transformer: { + // The cli defaults this to a full path to react-native, which bypasses the reactNativePlatformResolver above + // Hopefully we can fix the default in the future + assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry', getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, diff --git a/packages/playground/metro.config.js b/packages/playground/metro.config.js index 14ffc7e0e10..6a543d2b85b 100644 --- a/packages/playground/metro.config.js +++ b/packages/playground/metro.config.js @@ -37,6 +37,9 @@ module.exports = { ]), }, transformer: { + // The cli defaults this to a full path to react-native, which bypasses the reactNativePlatformResolver above + // Hopefully we can fix the default in the future + assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry', getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, diff --git a/packages/playground/react-native.config.js b/packages/playground/react-native.config.js deleted file mode 100644 index fffebf99369..00000000000 --- a/packages/playground/react-native.config.js +++ /dev/null @@ -1,7 +0,0 @@ -const fs = require('fs'); -const path = require('path'); -module.exports = { - reactNativePath: fs.realpathSync( - path.resolve(require.resolve('react-native-windows/package.json'), '..'), - ), -}; diff --git a/packages/react-native-win32/metro.config.js b/packages/react-native-win32/metro.config.js index 86e6466979c..c15ae2c5ca5 100644 --- a/packages/react-native-win32/metro.config.js +++ b/packages/react-native-win32/metro.config.js @@ -17,6 +17,9 @@ module.exports = { ), }, transformer: { + // The cli defaults this to a full path to react-native, which bypasses the reactNativePlatformResolver above + // Hopefully we can fix the default in the future + assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry', getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, diff --git a/packages/react-native-win32/react-native.config.js b/packages/react-native-win32/react-native.config.js index 74538a4cf09..6c2312774ef 100644 --- a/packages/react-native-win32/react-native.config.js +++ b/packages/react-native-win32/react-native.config.js @@ -8,8 +8,4 @@ module.exports = { dependencyConfig: (projectRoot, dependencyParams) => null, }, }, - - // ***** - // This is only used when building bundles within react-native-win32. - reactNativePath: '.', }; diff --git a/vnext/local-cli/generator-windows/index.js b/vnext/local-cli/generator-windows/index.js index 722c71f97d0..e600a3826b9 100644 --- a/vnext/local-cli/generator-windows/index.js +++ b/vnext/local-cli/generator-windows/index.js @@ -95,7 +95,6 @@ function copyProjectTemplateAndReplace( }; [ - { from: path.join(srcRootPath, 'react-native.config.js'), to: 'react-native.config.js' }, { from: path.join(srcRootPath, 'metro.config.js'), to: 'metro.config.js' }, { from: path.join(srcRootPath, '_gitignore'), to: path.join(windowsDir, '.gitignore') }, { from: path.join(srcRootPath, 'b_gitignore'), to: path.join(windowsDir, newProjectName, bundleDir, '.gitignore') }, diff --git a/vnext/local-cli/generator-windows/templates/metro.config.js b/vnext/local-cli/generator-windows/templates/metro.config.js index 75335cc35fe..0cf35e4acf6 100644 --- a/vnext/local-cli/generator-windows/templates/metro.config.js +++ b/vnext/local-cli/generator-windows/templates/metro.config.js @@ -20,6 +20,9 @@ module.exports = { ]), }, transformer: { + // The cli defaults this to a full path to react-native, which bypasses the reactNativePlatformResolver above + // Hopefully we can fix the default in the future + assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry', getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, diff --git a/vnext/local-cli/generator-windows/templates/react-native.config.js b/vnext/local-cli/generator-windows/templates/react-native.config.js deleted file mode 100644 index cedd9d380ae..00000000000 --- a/vnext/local-cli/generator-windows/templates/react-native.config.js +++ /dev/null @@ -1,5 +0,0 @@ -const fs = require('fs'); -const path = require('path'); -module.exports = { - reactNativePath: fs.realpathSync(path.resolve(require.resolve('react-native-windows/package.json'), '..')), -}; diff --git a/vnext/metro.config.js b/vnext/metro.config.js index 767bb59443c..b332c81a94e 100644 --- a/vnext/metro.config.js +++ b/vnext/metro.config.js @@ -27,6 +27,9 @@ module.exports = { }, }, transformer: { + // The cli defaults this to a full path to react-native, which bypasses the reactNativePlatformResolver above + // Hopefully we can fix the default in the future + assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry', getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, diff --git a/vnext/react-native.config.js b/vnext/react-native.config.js index 1e6961a0d12..d427f0050f4 100644 --- a/vnext/react-native.config.js +++ b/vnext/react-native.config.js @@ -14,8 +14,4 @@ module.exports = { dependencyConfig: dependencyConfig.dependencyConfigWindows, }, }, - - // ***** - // This is only used when building bundles within react-native-windows. - reactNativePath: '.', };