Fix mergeConfig dropping state when a config in the chain is async

packages/metro-config/src/__tests__/mergeConfig-test.js

@@ -29,6 +29,20 @@ describe('mergeConfig', () => {
     });
   });
 
+  test('applies trailing overrides after an async config function', async () => {
+    const base: InputConfigT = {server: {port: 8081}};
+    const asyncOverride = (): Promise<InputConfigT> =>
+      Promise.resolve({transformer: {assetPlugins: ['async-plugin']}});
+    const trailing: InputConfigT = {resolver: {sourceExts: ['ts']}};
+
+    const result = await mergeConfig(base, asyncOverride, trailing);
+
+    // The base and every config in the chain must survive the async branch.
+    expect(result.server?.port).toBe(8081);
+    expect(result.transformer?.assetPlugins).toEqual(['async-plugin']);
+    expect(result.resolver?.sourceExts).toEqual(['ts']);
+  });
+
   describe('server.tls merging', () => {
     describe('override IS applied when tls is false or object', () => {
       test('override tls: object replaces base tls: false', () => {

packages/metro-config/src/loadConfig.js

@@ -244,7 +244,10 @@ function mergeConfig<
       typeof next === 'function' ? next(currentConfig) : next;
     if (nextConfig instanceof Promise) {
       // $FlowFixMe[incompatible-type] Not clear why Flow doesn't like this
-      return mergeConfigAsync(nextConfig, reversedConfigs.toReversed());
+      return mergeConfigAsync(
+        nextConfig.then(resolved => mergeConfigObjects(currentConfig, resolved)),
+        ...reversedConfigs.toReversed(),
+      );
     }
     currentConfig = mergeConfigObjects(currentConfig, nextConfig) as T;
   }