fix: resolve and import metro-config from the project

packages/dev-server/src/MetroDevServer.ts

@@ -1,4 +1,4 @@
-import { getConfig, resolveModule } from '@expo/config';
+import { getConfig, projectHasModule } from '@expo/config';
 import { createDevServerMiddleware } from '@react-native-community/cli-server-api';
 import Log from '@expo/bunyan';
 import * as ExpoMetroConfig from '@expo/metro-config';
@@ -10,8 +10,7 @@ import LogReporter from './LogReporter';
 export type MetroDevServerOptions = ExpoMetroConfig.LoadOptions & { logger: Log };
 
 export async function runMetroDevServerAsync(projectRoot: string, options: MetroDevServerOptions) {
-  const { exp } = getConfig(projectRoot, { skipSDKVersionRequirement: true });
-  const Metro = require(resolveModule('metro', projectRoot, exp));
+  const Metro = importMetroFromProject(projectRoot);
 
   const reporter = new LogReporter(options.logger);
 
@@ -43,3 +42,18 @@ export async function runMetroDevServerAsync(projectRoot: string, options: Metro
     middleware,
   };
 }
+
+function importMetroFromProject(projectRoot: string) {
+  const { exp } = getConfig(projectRoot, { skipSDKVersionRequirement: true });
+
+  const resolvedPath = projectHasModule('metro', projectRoot, exp);
+  if (!resolvedPath) {
+    throw new Error(
+      'Missing package "metro" in the project. ' +
+        'This usually means React Native is not installed. ' +
+        'Please verify that dependencies in package.json include "react-native" ' +
+        'and run `yarn` or `npm install`.'
+    );
+  }
+  return require(resolvedPath);
+}

packages/metro-config/package.json

@@ -37,10 +37,6 @@
     "@expo/config": "3.2.0",
     "metro-react-native-babel-transformer": "^0.58.0"
   },
-  "peerDependencies": {
-    "metro": "^0.56.0",
-    "metro-config": "^0.56.0"
-  },
   "devDependencies": {
     "@expo/babel-preset-cli": "0.2.11",
     "expo": "37",

packages/metro-config/src/ExpoMetroConfig.ts

@@ -1,9 +1,15 @@
 import path from 'path';
 
-import { ProjectTarget, getConfig, getDefaultTarget, resolveModule } from '@expo/config';
+import {
+  ProjectTarget,
+  getConfig,
+  getDefaultTarget,
+  projectHasModule,
+  resolveModule,
+} from '@expo/config';
 import { getBareExtensions, getManagedExtensions } from '@expo/config/paths';
 import { Reporter } from 'metro';
-import { ConfigT, InputConfigT, loadConfig } from 'metro-config';
+import { ConfigT, InputConfigT } from 'metro-config';
 
 const INTERNAL_CALLSITES_REGEX = new RegExp(
   [
@@ -96,5 +102,21 @@ export async function loadAsync(
   if (reporter) {
     defaultConfig = { ...defaultConfig, reporter };
   }
+  const { loadConfig } = importMetroConfigFromProject(projectRoot);
   return await loadConfig({ cwd: projectRoot, projectRoot, ...metroOptions }, defaultConfig);
 }
+
+function importMetroConfigFromProject(projectRoot: string) {
+  const { exp } = getConfig(projectRoot, { skipSDKVersionRequirement: true });
+
+  const resolvedPath = projectHasModule('metro-config', projectRoot, exp);
+  if (!resolvedPath) {
+    throw new Error(
+      'Missing package "metro-config" in the project. ' +
+        'This usually means React Native is not installed. ' +
+        'Please verify that dependencies in package.json include "react-native" ' +
+        'and run `yarn` or `npm install`.'
+    );
+  }
+  return require(resolvedPath);
+}