fix(webpack): fix support for module federation plugin (#14653)

(cherry picked from commit 795e4d6)

Author: jaysoo

packages/react/plugins/storybook/index.ts

@@ -1,5 +1,5 @@
-import { ExecutorContext, logger } from '@nrwl/devkit';
-import { composePlugins } from '@nrwl/webpack/src/utils/config';
+import { ExecutorContext, logger, workspaceRoot } from '@nrwl/devkit';
+import { composePluginsSync } from '@nrwl/webpack/src/utils/config';
 import { NormalizedWebpackExecutorOptions } from '@nrwl/webpack/src/executors/webpack/schema';
 import { join } from 'path';
 import {
@@ -95,14 +95,14 @@ export const webpack = async (
 
   // ESM build for modern browsers.
   let baseWebpackConfig: Configuration = {};
-  const configure = composePlugins(
+  const configure = composePluginsSync(
     withNx({ skipTypeChecking: true }),
     withWeb(),
     withReact()
   );
   const finalConfig = configure(baseWebpackConfig, {
     options: builderOptions,
-    context: {} as ExecutorContext, // The context is not used here.
+    context: { root: workspaceRoot } as ExecutorContext, // The context is not used here.
   });
 
   return {

packages/react/src/generators/host/files/module-federation-ssr/webpack.server.config.js__tmpl__

@@ -1,6 +1,6 @@
-import { composePlugins, withNx } from '@nrwl/webpack';
-import { withReact } from '@nrwl/react';
-import { withModuleFederationForSSR } from '@nrwl/react/module-federation';
+const { composePlugins, withNx } = require('@nrwl/webpack');
+const { withReact } = require('@nrwl/react');
+const { withModuleFederationForSSR } = require('@nrwl/react/module-federation');
 
 const baseConfig = require('./module-federation.config');
 

packages/react/src/module-federation/with-module-federation.ts

@@ -27,8 +27,8 @@ export async function withModuleFederation(options: ModuleFederationConfig) {
   const { sharedDependencies, sharedLibraries, mappedRemotes } =
     await getModuleFederationConfig(options, determineRemoteUrl);
 
-  return (config) => {
-    config = reactWebpackConfig(config);
+  return (config, ctx) => {
+    config = reactWebpackConfig(config, ctx);
     config.output.uniqueName = options.name;
     config.output.publicPath = 'auto';
 

packages/webpack/src/executors/webpack/lib/get-webpack-config.ts

@@ -4,7 +4,7 @@ import { ExecutorContext } from '@nrwl/devkit';
 import { NormalizedWebpackExecutorOptions } from '../schema';
 import { withNx } from '../../../utils/with-nx';
 import { withWeb } from '../../../utils/with-web';
-import { composePlugins } from '@nrwl/webpack';
+import { composePluginsSync } from '../../../utils/config';
 
 interface GetWebpackConfigOverrides {
   root: string;
@@ -20,6 +20,8 @@ export function getWebpackConfig(
 ): Configuration {
   const config: Configuration = {};
   const configure =
-    options.target === 'node' ? withNx() : composePlugins(withNx(), withWeb());
+    options.target === 'node'
+      ? withNx()
+      : composePluginsSync(withNx(), withWeb());
   return configure(config, { options, context });
 }

packages/webpack/src/utils/config.spec.ts

@@ -0,0 +1,70 @@
+import {
+  composePluginsSync,
+  composePlugins,
+  NxWebpackExecutionContext,
+} from './config';
+
+describe('composePlugins', () => {
+  it('should support sync and async plugin functions', async () => {
+    const callOrder = [];
+    const a = () => (config) => {
+      callOrder.push('a');
+      config.plugins.push(new (class A {})());
+      return config;
+    };
+    const b = async () => (config) => {
+      callOrder.push('b');
+      config.plugins.push(new (class B {})());
+      return config;
+    };
+    const c = () => async (config) => {
+      callOrder.push('c');
+      config.plugins.push(new (class C {})());
+      return config;
+    };
+    const d = async () => async (config) => {
+      callOrder.push('d');
+      config.plugins.push(new (class D {})());
+      return config;
+    };
+
+    const combined = composePlugins(a(), b(), c(), d());
+    const config = await combined(
+      { plugins: [] },
+      {} as NxWebpackExecutionContext
+    );
+
+    expect(config.plugins.map((p) => p.constructor.name)).toEqual([
+      'A',
+      'B',
+      'C',
+      'D',
+    ]);
+    expect(callOrder).toEqual(['a', 'b', 'c', 'd']);
+  });
+});
+
+describe('composePluginsSync', () => {
+  it('should support sync plugin functions', async () => {
+    const callOrder = [];
+    const a = () => (config) => {
+      callOrder.push('a');
+      config.plugins.push(new (class A {})());
+      return config;
+    };
+    const b = () => (config) => {
+      callOrder.push('b');
+      config.plugins.push(new (class B {})());
+      return config;
+    };
+
+    const combined = composePluginsSync(a(), b());
+    const config = await combined(
+      { plugins: [] },
+      {} as NxWebpackExecutionContext
+    );
+
+    expect(config.plugins.map((p) => p.constructor.name)).toEqual(['A', 'B']);
+    expect(callOrder).toEqual(['a', 'b']);
+  });
+});

packages/webpack/src/utils/config.ts

@@ -11,7 +11,7 @@ export function getBaseWebpackPartial(
   context?: ExecutorContext
 ): Configuration {
   const config: Configuration = {};
-  const configure = composePlugins(withNx(), withWeb());
+  const configure = composePluginsSync(withNx(), withWeb());
   return configure(config, { options, context });
 }
 
@@ -20,28 +20,41 @@ export interface NxWebpackExecutionContext {
   context: ExecutorContext;
 }
 
-export type NxWebpackPlugin = (
-  config: Configuration,
-  ctx: NxWebpackExecutionContext
-) => Configuration;
-
-export type NxWebpackPluginAsyncResolver = Promise<NxWebpackPlugin>;
+export interface NxWebpackPlugin {
+  (config: Configuration, ctx: NxWebpackExecutionContext): Configuration;
+}
+export interface AsyncNxWebpackPlugin {
+  (config: Configuration, ctx: NxWebpackExecutionContext):
+    | Configuration
+    | Promise<Configuration>;
+}
 
 export function composePlugins(
-  ...plugins: (NxWebpackPlugin | NxWebpackPluginAsyncResolver)[]
+  ...plugins: (
+    | NxWebpackPlugin
+    | AsyncNxWebpackPlugin
+    | Promise<NxWebpackPlugin | AsyncNxWebpackPlugin>
+  )[]
 ) {
+  return async function combined(
+    config: Configuration,
+    ctx: NxWebpackExecutionContext
+  ): Promise<Configuration> {
+    for (const plugin of plugins) {
+      const fn = await plugin;
+      config = await fn(config, ctx);
+    }
+    return config;
+  };
+}
+
+export function composePluginsSync(...plugins: NxWebpackPlugin[]) {
   return function combined(
     config: Configuration,
     ctx: NxWebpackExecutionContext
   ): Configuration {
     for (const plugin of plugins) {
-      if ('then' in plugin) {
-        plugin.then((resolvedPlugin) => {
-          config = resolvedPlugin(config, ctx);
-        });
-      } else {
-        config = plugin(config, ctx);
-      }
+      config = plugin(config, ctx);
     }
     return config;
   };

packages/webpack/src/utils/with-nx.ts

@@ -125,6 +125,9 @@ export function withNx(opts?: { skipTypeChecking?: boolean }) {
 
     const updated = {
       ...config,
+      context: context
+        ? path.join(context.root, options.projectRoot)
+        : undefined,
       target: options.target,
       node: false as const,
       // When mode is development or production, webpack will automatically