npm - @nx/react - Versions diffs - 20.8.0-canary.20250402-2d210b8 → 20.8.0-canary.20250404-6e50a01 - Mend

@nx/react 20.8.0-canary.20250402-2d210b8 → 20.8.0-canary.20250404-6e50a01

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

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

@@ -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/rspack.config.prod.ts__tmpl__ CHANGED Viewed

@@ -1,6 +1,8 @@
-import { composePlugins, withNx, withReact } from '@nx/rspack';
-import { withModuleFederation } from '@nx/module-federation/rspack';
+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';
@@ -30,10 +32,36 @@ const prodConfig: ModuleFederationConfig = {
 	],
 };
-// 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__ CHANGED Viewed

@@ -1,17 +1,40 @@
-import {composePlugins, withNx, withReact} from '@nx/rspack';
-import { withModuleFederation } from '@nx/module-federation/rspack';
-import { ModuleFederationConfig } from '@nx/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/host.js CHANGED Viewed

@@ -16,11 +16,14 @@ const js_1 = require("@nx/js");
 const versions_1 = require("../../utils/versions");
 const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
 const update_module_federation_tsconfig_1 = require("./lib/update-module-federation-tsconfig");
+const normalize_host_name_1 = require("./lib/normalize-host-name");
 async function hostGenerator(host, schema) {
     const tasks = [];
+    const name = await (0, normalize_host_name_1.normalizeHostName)(host, schema.directory, schema.name);
     const options = {
         ...(await (0, normalize_options_1.normalizeOptions)(host, {
             ...schema,
+            name,
             useProjectJson: true,
         })),
         js: schema.js ?? false,
@@ -28,8 +31,8 @@ async function hostGenerator(host, schema) {
             ? false
             : schema.typescriptConfiguration ?? true,
         dynamic: schema.dynamic ?? false,
-        // TODO(colum): remove when MF works with Crystal
-        addPlugin: false,
+        // TODO(colum): remove when Webpack MF works with Crystal
+        addPlugin: !schema.bundler || schema.bundler === 'rspack' ? true : false,
         bundler: schema.bundler ?? 'rspack',
     };
     // Check to see if remotes are provided and also check if --dynamic is provided
@@ -81,25 +84,22 @@ async function hostGenerator(host, schema) {
         }
     }
     (0, add_module_federation_files_1.addModuleFederationFiles)(host, options, remotesWithPorts);
-    (0, update_module_federation_project_1.updateModuleFederationProject)(host, options);
+    (0, update_module_federation_project_1.updateModuleFederationProject)(host, options, true);
     (0, update_module_federation_e2e_project_1.updateModuleFederationE2eProject)(host, options);
     (0, update_module_federation_tsconfig_1.updateModuleFederationTsconfig)(host, options);
     if (options.ssr) {
-        const setupSsrTask = await (0, setup_ssr_1.default)(host, {
-            project: options.projectName,
-            serverPort: options.devServerPort,
-            skipFormat: true,
-        });
-        tasks.push(setupSsrTask);
+        if (options.bundler !== 'rspack') {
+            const setupSsrTask = await (0, setup_ssr_1.default)(host, {
+                project: options.projectName,
+                serverPort: options.devServerPort,
+                skipFormat: true,
+            });
+            tasks.push(setupSsrTask);
+        }
         const setupSsrForHostTask = await (0, setup_ssr_for_host_1.setupSsrForHost)(host, options, options.projectName, remotesWithPorts);
         tasks.push(setupSsrForHostTask);
         const projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.projectName);
-        if (options.bundler === 'rspack') {
-            projectConfig.targets.server.executor = '@nx/rspack:rspack';
-            projectConfig.targets.server.options.rspackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, `rspack.server.config.${options.typescriptConfiguration ? 'ts' : 'js'}`);
-            delete projectConfig.targets.server.options.webpackConfig;
-        }
-        else {
+        if (options.bundler !== 'rspack') {
             projectConfig.targets.server.options.webpackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, `webpack.server.config.${options.typescriptConfiguration ? 'ts' : 'js'}`);
         }
         (0, devkit_1.updateProjectConfiguration)(host, options.projectName, projectConfig);

package/src/generators/host/lib/add-module-federation-files.js CHANGED Viewed

@@ -3,19 +3,35 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addModuleFederationFiles = addModuleFederationFiles;
 const devkit_1 = require("@nx/devkit");
 const maybe_js_1 = require("../../../utils/maybe-js");
+const create_application_files_1 = require("../../application/lib/create-application-files");
 function addModuleFederationFiles(host, options, defaultRemoteManifest) {
-    const templateVariables = {
-        ...(0, devkit_1.names)(options.projectName),
-        ...options,
-        static: !options?.dynamic,
-        tmpl: '',
-        remotes: defaultRemoteManifest.map(({ name, port }) => {
-            return {
-                ...(0, devkit_1.names)(name),
-                port,
-            };
-        }),
-    };
+    const templateVariables = options.bundler === 'rspack'
+        ? {
+            ...(0, create_application_files_1.getDefaultTemplateVariables)(host, options),
+            rspackPluginOptions: {
+                ...(0, create_application_files_1.createNxRspackPluginOptions)(options, (0, devkit_1.offsetFromRoot)(options.appProjectRoot), false),
+                mainServer: `./server.ts`,
+            },
+            static: !options?.dynamic,
+            remotes: defaultRemoteManifest.map(({ name, port }) => {
+                return {
+                    ...(0, devkit_1.names)(name),
+                    port,
+                };
+            }),
+        }
+        : {
+            ...(0, devkit_1.names)(options.projectName),
+            ...options,
+            static: !options?.dynamic,
+            tmpl: '',
+            remotes: defaultRemoteManifest.map(({ name, port }) => {
+                return {
+                    ...(0, devkit_1.names)(name),
+                    port,
+                };
+            }),
+        };
     const projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.projectName);
     const pathToMFManifest = (0, devkit_1.joinPathFragments)(projectConfig.sourceRoot, 'assets/module-federation.manifest.json');
     // Module federation requires bootstrap code to be dynamically imported.

package/src/generators/host/lib/normalize-host-name.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { Tree } from '@nx/devkit';
2	+ export declare function normalizeHostName(tree: Tree, directory: string, name?: string): Promise<string>;

package/src/generators/host/lib/normalize-host-name.js ADDED Viewed

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeHostName = normalizeHostName;
+const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
+async function normalizeHostName(tree, directory, name) {
+    const { projectName } = await (0, project_name_and_root_utils_1.determineProjectNameAndRootOptions)(tree, {
+        name,
+        directory,
+        projectType: 'application',
+    });
+    return projectName;
+}

package/src/generators/host/lib/setup-ssr-for-host.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
-import type { GeneratorCallback, Tree } from '@nx/devkit';
-import type { Schema } from '../schema';
-export declare function setupSsrForHost(tree: Tree, options: Schema, appName: string, defaultRemoteManifest: {
+import { GeneratorCallback, Tree } from '@nx/devkit';
+import type { NormalizedSchema } from '../schema';
+export declare function setupSsrForHost(tree: Tree, options: NormalizedSchema, appName: string, defaultRemoteManifest: {
     name: string;
     port: number;
 }[]): Promise<GeneratorCallback>;

package/src/generators/host/lib/setup-ssr-for-host.js CHANGED Viewed

@@ -2,35 +2,59 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupSsrForHost = setupSsrForHost;
 const devkit_1 = require("@nx/devkit");
+const devkit_2 = require("@nx/devkit");
 const versions_1 = require("../../../utils/versions");
+const create_application_files_1 = require("../../application/lib/create-application-files");
 async function setupSsrForHost(tree, options, appName, defaultRemoteManifest) {
     const tasks = [];
-    let project = (0, devkit_1.readProjectConfiguration)(tree, appName);
-    project.targets.serve.executor =
-        options.bundler === 'rspack'
-            ? '@nx/rspack:module-federation-ssr-dev-server'
-            : '@nx/react:module-federation-ssr-dev-server';
-    (0, devkit_1.updateProjectConfiguration)(tree, appName, project);
+    let project = (0, devkit_2.readProjectConfiguration)(tree, appName);
+    if (options.bundler !== 'rspack') {
+        project.targets.serve.executor =
+            '@nx/react:module-federation-ssr-dev-server';
+        (0, devkit_2.updateProjectConfiguration)(tree, appName, project);
+    }
     const pathToModuleFederationSsrFiles = options.typescriptConfiguration
         ? `${options.bundler === 'rspack' ? 'rspack-' : 'webpack-'}module-federation-ssr-ts`
         : `${options.bundler === 'rspack' ? 'rspack-' : 'webpack-'}module-federation-ssr`;
-    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, `../files/${pathToModuleFederationSsrFiles}`), project.root, {
-        ...options,
-        static: !options?.dynamic,
-        port: Number(options?.devServerPort) || 4200,
-        remotes: defaultRemoteManifest.map(({ name, port }) => {
-            return {
-                ...(0, devkit_1.names)(name),
-                port,
-            };
-        }),
-        appName,
-        tmpl: '',
-        browserBuildOutputPath: project.targets.build.options.outputPath,
-    });
-    const installTask = (0, devkit_1.addDependenciesToPackageJson)(tree, {
+    const templateVariables = options.bundler === 'rspack'
+        ? {
+            ...(0, create_application_files_1.getDefaultTemplateVariables)(tree, options),
+            rspackPluginOptions: {
+                ...(0, create_application_files_1.createNxRspackPluginOptions)(options, (0, devkit_1.offsetFromRoot)(options.appProjectRoot), false),
+                mainServer: `./server.ts`,
+            },
+            port: Number(options?.devServerPort) || 4200,
+            appName,
+            static: !options?.dynamic,
+            remotes: defaultRemoteManifest.map(({ name, port }) => {
+                return {
+                    ...(0, devkit_2.names)(name),
+                    port,
+                };
+            }),
+        }
+        : {
+            ...options,
+            static: !options?.dynamic,
+            port: Number(options?.devServerPort) || 4200,
+            appName,
+            tmpl: '',
+            browserBuildOutputPath: project.targets.build?.options?.outputPath,
+            remotes: defaultRemoteManifest.map(({ name, port }) => {
+                return {
+                    ...(0, devkit_2.names)(name),
+                    port,
+                };
+            }),
+        };
+    (0, devkit_2.generateFiles)(tree, (0, devkit_2.joinPathFragments)(__dirname, `../files/${pathToModuleFederationSsrFiles}`), project.root, templateVariables);
+    const installTask = (0, devkit_2.addDependenciesToPackageJson)(tree, {
         '@module-federation/node': versions_1.moduleFederationNodeVersion,
+        cors: versions_1.corsVersion,
+        isbot: versions_1.isbotVersion,
+        express: versions_1.expressVersion,
+        '@types/express': versions_1.typesExpressVersion,
     }, {});
     tasks.push(installTask);
-    return (0, devkit_1.runTasksInSerial)(...tasks);
+    return (0, devkit_2.runTasksInSerial)(...tasks);
 }

package/src/generators/remote/files/rspack-module-federation/rspack.config.js__tmpl__ CHANGED Viewed

@@ -1,16 +1,43 @@
-const { composePlugins, withNx, withReact } = require('@nx/rspack');
-const { withModuleFederation } = require('@nx/module-federation/rspack');
+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 config = require('./module-federation.config');
-const config = {
-  ...baseConfig,
+module.exports = {
+  output: {
+    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>'),
+    publicPath: 'auto'
+  },
+  devServer: {
+    port: <%= devServerPort %>,
+    headers: {
+      "Access-Control-Allow-Origin": "*"
+    },
+    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 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(config, { dts: false }));

package/src/generators/remote/files/rspack-module-federation-ssr/module-federation.server.config.js__tmpl__ CHANGED Viewed

@@ -6,4 +6,10 @@ module.exports = {
   exposes: {
     './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
   },
+  shared: (libraryName, libraryConfig) => {
+      return {
+        ...libraryConfig,
+        eager: true
+      }
+    },
 };

package/src/generators/remote/files/rspack-module-federation-ssr/rspack.config.js__tmpl__ ADDED Viewed

@@ -0,0 +1,69 @@
+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 %>,
+    headers: {
+      "Access-Control-Allow-Origin": "*"
+    },
+    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/remote/files/rspack-module-federation-ssr/server.ts__tmpl__ CHANGED Viewed

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

package/src/generators/remote/files/rspack-module-federation-ssr/src/main.server.tsx__tmpl__ ADDED Viewed

@@ -0,0 +1,45 @@
+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';
+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(<App />, {
+      [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/remote/files/rspack-module-federation-ssr-ts/module-federation.server.config.ts__tmpl__ CHANGED Viewed

@@ -5,6 +5,12 @@ const config: ModuleFederationConfig = {
   exposes: {
       './Module': './src/remote-entry.<%= js ? 'js' : 'ts' %>',
   },
+  shared: (libraryName, libraryConfig) => {
+      return {
+        ...libraryConfig,
+        eager: true
+      }
+    },
 };
 /**