Speed up bundling in FURN

apps/fluent-tester/metro.config.js

@@ -7,41 +7,55 @@
 
 const path = require('path');
 const { exclusionList, makeMetroConfig, resolveUniqueModule } = require('@rnx-kit/metro-config');
+const MetroSymlinksResolver = require('@rnx-kit/metro-resolver-symlinks');
 
-const [reactIs, reactIsExcludePattern] = resolveUniqueModule('react-is');
+// ensure regex paths are merged, normalized, use forward slashes and end with a /
+function pathForRegex(...parts) {
+  let result = path.normalize(path.join(...parts));
+  if (!result.endsWith(path.sep)) {
+    result += path.sep;
+  }
+  return result.replace(/[/\\]+/g, '/');
+}
 
-const blockList = exclusionList([
-  /node_modules\/.*\/node_modules\/react-native\/.*/,
+const excludeMixins = [];
+const extraNodeModules = {};
+function ensureUniqueModule(moduleName, excludeList, nodeModules) {
+  const [nmEntry, excludePattern] = resolveUniqueModule(moduleName);
+  excludeMixins.push(excludePattern);
+  extraNodeModules[moduleName] = nmEntry;
+}
+
+// build up the added excludes and extraNodeModules
+['react-is', 'invariant', '@babel/runtime', 'base64-js'].forEach((moduleName) => ensureUniqueModule(moduleName));
 
+const blockList = exclusionList([
   // 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, '/')}.*`),
+  // crash if its already running. This should also cover /.*\/.vs\/.*/, as .vs folders go next to the .sln file
+  new RegExp(`${pathForRegex(__dirname, 'windows')}.*`),
 
   // Workaround for `EPERM: operation not permitted, lstat '~\midl-MIDLRT-cl.read.1.tlog'`
-  /.*\.tlog/,
-
-  // Prevent Metro from watching temporary files generated by Visual Studio
-  // otherwise it may crash when they are removed when closing a project.
-  /.*\/.vs\/.*/,
+  /.*\.tlog$/,
 
   // Workaround for `EBUSY: resource busy or locked, open '~\msbuild.ProjectImports.zip'`
-  /.*\.ProjectImports\.zip/,
+  /.*\.ProjectImports\.zip$/,
 
   // Exclude other test apps
-  /.*\/apps\/(?:win32)\/.*/,
+  new RegExp(`${pathForRegex(__dirname, '../win32')}.*`),
 
   // Exclude build output directory
-  /.*\/apps\/fluent-tester\/dist\/.*/,
+  new RegExp(`${pathForRegex(__dirname, 'dist')}.*`),
 
-  reactIsExcludePattern,
+  ...excludeMixins,
 ]);
 
 let config = makeMetroConfig({
   resolver: {
     blockList,
     extraNodeModules: {
-      'react-is': reactIs,
+      ...extraNodeModules,
     },
+    resolveRequest: MetroSymlinksResolver(),
   },
   transformer: {
     // This transformer selects between the regular transformer and svg transformer depending on the file type

apps/fluent-tester/package.json

@@ -111,8 +111,9 @@
     "@react-native/babel-preset": "^0.74.0",
     "@react-native/metro-babel-transformer": "^0.74.0",
     "@react-native/metro-config": "^0.74.0",
-    "@rnx-kit/cli": "^0.18.0",
-    "@rnx-kit/metro-config": "^2.0.0",
+    "@rnx-kit/cli": "^0.18.9",
+    "@rnx-kit/metro-config": "^2.1.0",
+    "@rnx-kit/metro-resolver-symlinks": "^0.2.5",
     "@types/jasmine": "5.1.4",
     "@wdio/cli": "^8.40.0",
     "@wdio/globals": "^8.40.0",

apps/win32/metro.config.js

@@ -6,6 +6,7 @@
  */
 // @ts-check
 const { makeMetroConfig } = require('@rnx-kit/metro-config');
+const MetroSymlinksResolver = require('@rnx-kit/metro-resolver-symlinks');
 const { getDefaultConfig } = require('metro-config');
 
 module.exports = async () => {
@@ -17,6 +18,7 @@ module.exports = async () => {
     resolver: {
       assetExts: [...assetExts.filter((ext) => ext !== 'svg'), 'ttf', 'otf', 'png'],
       sourceExts: [...sourceExts, 'svg'],
+      resolveRequest: MetroSymlinksResolver(),
     },
     transformer: {
       // This transformer selects between the regular transformer and svg transformer depending on the file type

apps/win32/package.json

@@ -49,8 +49,9 @@
     "@react-native/babel-preset": "^0.74.0",
     "@react-native/metro-babel-transformer": "^0.74.0",
     "@react-native/metro-config": "^0.74.0",
-    "@rnx-kit/cli": "^0.18.0",
-    "@rnx-kit/metro-config": "^2.0.0",
+    "@rnx-kit/cli": "^0.18.9",
+    "@rnx-kit/metro-config": "^2.1.0",
+    "@rnx-kit/metro-resolver-symlinks": "^0.2.5",
     "@types/react": "^18.2.0",
     "metro-config": "^0.80.3",
     "react-native-svg-transformer": "^1.0.0",

change/@fluentui-react-native-tester-af2a3641-e7c9-423a-be5f-af1832ab6352.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "speed up bundling and reduce bundling errors",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-tester-win32-dfecbbd4-d254-4a04-a2f1-f5efeac8ab12.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "speed up bundling and reduce bundling errors",
+  "packageName": "@fluentui-react-native/tester-win32",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

yarn.lock

@@ -4572,8 +4572,9 @@ __metadata:
     "@react-native/babel-preset": "npm:^0.74.0"
     "@react-native/metro-babel-transformer": "npm:^0.74.0"
     "@react-native/metro-config": "npm:^0.74.0"
-    "@rnx-kit/cli": "npm:^0.18.0"
-    "@rnx-kit/metro-config": "npm:^2.0.0"
+    "@rnx-kit/cli": "npm:^0.18.9"
+    "@rnx-kit/metro-config": "npm:^2.1.0"
+    "@rnx-kit/metro-resolver-symlinks": "npm:^0.2.5"
     "@types/react": "npm:^18.2.0"
     metro-config: "npm:^0.80.3"
     react: "npm:18.2.0"
@@ -4656,8 +4657,9 @@ __metadata:
     "@react-native/babel-preset": "npm:^0.74.0"
     "@react-native/metro-babel-transformer": "npm:^0.74.0"
     "@react-native/metro-config": "npm:^0.74.0"
-    "@rnx-kit/cli": "npm:^0.18.0"
-    "@rnx-kit/metro-config": "npm:^2.0.0"
+    "@rnx-kit/cli": "npm:^0.18.9"
+    "@rnx-kit/metro-config": "npm:^2.1.0"
+    "@rnx-kit/metro-resolver-symlinks": "npm:^0.2.5"
     "@types/jasmine": "npm:5.1.4"
     "@types/react": "npm:~18.2.0"
     "@warren-ms/react-native-icons": "npm:^0.0.13"
@@ -6774,7 +6776,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rnx-kit/cli@npm:^0.18.0":
+"@rnx-kit/cli@npm:^0.18.9":
   version: 0.18.9
   resolution: "@rnx-kit/cli@npm:0.18.9"
   dependencies:
@@ -6876,7 +6878,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rnx-kit/metro-config@npm:^2.0.0":
+"@rnx-kit/metro-config@npm:^2.0.0, @rnx-kit/metro-config@npm:^2.1.0":
   version: 2.1.0
   resolution: "@rnx-kit/metro-config@npm:2.1.0"
   dependencies:
@@ -6930,6 +6932,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rnx-kit/metro-resolver-symlinks@npm:^0.2.5":
+  version: 0.2.5
+  resolution: "@rnx-kit/metro-resolver-symlinks@npm:0.2.5"
+  dependencies:
+    "@rnx-kit/console": "npm:^2.0.0"
+    "@rnx-kit/tools-node": "npm:^3.0.0"
+    "@rnx-kit/tools-react-native": "npm:^2.2.0"
+    enhanced-resolve: "npm:^5.8.3"
+  peerDependencies:
+    oxc-resolver: ^9.0.0
+  peerDependenciesMeta:
+    oxc-resolver:
+      optional: true
+  checksum: 10c0/ab2a7d2e5a8278ba83575afc466eb9ab1fc90aa9845d5a1dcabf693cac85ce555f4ff162740fcf73cc7d553cd0060237f9cb323feced5adf4b5d266bf415479f
+  languageName: node
+  linkType: hard
+
 "@rnx-kit/metro-serializer-esbuild@npm:^0.2.1":
   version: 0.2.2
   resolution: "@rnx-kit/metro-serializer-esbuild@npm:0.2.2"
@@ -7062,6 +7081,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rnx-kit/tools-react-native@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "@rnx-kit/tools-react-native@npm:2.2.0"
+  dependencies:
+    "@rnx-kit/tools-node": "npm:^3.0.0"
+  checksum: 10c0/631eecefda6b2b53eccdd18656f24a5426625522b80e956504d2b37acbcdc1e98eddc692aec0833536e6fd1b285c4a5d75e27f23a16fdcb099fabae46013740d
+  languageName: node
+  linkType: hard
+
 "@rnx-kit/tools-shell@npm:^0.2.0":
   version: 0.2.1
   resolution: "@rnx-kit/tools-shell@npm:0.2.1"