fix(react): allow async functions to work with custom webpack config (#11467)

e2e/web/src/web.test.ts

@@ -1,20 +1,20 @@
 import {
   checkFilesDoNotExist,
   checkFilesExist,
+  cleanupProject,
   createFile,
   isNotWindows,
   killPorts,
   newProject,
   readFile,
   removeFile,
-  cleanupProject,
+  rmDist,
   runCLI,
   runCLIAsync,
   runCypressTests,
   uniq,
   updateFile,
   updateProjectConfig,
-  expectJestTestsToPass,
 } from '@nrwl/e2e/utils';
 
 describe('Web Components Applications', () => {
@@ -38,7 +38,7 @@ describe('Web Components Applications', () => {
     );
 
     expect(readFile(`dist/apps/${appName}/index.html`)).toContain(
-      `<link rel="stylesheet" href="styles.css">`
+      '<link rel="stylesheet" href="styles.css">'
     );
 
     const testResults = await runCLIAsync(`test ${appName}`);
@@ -188,8 +188,54 @@ describe('Web Components Applications', () => {
     ).not.toThrow();
   }, 1000000);
 
-  it('should run default jest tests', async () => {
+  it('should support custom webpackConfig option', async () => {
-    await expectJestTestsToPass('@nrwl/web:app');
+    const appName = uniq('app');
+    runCLI(`generate @nrwl/web:app ${appName} --no-interactive`);
+
+    updateProjectConfig(appName, (config) => {
+      config.targets.build.options.webpackConfig = `apps/${appName}/webpack.config.js`;
+      return config;
+    });
+
+    // Return sync function
+    updateFile(
+      `apps/${appName}/webpack.config.js`,
+      `
+      module.exports = (config, context) => {
+        return config;
+      };
+    `
+    );
+    runCLI(`build ${appName} --outputHashing none`);
+    checkFilesExist(`dist/apps/${appName}/main.esm.js`);
+
+    rmDist();
+
+    // Return async function
+    updateFile(
+      `apps/${appName}/webpack.config.js`,
+      `
+      module.exports = async (config, context) => {
+        return config;
+      };
+    `
+    );
+    runCLI(`build ${appName} --outputHashing none`);
+    checkFilesExist(`dist/apps/${appName}/main.esm.js`);
+
+    rmDist();
+
+    // Return promise of function
+    updateFile(
+      `apps/${appName}/webpack.config.js`,
+      `
+      module.exports = Promise.resolve((config, context) => {
+        return config;
+      });
+    `
+    );
+    runCLI(`build ${appName} --outputHashing none`);
+    checkFilesExist(`dist/apps/${appName}/main.esm.js`);
   }, 100000);
 });
 
@@ -377,7 +423,6 @@ describe('index.html interpolation', () => {
         <meta charset="utf-8" />
         <title>BestReactApp</title>
         <base href="/" />
-
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" type="image/x-icon" href="favicon.ico" />
       </head>

packages/web/src/executors/dev-server/dev-server.impl.ts

@@ -85,7 +85,7 @@ export default async function* devServerExecutor(
       customWebpack = await customWebpack;
     }
 
-    webpackConfig = customWebpack(webpackConfig, {
+    webpackConfig = await customWebpack(webpackConfig, {
       buildOptions,
       configuration: serveOptions.buildTarget.split(':')[2],
     });

packages/web/src/executors/webpack/webpack.impl.ts

@@ -101,7 +101,8 @@ async function getWebpackConfigs(
     }
   }
 
-  return [
+  return await Promise.all(
+    [
       // ESM build for modern browsers.
       getWebConfig(
         context.root,
@@ -126,16 +127,17 @@ async function getWebpackConfigs(
         : undefined,
     ]
       .filter(Boolean)
-    .map((config) => {
+      .map(async (config) => {
         if (customWebpack) {
-        return customWebpack(config, {
+          return await customWebpack(config, {
             options,
             configuration: context.configurationName,
           });
         } else {
           return config;
         }
-    });
+      })
+  );
 }
 
 export async function* run(