fix: support loading ESM config files

Author: tido64

test/windows/generateSolution.test.ts

@@ -27,22 +27,22 @@ describe("generateSolution()", () => {
     process.chdir(cwd);
   });
 
-  it("exits if destination path is missing/invalid", () => {
-    equal(generateSolution("", options), "Missing or invalid destination path");
+  it("exits if destination path is missing/invalid", async () => {
+    equal(await generateSolution("", options), "Missing or invalid destination path");
   });
 
-  it("exits if 'package.json' folder cannot be found", () => {
-    equal(generateSolution("test", options), "Could not find 'package.json'");
+  it("exits if 'package.json' folder cannot be found", async () => {
+    equal(await generateSolution("test", options), "Could not find 'package.json'");
   });
 
-  it("exits if 'react-native-windows' folder cannot be found", () => {
+  it("exits if 'react-native-windows' folder cannot be found", async () => {
     setMockFiles({
       [path.resolve("", "package.json")]: testManifest,
       [path.resolve("", "node_modules", ".bin")]: "directory",
     });
 
     equal(
-      generateSolution("test", options),
+      await generateSolution("test", options),
       "Could not find 'react-native-windows'"
     );
   });

windows/project.mjs

@@ -1,4 +1,5 @@
 // @ts-check
+import { resolveCommunityCLI } from "@rnx-kit/tools-react-native/context";
 import { XMLParser } from "fast-xml-parser";
 import * as nodefs from "node:fs";
 import * as path from "node:path";
@@ -10,19 +11,21 @@ import {
   memo,
   readJSONFile,
   readTextFile,
-  requireTransitive,
   toVersionNumber,
   v,
 } from "../scripts/helpers.js";
 import * as colors from "../scripts/utils/colors.mjs";
 
 /**
- * @typedef {import("../scripts/types.js").AppManifest} AppManifest
- * @typedef {import("../scripts/types.js").AppxBundle} AppxBundle
- * @typedef {import("../scripts/types.js").AssetItems} AssetItems;
- * @typedef {import("../scripts/types.js").Assets} Assets;
- * @typedef {import("../scripts/types.js").MSBuildProjectOptions} MSBuildProjectOptions;
- * @typedef {import("../scripts/types.js").ProjectInfo} ProjectInfo;
+ * @import { Config } from "@react-native-community/cli-types"
+ * @import {
+ *   AppManifest,
+ *   AppxBundle,
+ *   AssetItems,
+ *   Assets,
+ *   MSBuildProjectOptions,
+ *   ProjectInfo,
+ * } from "../scripts/types.js"
  */
 
 const uniqueFilterIdentifier = "e48dc53e-40b1-40cb-970a-f89935452892";
@@ -93,18 +96,22 @@ function generateCertificateItems(
 
 /**
  * Equivalent to invoking `react-native config`.
- * @param {string} rnWindowsPath
+ * @type {(projectRoot: string) => Promise<Config>}
  */
-export const loadReactNativeConfig = memo((rnWindowsPath) => {
-  /** @type {import("@react-native-community/cli")} */
-  const { loadConfig } = requireTransitive(
-    ["@react-native-community/cli"],
-    rnWindowsPath
-  );
-  // The signature of `loadConfig` changed in 14.0.0:
-  // https://github.com/react-native-community/cli/commit/b787c89edb781bb788576cd615d2974fc81402fc
-  // @ts-expect-error TS2345: Argument of type X is not assignable to parameter of type Y
-  return loadConfig.length === 1 ? loadConfig({}) : loadConfig();
+export const loadReactNativeConfig = memo((projectRoot) => {
+  const rncli = resolveCommunityCLI(projectRoot);
+  return import(rncli).then(async (cli) => {
+    const { loadConfig, loadConfigAsync } = cli?.default ?? cli;
+    if (!loadConfigAsync) {
+      // The signature of `loadConfig` changed in 14.0.0:
+      // https://github.com/react-native-community/cli/commit/b787c89edb781bb788576cd615d2974fc81402fc
+      return loadConfig.length === 1
+        ? loadConfig({ projectRoot })
+        : loadConfig();
+    }
+
+    return await loadConfigAsync({ projectRoot });
+  });
 });
 
 /**
@@ -204,18 +211,17 @@ function generateContentItems(
  * is a workaround until `react-native-windows` autolinking adds support.
  *
  * @see {@link https://github.com/microsoft/react-native-windows/issues/9578}
- * @param {string} rnWindowsPath
- * @returns {[string, string][]}
+ * @param {string} projectRoot
+ * @returns {Promise<[string, string][]>}
  */
-function getNuGetDependencies(rnWindowsPath, fs = nodefs) {
+async function getNuGetDependencies(projectRoot, fs = nodefs) {
   const pkgJson = findNearest("package.json", undefined, fs);
   if (!pkgJson) {
     return [];
   }
 
-  const dependencies = Object.values(
-    loadReactNativeConfig(rnWindowsPath).dependencies
-  );
+  const config = await loadReactNativeConfig(projectRoot);
+  const dependencies = Object.values(config.dependencies);
 
   const xml = new XMLParser({
     ignoreAttributes: false,
@@ -400,9 +406,9 @@ export function getBundleResources(manifestFilePath, fs = nodefs) {
  * @param {MSBuildProjectOptions} options
  * @param {string} rnWindowsPath
  * @param {string} destPath
- * @returns {ProjectInfo}
+ * @returns {Promise<ProjectInfo>}
  */
-export function projectInfo(
+export async function projectInfo(
   { useFabric, useNuGet },
   rnWindowsPath,
   destPath,
@@ -421,7 +427,7 @@ export function projectInfo(
     version,
     versionNumber,
     bundle: getBundleResources(findNearest("app.json", destPath, fs), fs),
-    nugetDependencies: getNuGetDependencies(rnWindowsPath),
+    nugetDependencies: await getNuGetDependencies(destPath),
     useExperimentalNuGet: newArch || useNuGet,
     useFabric: newArch,
   };

windows/test-app.mjs

@@ -18,9 +18,7 @@ import { loadReactNativeConfig, projectInfo } from "./project.mjs";
 import { configureForUWP } from "./uwp.mjs";
 import { configureForWin32 } from "./win32.mjs";
 
-/**
- * @typedef {import("../scripts/types.js").MSBuildProjectOptions} MSBuildProjectOptions;
- */
+/** @import { MSBuildProjectOptions } from "../scripts/types.js" */
 
 const templateView = {
   packageGuidUpper: "{B44CEAD7-FBFF-4A17-95EB-FF5434BBD79D}", // .wapproj
@@ -120,9 +118,9 @@ export async function copyAndReplace(
  * Generates Visual Studio solution.
  * @param {string} destPath Destination path.
  * @param {MSBuildProjectOptions} options
- * @returns {string | undefined} An error message; `undefined` otherwise.
+ * @returns {Promise<string | undefined>} An error message; `undefined` otherwise.
  */
-export function generateSolution(destPath, options, fs = nodefs) {
+export async function generateSolution(destPath, options, fs = nodefs) {
   if (!destPath) {
     return "Missing or invalid destination path";
   }
@@ -143,7 +141,7 @@ export function generateSolution(destPath, options, fs = nodefs) {
     return "Could not find 'react-native-windows'";
   }
 
-  const info = projectInfo(options, rnWindowsPath, destPath, fs);
+  const info = await projectInfo(options, rnWindowsPath, destPath, fs);
   const { projDir, projectFileName, projectFiles, solutionTemplatePath } =
     info.useFabric ? configureForWin32(info) : configureForUWP(info);
 
@@ -278,10 +276,10 @@ export function generateSolution(destPath, options, fs = nodefs) {
   if (options.autolink) {
     const projectRoot = path.resolve(path.dirname(projectManifest));
     Promise.all(copyTasks)
-      .then(() => {
+      .then(async () => {
         // `react-native config` is cached by `@react-native-community/cli`. We
         // need to manually regenerate the Windows project config and inject it.
-        const config = loadReactNativeConfig(rnWindowsPath);
+        const config = await loadReactNativeConfig(projectRoot);
         config.project.windows = config.platforms.windows.projectConfig(
           projectRoot,
           {
@@ -336,15 +334,15 @@ if (isMain(import.meta.url)) {
         default: false,
       },
     },
-    ({
+    async ({
       "project-directory": projectDirectory,
       autolink,
       "use-fabric": useFabric,
       "use-hermes": useHermes,
       "use-nuget": useNuGet,
     }) => {
       const options = { autolink, useFabric, useHermes, useNuGet };
-      const error = generateSolution(path.resolve(projectDirectory), options);
+      const error = await generateSolution(path.resolve(projectDirectory), options);
       if (error) {
         console.error(error);
         process.exitCode = 1;