fix(windows): support loading ESM config files (#2342)

Author: tido64

test/windows/generateSolution.test.ts

@@ -27,22 +27,28 @@ 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,13 +11,13 @@ import {
   memo,
   readJSONFile,
   readTextFile,
-  requireTransitive,
   toVersionNumber,
   v,
 } from "../scripts/helpers.js";
 import * as colors from "../scripts/utils/colors.mjs";
 
 /**
+ * @import { Config } from "@react-native-community/cli-types"
  * @import {
  *   AppManifest,
  *   AppxBundle,
@@ -95,18 +96,20 @@ function generateCertificateItems(
 
 /**
  * Equivalent to invoking `react-native config`.
- * @param {string} rnWindowsPath
+ * @type {(rnWindowsPath: 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();
+  const rncli = "file://" + resolveCommunityCLI(rnWindowsPath);
+  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({}) : loadConfig();
+    }
+
+    return await loadConfigAsync({});
+  });
 });
 
 /**
@@ -207,17 +210,16 @@ function generateContentItems(
  *
  * @see {@link https://github.com/microsoft/react-native-windows/issues/9578}
  * @param {string} rnWindowsPath
- * @returns {[string, string][]}
+ * @returns {Promise<[string, string][]>}
  */
-function getNuGetDependencies(rnWindowsPath, fs = nodefs) {
+async function getNuGetDependencies(rnWindowsPath, fs = nodefs) {
   const pkgJson = findNearest("package.json", undefined, fs);
   if (!pkgJson) {
     return [];
   }
 
-  const dependencies = Object.values(
-    loadReactNativeConfig(rnWindowsPath).dependencies
-  );
+  const config = await loadReactNativeConfig(rnWindowsPath);
+  const dependencies = Object.values(config.dependencies);
 
   const xml = new XMLParser({
     ignoreAttributes: false,
@@ -402,9 +404,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,
@@ -423,7 +425,7 @@ export function projectInfo(
     version,
     versionNumber,
     bundle: getBundleResources(findNearest("app.json", destPath, fs), fs),
-    nugetDependencies: getNuGetDependencies(rnWindowsPath),
+    nugetDependencies: await getNuGetDependencies(rnWindowsPath),
     useExperimentalNuGet: newArch || useNuGet,
     useFabric: newArch,
   };

windows/test-app.mjs

@@ -118,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";
   }
@@ -141,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);
 
@@ -276,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(rnWindowsPath);
         config.project.windows = config.platforms.windows.projectConfig(
           projectRoot,
           {
@@ -334,15 +334,16 @@ 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 destPath = path.resolve(projectDirectory);
+      const error = await generateSolution(destPath, options);
       if (error) {
         console.error(error);
         process.exitCode = 1;