fix: fix loadConfig() failing with "missing loader for extension" (#2549)

Author: tido64

packages/cli-config/src/readConfigFromDisk.ts

@@ -1,7 +1,8 @@
+import type {CosmiconfigResult} from 'cosmiconfig';
 import {cosmiconfig, cosmiconfigSync} from 'cosmiconfig';
 import {JoiError} from './errors';
 import * as schema from './schema';
-import {
+import type {
   UserConfig,
   UserDependencyConfig,
 } from '@react-native-community/cli-types';
@@ -10,14 +11,27 @@ import chalk from 'chalk';
 
 /**
  * Places to look for the configuration file.
+ * Note that we need different sets for CJS and ESM because the synchronous
+ * version cannot contain `.mjs` files. Doing so will cause "Error: Missing
+ * loader for extension" during runtime.
  */
-const searchPlaces = [
+const searchPlacesForCJS = [
   'react-native.config.js',
   'react-native.config.cjs',
-  'react-native.config.mjs',
   'react-native.config.ts',
-  'react-native.config.mjs',
 ];
+const searchPlaces = [...searchPlacesForCJS, 'react-native.config.mjs'];
+
+function parseUserConfig(searchResult: CosmiconfigResult): UserConfig {
+  const config = searchResult ? searchResult.config : undefined;
+  const result = schema.projectConfig.validate(config);
+
+  if (result.error) {
+    throw new JoiError(result.error);
+  }
+
+  return result.value as UserConfig;
+}
 
 /**
  * Reads a project configuration as defined by the user in the current
@@ -32,15 +46,7 @@ export async function readConfigFromDiskAsync(
   });
 
   const searchResult = await explorer.search(rootFolder);
-
-  const config = searchResult ? searchResult.config : undefined;
-  const result = schema.projectConfig.validate(config);
-
-  if (result.error) {
-    throw new JoiError(result.error);
-  }
-
-  return result.value as UserConfig;
+  return parseUserConfig(searchResult);
 }
 
 /**
@@ -55,31 +61,13 @@ export function readConfigFromDisk(rootFolder: string): UserConfig {
   });
 
   const searchResult = explorer.search(rootFolder);
-
-  const config = searchResult ? searchResult.config : undefined;
-  const result = schema.projectConfig.validate(config);
-
-  if (result.error) {
-    throw new JoiError(result.error);
-  }
-
-  return result.value as UserConfig;
+  return parseUserConfig(searchResult);
 }
 
-/**
- * Reads a dependency configuration as defined by the developer
- * inside `node_modules`.
- */
-export async function readDependencyConfigFromDiskAsync(
-  rootFolder: string,
+function parseDependencyConfig(
   dependencyName: string,
-): Promise<UserDependencyConfig> {
-  const explorer = cosmiconfig('react-native', {
-    stopDir: rootFolder,
-    searchPlaces,
-  });
-
-  const searchResult = await explorer.search(rootFolder);
+  searchResult: CosmiconfigResult,
+): UserDependencyConfig {
   const config = searchResult ? searchResult.config : emptyDependencyConfig;
 
   const result = schema.dependencyConfig.validate(config, {abortEarly: false});
@@ -93,14 +81,31 @@ export async function readDependencyConfigFromDiskAsync(
         )} contains invalid configuration: ${chalk.bold(
         validationError.message,
       )}.
-      
+
       Please verify it's properly linked using "npx react-native config" command and contact the package maintainers about this.`),
     );
   }
 
   return result.value as UserDependencyConfig;
 }
 
+/**
+ * Reads a dependency configuration as defined by the developer
+ * inside `node_modules`.
+ */
+export async function readDependencyConfigFromDiskAsync(
+  rootFolder: string,
+  dependencyName: string,
+): Promise<UserDependencyConfig> {
+  const explorer = cosmiconfig('react-native', {
+    stopDir: rootFolder,
+    searchPlaces,
+  });
+
+  const searchResult = await explorer.search(rootFolder);
+  return parseDependencyConfig(dependencyName, searchResult);
+}
+
 /**
  * Reads a dependency configuration as defined by the developer
  * inside `node_modules` synchronously.
@@ -112,29 +117,11 @@ export function readDependencyConfigFromDisk(
 ): UserDependencyConfig {
   const explorer = cosmiconfigSync('react-native', {
     stopDir: rootFolder,
-    searchPlaces,
+    searchPlaces: searchPlacesForCJS,
   });
 
   const searchResult = explorer.search(rootFolder);
-  const config = searchResult ? searchResult.config : emptyDependencyConfig;
-
-  const result = schema.dependencyConfig.validate(config, {abortEarly: false});
-
-  if (result.error) {
-    const validationError = new JoiError(result.error);
-    logger.warn(
-      inlineString(`
-        Package ${chalk.bold(
-          dependencyName,
-        )} contains invalid configuration: ${chalk.bold(
-        validationError.message,
-      )}.
-      
-      Please verify it's properly linked using "npx react-native config" command and contact the package maintainers about this.`),
-    );
-  }
-
-  return result.value as UserDependencyConfig;
+  return parseDependencyConfig(dependencyName, searchResult);
 }
 
 const emptyDependencyConfig = {