fix: Drop @react-native/metro-config dep for RN 0.72 config fallback (#1901)

Author: huntie

packages/cli-plugin-metro/package.json

@@ -9,13 +9,14 @@
   "dependencies": {
     "@react-native-community/cli-server-api": "11.1.1",
     "@react-native-community/cli-tools": "11.1.1",
-    "@react-native/metro-config": "^0.72.1",
     "chalk": "^4.1.2",
     "execa": "^5.0.0",
     "metro": "0.76.0",
     "metro-config": "0.76.0",
     "metro-core": "0.76.0",
+    "metro-react-native-babel-transformer": "0.76.0",
     "metro-resolver": "0.76.0",
+    "metro-runtime": "0.76.0",
     "readline": "^1.3.0"
   },
   "devDependencies": {

packages/cli-plugin-metro/src/tools/getDefaultMetroConfig.ts

@@ -0,0 +1,87 @@
+import type {InputConfigT} from 'metro-config';
+import path from 'path';
+import type {ConfigLoadingContext} from './loadMetroConfig';
+
+/**
+ * This module reproduces defaults from the @react-native/metro-config package,
+ * used in ./loadMetroConfig.js to provide a soft upgrade process when upgrading
+ * to React Native 0.72.
+ *
+ * These values will be used when:
+ * - RN CLI 11.x or greater is present in a project (from React Native 0.72).
+ * - The project has not yet followed the upgrade instructions to update
+ *   metro.config.js to extend '@react-native/metro-config'.
+ *
+ * Until we remove this file in a future release, updates should be made both
+ * here and in '@react-native/metro-config'. (Note: Updates to these values are
+ * generally rare.)
+ *
+ * TODO(@huntie): Remove this file in a future React Native release.
+ */
+
+/**
+ * @deprecated (React Native 0.72.0) Defaults should be updated here and in
+ *   https://github.com/facebook/react-native/tree/main/package/metro-config/index.js
+ */
+const INTERNAL_CALLSITES_REGEX = new RegExp(
+  [
+    '/Libraries/Renderer/implementations/.+\\.js$',
+    '/Libraries/BatchedBridge/MessageQueue\\.js$',
+    '/Libraries/YellowBox/.+\\.js$',
+    '/Libraries/LogBox/.+\\.js$',
+    '/Libraries/Core/Timers/.+\\.js$',
+    '/Libraries/WebSocket/.+\\.js$',
+    '/Libraries/vendor/.+\\.js$',
+    '/node_modules/react-devtools-core/.+\\.js$',
+    '/node_modules/react-refresh/.+\\.js$',
+    '/node_modules/scheduler/.+\\.js$',
+    '/node_modules/event-target-shim/.+\\.js$',
+    '/node_modules/invariant/.+\\.js$',
+    '/node_modules/react-native/index.js$',
+    '/metro-runtime/.+\\.js$',
+    '^\\[native code\\]$',
+  ].join('|'),
+);
+
+/**
+ * Get the static Metro config defaults for a React Native project.
+ *
+ * @deprecated (React Native 0.72.0) Defaults should be updated here and in
+ *   https://github.com/facebook/react-native/tree/main/package/metro-config/index.js
+ */
+export default function getDefaultMetroConfig(
+  ctx: ConfigLoadingContext,
+): InputConfigT {
+  return {
+    resolver: {
+      resolverMainFields: ['react-native', 'browser', 'main'],
+      unstable_conditionNames: ['require', 'react-native'],
+    },
+    serializer: {
+      getPolyfills: () =>
+        require(path.join(ctx.reactNativePath, 'rn-get-polyfills'))(),
+    },
+    server: {
+      port: Number(process.env.RCT_METRO_PORT) || 8081,
+    },
+    symbolicator: {
+      customizeFrame: (frame: {file?: string}) => {
+        const collapse = Boolean(
+          frame.file && INTERNAL_CALLSITES_REGEX.test(frame.file),
+        );
+        return {collapse};
+      },
+    },
+    transformer: {
+      allowOptionalDependencies: true,
+      assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry',
+      asyncRequireModulePath: require.resolve(
+        'metro-runtime/src/modules/asyncRequire',
+      ),
+      babelTransformerPath: require.resolve(
+        'metro-react-native-babel-transformer',
+      ),
+    },
+    watchFolders: [],
+  };
+}

packages/cli-plugin-metro/src/tools/loadMetroConfig.ts

@@ -7,9 +7,9 @@ import {
   mergeConfig,
   resolveConfig,
 } from 'metro-config';
-import {getDefaultConfig} from '@react-native/metro-config';
 import {CLIError, logger} from '@react-native-community/cli-tools';
 import type {Config} from '@react-native-community/cli-types';
+import getDefaultMetroConfig from './getDefaultMetroConfig';
 import {reactNativePlatformResolver} from './metroPlatformResolver';
 
 export type {Config};
@@ -114,8 +114,8 @@ export default async function loadMetroConfig(
 
     const loadedConfig = await loadConfig(
       {cwd: ctx.root, ...options},
-      // Provide @react-native/metro-config defaults on top of Metro defaults
-      getDefaultConfig(ctx.root),
+      // Provide React Native defaults on top of Metro defaults
+      getDefaultMetroConfig(ctx),
     );
 
     return mergeConfig(loadedConfig, overrideConfig);

yarn.lock

@@ -2673,21 +2673,6 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/eslint-plugin/-/eslint-plugin-1.1.0.tgz#e42b1bef12d2415411519fd528e64b593b1363dc"
   integrity sha512-W/J0fNYVO01tioHjvYWQ9m6RgndVtbElzYozBq1ZPrHO/iCzlqoySHl4gO/fpCl9QEFjvJfjPgtPMTMlsoq5DQ==
 
-"@react-native/js-polyfills@^0.72.1":
-  version "0.72.1"
-  resolved "https://registry.yarnpkg.com/@react-native/js-polyfills/-/js-polyfills-0.72.1.tgz#905343ef0c51256f128256330fccbdb35b922291"
-  integrity sha512-cRPZh2rBswFnGt5X5EUEPs0r+pAsXxYsifv/fgy9ZLQokuT52bPH+9xjDR+7TafRua5CttGW83wP4TntRcWNDA==
-
-"@react-native/metro-config@^0.72.1":
-  version "0.72.1"
-  resolved "https://registry.yarnpkg.com/@react-native/metro-config/-/metro-config-0.72.1.tgz#57f212700db2d160e8beff6163558310c2c82220"
-  integrity sha512-BxGfuMK/cXwJxChE4/T6nE4qOdwGLM9iUFFKpcyh9Nks0702qTTvwpjkFbJvlkpe4yulAZh8CKLJrRDVzGGbfQ==
-  dependencies:
-    "@react-native/js-polyfills" "^0.72.1"
-    metro-config "0.76.0"
-    metro-react-native-babel-transformer "0.76.0"
-    metro-runtime "0.76.0"
-
 "@sinonjs/commons@^1.7.0":
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.7.1.tgz#da5fd19a5f71177a53778073978873964f49acf1"