@nx/react 0.0.0-pr-31222-862e973 → 0.0.0-pr-31313-387cdca

package/src/generators/host/files/rspack-module-federation/rspack.config.prod.js__tmpl__

@@ -1,36 +1,66 @@
-const { composePlugins, withNx, withReact } = require('@nx/rspack');
-const { withModuleFederation } = require('@nx/rspack/module-federation');
+const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin');
+const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin');
+const { NxModuleFederationPlugin, NxModuleFederationDevServerPlugin } = require('@nx/module-federation/rspack');
+const { join } = require('path');
 
 const baseConfig = require('./module-federation.config');
 
 const prodConfig = {
-    ...baseConfig,
-    /*
-     * Remote overrides for production.
-     * Each entry is a pair of a unique name and the URL where it is deployed.
-     *
-     * e.g.
-     * remotes: [
-     *   ['app1', 'http://app1.example.com'],
-     *   ['app2', 'http://app2.example.com'],
-     * ]
-     *
-     * You can also use a full path to the remoteEntry.js file if desired.
-     *
-     * remotes: [
-     *   ['app1', 'http://example.com/path/to/app1/remoteEntry.js'],
-     *   ['app2', 'http://example.com/path/to/app2/remoteEntry.js'],
-     * ]
-     */
-    remotes: [
-      <% remotes.forEach(function(r) {%>['<%= r.fileName %>', 'http://localhost:<%= r.port %>/'],<% }); %>
-    ],
+	...baseConfig,
+	/*
+		* Remote overrides for production.
+		* Each entry is a pair of a unique name and the URL where it is deployed.
+		*
+		* e.g.
+		* remotes: [
+		*   ['app1', 'http://app1.example.com'],
+		*   ['app2', 'http://app2.example.com'],
+		* ]
+		*
+		* You can also use a full path to the remoteEntry.js file if desired.
+		*
+		* remotes: [
+		*   ['app1', 'http://example.com/path/to/app1/remoteEntry.js'],
+		*   ['app2', 'http://example.com/path/to/app2/remoteEntry.js'],
+		* ]
+		*/
+	remotes: [
+		<%_ remotes.forEach(function(r) { _%>
+		['<%= r.fileName %>', 'http://localhost:<%= r.port %>/'],
+		<%_ }); _%>
+	],
 };
 
-// Nx plugins for rspack to build config object from Nx options and context.
-/**
- * DTS Plugin is disabled in Nx Workspaces as Nx already provides Typing support for Module Federation
- * The DTS Plugin can be enabled by setting dts: true
- * Learn more about the DTS Plugin here: https://module-federation.io/configure/dts.html
- */
-module.exports = composePlugins(withNx(), withReact(), withModuleFederation(prodConfig, { dts: false }));
+module.exports = {
+  output: {
+    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>'),
+    publicPath: 'auto'
+  },
+  devServer: {
+    port: <%= devServerPort %>,
+    historyApiFallback: {
+      index: '/index.html',
+      disableDotRule: true,
+      htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
+    },
+  },
+  plugins: [
+    new NxAppRspackPlugin({
+      tsConfig: '<%= rspackPluginOptions.tsConfig %>',
+      main: '<%= rspackPluginOptions.main %>',
+      index: '<%= rspackPluginOptions.index %>',
+      baseHref: '<%= rspackPluginOptions.baseHref %>',
+      assets: <%- JSON.stringify(rspackPluginOptions.assets) %>,
+      styles: <%- JSON.stringify(rspackPluginOptions.styles) %>,
+      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
+      optimization: process.env['NODE_ENV'] === 'production',
+    }),
+    new NxReactRspackPlugin({
+      // Uncomment this line if you don't want to use SVGR
+      // See: https://react-svgr.com/
+      // svgr: false
+    }),
+    new NxModuleFederationPlugin({ config: prodConfig }, { dts: false }),
+    new NxModuleFederationDevServerPlugin({ config: prodConfig }),
+  ],
+};

package/src/generators/host/files/rspack-module-federation-ssr/module-federation.server.config.js__tmpl__

@@ -1,16 +1,27 @@
 // @ts-check
 
 /**
- * @type {import('@nx/rspack/module-federation').ModuleFederationConfig}
+ * @type {import('@nx/module-federation').ModuleFederationConfig}
  **/
 const moduleFederationConfig = {
     name: '<%= projectName %>',
     remotes: [
-       <% if (static) { 
-         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
-       }
-    %>
+      <%_ if (static) { 
+        remotes.forEach(function(r) { _%> 
+      "<%= r.fileName %>",
+        <%_ }); 
+      }
+    _%>
   ],
+    shared: (libraryName, libraryConfig) => {
+        return {
+            ...libraryConfig,
+            eager: true
+        }
+   },
 };
 
+/**
+* Nx requires a default export of the config to allow correct resolution of the module federation graph.
+**/
 module.exports = moduleFederationConfig;

package/src/generators/host/files/rspack-module-federation-ssr/rspack.config.js__tmpl__

@@ -0,0 +1,66 @@
+const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin');
+const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin');
+const { NxModuleFederationPlugin, NxModuleFederationSSRDevServerPlugin } = require('@nx/module-federation/rspack');
+const { join } = require('path');
+
+const browserMfConfig = require('./module-federation.config');
+const serverMfConfig = require('./module-federation.server.config');
+
+const browserRspackConfig = {
+  name: 'browser',
+  output: {
+    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'browser'),
+    publicPath: 'auto'
+  },
+  devServer: {
+    port: <%= devServerPort %>,
+    historyApiFallback: {
+      index: '/index.html',
+      disableDotRule: true,
+      htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
+    },
+    devMiddleware: {
+      writeToDisk: (file: string) => !file.includes('.hot-update.'),
+    },
+  },
+  plugins: [
+    new NxAppRspackPlugin({
+      tsConfig: '<%= rspackPluginOptions.tsConfig %>',
+      main: '<%= rspackPluginOptions.main %>',
+      index: '<%= rspackPluginOptions.index %>',
+      baseHref: '<%= rspackPluginOptions.baseHref %>',
+      assets: <%- JSON.stringify(rspackPluginOptions.assets) %>,
+      styles: <%- JSON.stringify(rspackPluginOptions.styles) %>,
+      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
+      optimization: process.env['NODE_ENV'] === 'production',
+    }),
+    new NxReactRspackPlugin({
+      // Uncomment this line if you don't want to use SVGR
+      // See: https://react-svgr.com/
+      // svgr: false
+    }),
+    new NxModuleFederationPlugin({ config: browserMfConfig }, { dts: false }),
+  ],
+};
+
+const serverRspackConfig = {
+  name: 'server',
+  target: 'async-node',
+  output: {
+    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'server'),
+    filename: 'server.js'
+  },
+  plugins: [
+    new NxAppRspackPlugin({
+      outputPath: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'server'),
+      outputFileName: 'server.js',
+      tsConfig: '<%= rspackPluginOptions.tsConfig %>',
+      main: '<%= rspackPluginOptions.mainServer %>',
+      baseHref: '<%= rspackPluginOptions.baseHref %>',
+    }),
+    new NxModuleFederationPlugin({ config: serverMfConfig, isServer: true }, { dts: false }),
+    new NxModuleFederationSSRDevServerPlugin({ config: serverMfConfig }),
+  ],
+};
+
+module.exports = [browserRspackConfig, serverRspackConfig];

package/src/generators/host/files/rspack-module-federation-ssr/server.ts__tmpl__

@@ -7,7 +7,7 @@ import { handleRequest } from './src/main.server';
 const port = process.env['PORT'] || <%= port %>;
 const app = express();
 
-const browserDist = path.join(process.cwd(), '<%= browserBuildOutputPath %>');
+const browserDist = path.join(process.cwd(), '<%= rspackPluginOptions.outputPath %>', 'browser');
 const indexPath = path.join(browserDist, 'index.html');
 
 app.use(cors());

package/src/generators/host/files/rspack-module-federation-ssr/src/main.server.tsx__tmpl__

@@ -0,0 +1,49 @@
+import type { Request, Response } from 'express';
+import * as fs from 'fs';
+import * as ReactDOMServer from 'react-dom/server';
+import isbot from 'isbot'
+
+import App from './app/app';
+
+import { StaticRouter } from 'react-router-dom/server';
+
+
+let indexHtml: null | string = null;
+
+export function handleRequest(indexPath: string) {
+  return function render(req: Request, res: Response) {
+    let didError = false;
+
+    if (!indexHtml) {
+      indexHtml = fs.readFileSync(indexPath).toString();
+    }
+
+    const [htmlStart, htmlEnd] = indexHtml.split(`<div id="root"></div>`);
+
+    // For bots (e.g. search engines), the content will not be streamed but render all at once.
+    // For users, content should be streamed to the user as they are ready.
+    const callbackName = isbot(req.headers['user-agent']) ? 'onAllReady' : 'onShellReady';
+
+    const stream = ReactDOMServer.renderToPipeableStream(
+      <StaticRouter location={req.originalUrl}><App /></StaticRouter>,
+      {
+        [callbackName]() {
+          res.statusCode = didError ? 500 : 200;
+          res.setHeader('Content-type', 'text/html; charset=utf-8');
+          res.write(`${htmlStart}<div id="root">`);
+          stream.pipe(res);
+          res.write(`</div>${htmlEnd}`);
+        },
+        onShellError(error) {
+          console.error(error);
+          res.statusCode = 500;
+          res.send('<!doctype html><h1>Server Error</h1>');
+        },
+        onError(error) {
+          didError = true;
+          console.error(error);
+        }
+      }
+    );
+  }
+}

package/src/generators/host/files/rspack-module-federation-ssr-ts/module-federation.server.config.ts__tmpl__

@@ -1,13 +1,22 @@
-import { ModuleFederationConfig } from '@nx/rspack/module-federation';
+import { ModuleFederationConfig } from '@nx/module-federation';
 
 const config: ModuleFederationConfig = {
-    name: '<%= projectName %>',
-    remotes: [
-      <% if (static) { 
-         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
-       }
-    %>
+  name: '<%= projectName %>',
+  remotes: [
+    <%_ if (static) { 
+      remotes.forEach(function(r) { _%>
+    "<%= r.fileName %>", 
+      <%_ }); } _%>
   ],
+  shared: (libraryName, libraryConfig) => {
+    return {
+      ...libraryConfig,
+      eager: true
+    }
+  },
 };
 
+/**
+* Nx requires a default export of the config to allow correct resolution of the module federation graph.
+**/
 export default config;

package/src/generators/host/files/rspack-module-federation-ssr-ts/rspack.config.ts__tmpl__

@@ -0,0 +1,66 @@
+import { NxAppRspackPlugin } from '@nx/rspack/app-plugin';
+import { NxReactRspackPlugin } from '@nx/rspack/react-plugin';
+import { NxModuleFederationPlugin, NxModuleFederationSSRDevServerPlugin } from '@nx/module-federation/rspack';
+import { join } from 'path';
+
+import browserMfConfig from './module-federation.config';
+import serverMfConfig from './module-federation.server.config';
+
+const browserRspackConfig = {
+  name: 'browser',
+  output: {
+    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'browser'),
+    publicPath: 'auto'
+  },
+  devServer: {
+    port: <%= devServerPort %>,
+    historyApiFallback: {
+      index: '/index.html',
+      disableDotRule: true,
+      htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
+    },
+    devMiddleware: {
+      writeToDisk: (file: string) => !file.includes('.hot-update.'),
+    },
+  },
+  plugins: [
+    new NxAppRspackPlugin({
+      tsConfig: '<%= rspackPluginOptions.tsConfig %>',
+      main: '<%= rspackPluginOptions.main %>',
+      index: '<%= rspackPluginOptions.index %>',
+      baseHref: '<%= rspackPluginOptions.baseHref %>',
+      assets: <%- JSON.stringify(rspackPluginOptions.assets) %>,
+      styles: <%- JSON.stringify(rspackPluginOptions.styles) %>,
+      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
+      optimization: process.env['NODE_ENV'] === 'production',
+    }),
+    new NxReactRspackPlugin({
+      // Uncomment this line if you don't want to use SVGR
+      // See: https://react-svgr.com/
+      // svgr: false
+    }),
+    new NxModuleFederationPlugin({ config: browserMfConfig }, { dts: false }),
+  ],
+};
+
+const serverRspackConfig = {
+  name: 'server',
+    target: 'async-node',
+    output: {
+      path: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'server'),
+      filename: 'server.js'
+    },
+    plugins: [
+      new NxAppRspackPlugin({
+        outputPath: join(__dirname, '<%= rspackPluginOptions.outputPath %>', 'server'),
+        outputFileName: 'server.js',
+        tsConfig: '<%= rspackPluginOptions.tsConfig %>',
+        main: '<%= rspackPluginOptions.mainServer %>',
+        baseHref: '<%= rspackPluginOptions.baseHref %>',
+      }),
+      new NxModuleFederationPlugin({ config: serverMfConfig, isServer: true }, { dts: false }),
+      new NxModuleFederationSSRDevServerPlugin({ config: serverMfConfig }),
+    ],
+};
+
+export default [browserRspackConfig, serverRspackConfig];

package/src/generators/host/files/rspack-module-federation-ssr-ts/server.ts__tmpl__

@@ -7,7 +7,7 @@ import { handleRequest } from './src/main.server';
 const port = process.env['PORT'] || <%= port %>;
 const app = express();
 
-const browserDist = path.join(process.cwd(), '<%= browserBuildOutputPath %>');
+const browserDist = path.join(process.cwd(), '<%= rspackPluginOptions.outputPath %>', 'browser');
 const indexPath = path.join(browserDist, 'index.html');
 
 app.use(cors());

package/src/generators/host/files/rspack-module-federation-ssr-ts/src/main.server.tsx__tmpl__

@@ -0,0 +1,49 @@
+import type { Request, Response } from 'express';
+import * as fs from 'fs';
+import * as ReactDOMServer from 'react-dom/server';
+import isbot from 'isbot'
+
+import App from './app/app';
+
+import { StaticRouter } from 'react-router-dom/server';
+
+
+let indexHtml: null | string = null;
+
+export function handleRequest(indexPath: string) {
+  return function render(req: Request, res: Response) {
+    let didError = false;
+
+    if (!indexHtml) {
+      indexHtml = fs.readFileSync(indexPath).toString();
+    }
+
+    const [htmlStart, htmlEnd] = indexHtml.split(`<div id="root"></div>`);
+
+    // For bots (e.g. search engines), the content will not be streamed but render all at once.
+    // For users, content should be streamed to the user as they are ready.
+    const callbackName = isbot(req.headers['user-agent']) ? 'onAllReady' : 'onShellReady';
+
+    const stream = ReactDOMServer.renderToPipeableStream(
+      <StaticRouter location={req.originalUrl}><App /></StaticRouter>,
+      {
+        [callbackName]() {
+          res.statusCode = didError ? 500 : 200;
+          res.setHeader('Content-type', 'text/html; charset=utf-8');
+          res.write(`${htmlStart}<div id="root">`);
+          stream.pipe(res);
+          res.write(`</div>${htmlEnd}`);
+        },
+        onShellError(error) {
+          console.error(error);
+          res.statusCode = 500;
+          res.send('<!doctype html><h1>Server Error</h1>');
+        },
+        onError(error) {
+          didError = true;
+          console.error(error);
+        }
+      }
+    );
+  }
+}

package/src/generators/host/files/rspack-module-federation-ts/module-federation.config.ts__tmpl__

@@ -1,25 +1,28 @@
-import { ModuleFederationConfig } from '@nx/rspack/module-federation';
+import { ModuleFederationConfig } from '@nx/module-federation';
 
 const config: ModuleFederationConfig = {
-    name: '<%= projectName %>',
-    /**
-     * To use a remote that does not exist in your current Nx Workspace
-     * You can use the tuple-syntax to define your remote
-     *
-     * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
-     *
-     * You _may_ need to add a `remotes.d.ts` file to your `src/` folder declaring the external remote for tsc, with the
-     * following content:
-     *
-     * declare module 'my-external-remote';
-     *
-     */
-    remotes: [
-            <% if (static) { 
-         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
-       }
-    %>
+  name: '<%= projectName %>',
+  /**
+    * To use a remote that does not exist in your current Nx Workspace
+    * You can use the tuple-syntax to define your remote
+    *
+    * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+    *
+    * You _may_ need to add a `remotes.d.ts` file to your `src/` folder declaring the external remote for tsc, with the
+    * following content:
+    *
+    * declare module 'my-external-remote';
+    *
+    */
+  remotes: [
+    <%_ if (static) { 
+        remotes.forEach(function(r) { _%> 
+    "<%= r.fileName %>", 
+    <%_ }); } _%>
   ],
 };
 
+/**
+* Nx requires a default export of the config to allow correct resolution of the module federation graph.
+**/
 export default config;

package/src/generators/host/files/rspack-module-federation-ts/rspack.config.prod.ts__tmpl__

@@ -1,36 +1,67 @@
-import { composePlugins, withNx, withReact } from '@nx/rspack';
-import { withModuleFederation, ModuleFederationConfig } from '@nx/rspack/module-federation';
+import { NxAppRspackPlugin } from '@nx/rspack/app-plugin';
+import { NxReactRspackPlugin } from '@nx/rspack/react-plugin';
+import { NxModuleFederationPlugin, NxModuleFederationDevServerPlugin } from '@nx/module-federation/rspack';
+import { ModuleFederationConfig } from '@nx/module-federation';
+import { join } from 'path';
 
 import baseConfig from './module-federation.config';
 
 const prodConfig: ModuleFederationConfig = {
-    ...baseConfig,
-    /*
-     * Remote overrides for production.
-     * Each entry is a pair of a unique name and the URL where it is deployed.
-     *
-     * e.g.
-     * remotes: [
-     *   ['app1', 'http://app1.example.com'],
-     *   ['app2', 'http://app2.example.com'],
-     * ]
-     *
-     * You can also use a full path to the remoteEntry.js file if desired.
-     *
-     * remotes: [
-     *   ['app1', 'http://example.com/path/to/app1/remoteEntry.js'],
-     *   ['app2', 'http://example.com/path/to/app2/remoteEntry.js'],
-     * ]
-     */
-    remotes: [
-        <% remotes.forEach(function(r) {%>['<%= r.fileName %>', 'http://localhost:<%= r.port %>/'],<% }); %>
-],
+	...baseConfig,
+	/*
+		* Remote overrides for production.
+		* Each entry is a pair of a unique name and the URL where it is deployed.
+		*
+		* e.g.
+		* remotes: [
+		*   ['app1', 'http://app1.example.com'],
+		*   ['app2', 'http://app2.example.com'],
+		* ]
+		*
+		* You can also use a full path to the remoteEntry.js file if desired.
+		*
+		* remotes: [
+		*   ['app1', 'http://example.com/path/to/app1/remoteEntry.js'],
+		*   ['app2', 'http://example.com/path/to/app2/remoteEntry.js'],
+		* ]
+		*/
+	remotes: [
+		<%_ remotes.forEach(function(r) { _%>
+		['<%= r.fileName %>', 'http://localhost:<%= r.port %>/'],
+		<%_ }); _%>
+	],
 };
 
-// Nx plugins for rspack to build config object from Nx options and context.
-/**
- * DTS Plugin is disabled in Nx Workspaces as Nx already provides Typing support for Module Federation
- * The DTS Plugin can be enabled by setting dts: true
- * Learn more about the DTS Plugin here: https://module-federation.io/configure/dts.html
- */
-export default composePlugins(withNx(), withReact(), withModuleFederation(prodConfig, { dts: false }));
+export default {
+  output: {
+    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>'),
+    publicPath: 'auto'
+  },
+  devServer: {
+    port: <%= devServerPort %>,
+    historyApiFallback: {
+      index: '/index.html',
+      disableDotRule: true,
+      htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
+    },
+  },
+  plugins: [
+    new NxAppRspackPlugin({
+      tsConfig: '<%= rspackPluginOptions.tsConfig %>',
+      main: '<%= rspackPluginOptions.main %>',
+      index: '<%= rspackPluginOptions.index %>',
+      baseHref: '<%= rspackPluginOptions.baseHref %>',
+      assets: <%- JSON.stringify(rspackPluginOptions.assets) %>,
+      styles: <%- JSON.stringify(rspackPluginOptions.styles) %>,
+      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
+      optimization: process.env['NODE_ENV'] === 'production',
+    }),
+    new NxReactRspackPlugin({
+      // Uncomment this line if you don't want to use SVGR
+      // See: https://react-svgr.com/
+      // svgr: false
+    }),
+    new NxModuleFederationPlugin({ config: prodConfig }, { dts: false }),
+    new NxModuleFederationDevServerPlugin({ config: prodConfig }),
+  ],
+};

package/src/generators/host/files/rspack-module-federation-ts/rspack.config.ts__tmpl__

@@ -1,16 +1,40 @@
-import {composePlugins, withNx, withReact} from '@nx/rspack';
-import {withModuleFederation, ModuleFederationConfig} from '@nx/rspack/module-federation';
+import { NxAppRspackPlugin } from '@nx/rspack/app-plugin';
+import { NxReactRspackPlugin } from '@nx/rspack/react-plugin';
+import { NxModuleFederationPlugin, NxModuleFederationDevServerPlugin } from '@nx/module-federation/rspack';
+import { join } from 'path';
 
-import baseConfig from './module-federation.config';
+import config from './module-federation.config';
 
-const config: ModuleFederationConfig = {
-    ...baseConfig,
+export default {
+  output: {
+    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>'),
+    publicPath: 'auto'
+  },
+  devServer: {
+    port: <%= devServerPort %>,
+    historyApiFallback: {
+      index: '/index.html',
+      disableDotRule: true,
+      htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
+    },
+  },
+  plugins: [
+    new NxAppRspackPlugin({
+      tsConfig: '<%= rspackPluginOptions.tsConfig %>',
+      main: '<%= rspackPluginOptions.main %>',
+      index: '<%= rspackPluginOptions.index %>',
+      baseHref: '<%= rspackPluginOptions.baseHref %>',
+      assets: <%- JSON.stringify(rspackPluginOptions.assets) %>,
+      styles: <%- JSON.stringify(rspackPluginOptions.styles) %>,
+      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
+      optimization: process.env['NODE_ENV'] === 'production',
+    }),
+    new NxReactRspackPlugin({
+      // Uncomment this line if you don't want to use SVGR
+      // See: https://react-svgr.com/
+      // svgr: false
+    }),
+    new NxModuleFederationPlugin({ config }, { dts: false }),
+    new NxModuleFederationDevServerPlugin({ config }),
+  ],
 };
-
-// Nx plugins for rspack to build config object from Nx options and context.
-/**
- * DTS Plugin is disabled in Nx Workspaces as Nx already provides Typing support for Module Federation
- * The DTS Plugin can be enabled by setting dts: true
- * Learn more about the DTS Plugin here: https://module-federation.io/configure/dts.html
- */
-export default composePlugins(withNx(), withReact(), withModuleFederation(config, { dts: false }));

package/src/generators/host/files/webpack-module-federation/module-federation.config.js__tmpl__

@@ -1,3 +1,6 @@
+/**
+* Nx requires a default export of the config to allow correct resolution of the module federation graph.
+**/
 module.exports = {
   name: '<%= projectName %>',
   /**
@@ -13,9 +16,9 @@ module.exports = {
    *
    */
   remotes: [
-    <% if (static) { 
-         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
-       }
-    %>
+    <%_ if (static) { 
+      remotes.forEach(function(r) { _%> 
+    "<%= r.fileName %>", 
+      <%_ }); } _%>
   ],
-};
+};

package/src/generators/host/files/webpack-module-federation/webpack.config.js__tmpl__

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