@nx/react 23.0.0-beta.20 → 23.0.0-beta.22

package/src/generators/consumer/files/_common/src/App.tsx__tmpl__

@@ -0,0 +1,53 @@
+import { Component, Suspense, type ReactNode } from 'react';
+import { lazyProvider } from './mf';
+
+// ProviderBoundary catches the lazy() rejection that fires when a provider's
+// remoteEntry.js can't be fetched (provider not running, network error,
+// etc.). Without it any one missing provider unmounts the whole consumer
+// tree. React has no built-in functional error boundary so this is a class.
+// Wrap each <ProviderBoundary> in your router of choice if you need routing.
+class ProviderBoundary extends Component<
+  { children: ReactNode; name: string },
+  { error: Error | null }
+> {
+  state = { error: null as Error | null };
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+  render() {
+    if (this.state.error) {
+      return (
+        <div role="alert">
+          <p>
+            Provider &quot;{this.props.name}&quot; unavailable:{' '}
+            {this.state.error.message}
+          </p>
+        </div>
+      );
+    }
+    return (
+      <Suspense fallback={<p>Loading {this.props.name}...</p>}>
+        {this.props.children}
+      </Suspense>
+    );
+  }
+}
+
+<% providers.forEach((p) => { -%>
+const <%= p.componentName %> = lazyProvider('<%= p.name %>', 'App');
+<% }); -%>
+
+export function App() {
+  return (
+    <main>
+      <h1><%= projectName %></h1>
+<% providers.forEach((p) => { -%>
+      <ProviderBoundary name="<%= p.name %>">
+        <<%= p.componentName %> />
+      </ProviderBoundary>
+<% }); -%>
+    </main>
+  );
+}
+
+export default App;

package/src/generators/consumer/files/_common/src/bootstrap.tsx__tmpl__

@@ -0,0 +1,12 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+
+const container = document.getElementById('root');
+if (!container) throw new Error('#root element not found');
+
+createRoot(container).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/src/generators/consumer/files/_common/src/index.ts__tmpl__

@@ -0,0 +1,4 @@
+// Indirection required by Module Federation: the federation runtime must boot
+// before any shared dependency (React, react-dom) is evaluated.
+import('./bootstrap');
+export {};

package/src/generators/consumer/files/_common/src/mf.ts__tmpl__

@@ -0,0 +1,35 @@
+import { lazy, type ComponentType } from 'react';
+import { registerRemotes, loadRemote } from '@module-federation/runtime';
+
+// The providers this consumer loads at runtime. Edit `entry` to point at a
+// different URL (`remoteEntry.js` is what every supported bundler emits at dev
+// + build time). `name` is the provider build's federation container name and
+// must match the provider's federation `name`; `alias` is the key you pass to
+// loadRemote()/lazyProvider().
+const PROVIDERS: Array<{ alias: string; name: string; entry: string }> =
+  <%- JSON.stringify(remotes, null, 2) %>;
+
+<% if (remoteType === 'module') { -%>
+// `type: 'module'` is required because the providers in this workspace are
+// vite-built and emit ESM remoteEntry.js. The federation runtime would load
+// it as a classic `<script>` tag otherwise and the browser would throw
+// `Cannot use import statement outside a module` (#RUNTIME-001).
+registerRemotes(PROVIDERS.map((remote) => ({ ...remote, type: 'module' })));
+<% } else { -%>
+// `type` is omitted so the federation runtime auto-detects the entry format.
+// The providers in this workspace are <%= bundler %>-built and emit UMD;
+// setting `type: 'module'` here breaks them with #RUNTIME-002.
+registerRemotes(PROVIDERS.map((remote) => ({ ...remote })));
+<% } -%>
+
+export function lazyProvider<Props = unknown>(
+  alias: string,
+  exposeName: string
+) {
+  return lazy(async () => {
+    const mod = await loadRemote<{ default: ComponentType<Props> }>(
+      `${alias}/${exposeName}`
+    );
+    return { default: mod!.default };
+  });
+}

package/src/generators/consumer/files/_common/tsconfig.json__tmpl__

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}

package/src/generators/consumer/files/rsbuild/index.html__tmpl__

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title><%= projectName %></title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!-- Rsbuild's html plugin injects the entry script automatically. -->
+  </body>
+</html>

package/src/generators/consumer/files/rsbuild/package.json__tmpl__

@@ -0,0 +1,23 @@
+{
+  "name": "<%= projectName %>",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "rsbuild dev --port <%= port %>",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview --port <%= port %>"
+  },
+  "dependencies": {
+    "@module-federation/runtime": "<%= versions.moduleFederationRuntimeVersion %>",
+    "react": "<%= versions.reactVersion %>",
+    "react-dom": "<%= versions.reactDomVersion %>"
+  },
+  "devDependencies": {
+    "@module-federation/rsbuild-plugin": "<%= versions.moduleFederationRsbuildPluginVersion %>",
+    "@rsbuild/core": "<%= versions.rsbuildCoreVersion %>",
+    "@rsbuild/plugin-react": "<%= versions.rsbuildPluginReactVersion %>",
+    "@types/react": "<%= versions.typesReactVersion %>",
+    "@types/react-dom": "<%= versions.typesReactDomVersion %>",
+    "typescript": "<%= versions.typescriptVersion %>"
+  }
+}

package/src/generators/consumer/files/rsbuild/rsbuild.config.ts__tmpl__

@@ -0,0 +1,25 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
+
+const PORT = <%= port %>;
+const NAME = '<%= federationName %>';
+
+export default defineConfig({
+  server: { port: PORT },
+  // assetPrefix:true keeps chunk URLs aligned with the dev-server origin -
+  // mirrors the provider config so a consumer that also exposes federated
+  // modules later doesn't need a separate fix.
+  dev: { assetPrefix: true },
+  html: { template: './index.html' },
+  source: { entry: { index: './src/index.ts' } },
+  plugins: [
+    pluginReact(),
+    pluginModuleFederation({
+      name: NAME,
+      // No build-time `remotes:` block - registered at runtime in src/mf.ts
+      // at module load time.
+      shared: ['react', 'react-dom'],
+    }),
+  ],
+});

package/src/generators/consumer/files/rspack/index.html__tmpl__

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title><%= projectName %></title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!-- HtmlRspackPlugin injects the entry script automatically; do not add it here. -->
+  </body>
+</html>

package/src/generators/consumer/files/rspack/package.json__tmpl__

@@ -0,0 +1,23 @@
+{
+  "name": "<%= projectName %>",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "rspack serve --mode=development",
+    "build": "rspack build --mode=production"
+  },
+  "dependencies": {
+    "@module-federation/enhanced": "<%= versions.moduleFederationEnhancedVersion %>",
+    "@module-federation/runtime": "<%= versions.moduleFederationRuntimeVersion %>",
+    "react": "<%= versions.reactVersion %>",
+    "react-dom": "<%= versions.reactDomVersion %>"
+  },
+  "devDependencies": {
+    "@rspack/cli": "<%= versions.rspackCliVersion %>",
+    "@rspack/core": "<%= versions.rspackCoreVersion %>",
+    "@rspack/dev-server": "<%= versions.rspackDevServerVersion %>",
+    "@types/react": "<%= versions.typesReactVersion %>",
+    "@types/react-dom": "<%= versions.typesReactDomVersion %>",
+    "typescript": "<%= versions.typescriptVersion %>"
+  }
+}

package/src/generators/consumer/files/rspack/rspack.config.ts__tmpl__

@@ -0,0 +1,59 @@
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
+import * as path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+// __dirname is undefined when @rspack/cli loads this config as ESM (it
+// does, because the file uses `import` statements). Derive it from the
+// module URL so the config works regardless of how the loader interprets it.
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const PORT = <%= port %>;
+const NAME = '<%= federationName %>';
+
+// Read mode from the rspack CLI arg (`--mode=development|production`) so the
+// config works the same on Windows + POSIX without depending on a shell
+// `NODE_ENV=...` prefix.
+export default defineConfig((_env, argv) => {
+  const isDev = argv.mode !== 'production';
+  return {
+    context: __dirname,
+    entry: { main: './src/index.ts' },
+    output: {
+      path: path.resolve(__dirname, 'dist'),
+      publicPath: 'auto',
+      uniqueName: NAME,
+      clean: true,
+    },
+    devServer: { port: PORT, historyApiFallback: true, hot: true },
+    resolve: { extensions: ['...', '.ts', '.tsx', '.jsx'] },
+    module: {
+      rules: [
+        {
+          test: /\.(j|t)sx?$/,
+          exclude: [/node_modules/],
+          use: {
+            loader: 'builtin:swc-loader',
+            options: {
+              jsc: {
+                parser: { syntax: 'typescript', tsx: true },
+                transform: { react: { runtime: 'automatic', development: isDev } },
+              },
+              env: { targets: 'Chrome >= 87, Firefox >= 78, Edge >= 88, Safari >= 14' },
+            },
+          },
+        },
+      ],
+    },
+    plugins: [
+      new rspack.HtmlRspackPlugin({ template: './index.html' }),
+      new ModuleFederationPlugin({
+        name: NAME,
+        // No build-time `remotes:` block - registered at runtime in
+        // src/mf.ts at module load time.
+        shared: ['react', 'react-dom'],
+      }),
+    ],
+  };
+});

package/src/generators/consumer/files/vite/index.html__tmpl__

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title><%= projectName %></title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.ts"></script>
+  </body>
+</html>

package/src/generators/consumer/files/vite/package.json__tmpl__

@@ -0,0 +1,24 @@
+{
+  "name": "<%= projectName %>",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port <%= port %> --strictPort",
+    "build": "vite build",
+    "preview": "vite preview --port <%= port %> --strictPort"
+  },
+  "dependencies": {
+    "@module-federation/runtime": "<%= versions.moduleFederationRuntimeVersion %>",
+    "react": "<%= versions.reactVersion %>",
+    "react-dom": "<%= versions.reactDomVersion %>"
+  },
+  "devDependencies": {
+    "@module-federation/vite": "<%= versions.moduleFederationVitePluginVersion %>",
+    "@types/react": "<%= versions.typesReactVersion %>",
+    "@types/react-dom": "<%= versions.typesReactDomVersion %>",
+    "@vitejs/plugin-react": "<%= versions.vitejsPluginReactVersion %>",
+    "typescript": "<%= versions.typescriptVersion %>",
+    "vite": "<%= versions.viteVersion %>"
+  }
+}

package/src/generators/consumer/files/vite/vite.config.ts__tmpl__

@@ -0,0 +1,27 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { federation } from '@module-federation/vite';
+
+const PORT = <%= port %>;
+
+export default defineConfig({
+  server: {
+    port: PORT,
+    strictPort: true,
+    host: '127.0.0.1',
+  },
+  preview: { port: PORT, strictPort: true },
+  build: { target: 'chrome89' },
+  plugins: [
+    federation({
+      name: '<%= federationName %>',
+      // No build-time `remotes:` block - the consumer registers them at
+      // runtime in src/mf.ts at module load time.
+      shared: {
+        react: { singleton: true },
+        'react-dom': { singleton: true },
+      },
+    }),
+    react(),
+  ],
+});

package/src/generators/consumer/schema.d.ts

@@ -0,0 +1,8 @@
+import type { SupportedBundler } from '../_utils/normalize';
+
+export interface ConsumerGeneratorSchema {
+  directory: string;
+  bundler?: SupportedBundler;
+  port?: number;
+  providerNames?: string[];
+}

package/src/generators/consumer/schema.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "$id": "NxReactConsumer",
+  "title": "Create a Module Federation consumer",
+  "description": "Scaffold a React Module Federation consumer. The bundler is selected at generation time; remotes are registered dynamically at runtime from an inline PROVIDERS list in src/mf.ts (no build-time remotes list).",
+  "cli": "nx",
+  "type": "object",
+  "properties": {
+    "directory": {
+      "type": "string",
+      "description": "Directory the consumer is generated in, e.g. `apps/my-consumer`. The project name is inferred from the trailing path segment.",
+      "alias": "dir",
+      "$default": { "$source": "argv", "index": 0 },
+      "x-prompt": "Which directory do you want to create the consumer in?"
+    },
+    "bundler": {
+      "type": "string",
+      "description": "Bundler used by the consumer. Final choice; cannot be switched later.",
+      "enum": ["vite", "rsbuild", "rspack"],
+      "default": "vite",
+      "x-prompt": {
+        "message": "Which bundler should the consumer use?",
+        "type": "list",
+        "items": [
+          { "value": "vite", "label": "Vite (default)" },
+          { "value": "rsbuild", "label": "Rsbuild" },
+          { "value": "rspack", "label": "Rspack" }
+        ]
+      }
+    },
+    "port": {
+      "type": "number",
+      "description": "Dev-server port the consumer listens on."
+    },
+    "providerNames": {
+      "type": "array",
+      "items": { "type": "string" },
+      "description": "Comma-separated list of provider project names to generate alongside this consumer. Each becomes an `@nx/react:provider` app sibling to the consumer and an entry in the `PROVIDERS` list in `src/mf.ts`. Defaults to `[my-provider]` as a placeholder (no provider is generated until you pass the flag explicitly).",
+      "alias": "providers"
+    }
+  },
+  "required": ["directory"]
+}

package/src/generators/federate-module/federate-module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"federate-module.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/federate-module/federate-module.ts"],"names":[],"mappings":"AACA,OAAO,EACL,iBAAiB,EACjB,IAAI,EAQL,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAMlC,wBAAsB,uBAAuB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,8BAiEvE;AAED,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"federate-module.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/federate-module/federate-module.ts"],"names":[],"mappings":"AACA,OAAO,EACL,iBAAiB,EACjB,IAAI,EAQL,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAOlC,wBAAsB,uBAAuB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,8BAkEvE;AAED,eAAe,uBAAuB,CAAC"}

package/src/generators/federate-module/federate-module.js

@@ -6,7 +6,9 @@ const devkit_1 = require("@nx/devkit");
 const remote_1 = require("../remote/remote");
 const utils_1 = require("./lib/utils");
 const js_1 = require("@nx/js");
+const module_federation_deprecation_1 = require("../../utils/module-federation-deprecation");
 async function federateModuleGenerator(tree, schema) {
+    (0, module_federation_deprecation_1.warnReactFederateModuleGeneratorDeprecation)();
     // Check if the file exists
     if (!tree.exists(schema.path)) {
         throw new Error((0, devkit_1.stripIndents) `The "path" provided  does not exist. Please verify the path is correct and pointing to a file that exists in the workspace.

package/src/generators/host/host.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"host.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/host/host.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,iBAAiB,EAKjB,IAAI,EAGL,MAAM,YAAY,CAAC;AAapB,OAAO,EAAoB,MAAM,EAAE,MAAM,UAAU,CAAC;AAWpD,wBAAsB,aAAa,CACjC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,GACb,OAAO,CAAC,iBAAiB,CAAC,CAmJ5B;AAmCD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"host.d.ts","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/host/host.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,iBAAiB,EAKjB,IAAI,EAGL,MAAM,YAAY,CAAC;AAapB,OAAO,EAAoB,MAAM,EAAE,MAAM,UAAU,CAAC;AAYpD,wBAAsB,aAAa,CACjC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,GACb,OAAO,CAAC,iBAAiB,CAAC,CAoJ5B;AAmCD,eAAe,aAAa,CAAC"}

package/src/generators/host/host.js

@@ -19,7 +19,9 @@ const internal_2 = require("@nx/js/internal");
 const versions_1 = require("../../utils/versions");
 const update_module_federation_tsconfig_1 = require("./lib/update-module-federation-tsconfig");
 const normalize_host_name_1 = require("./lib/normalize-host-name");
+const module_federation_deprecation_1 = require("../../utils/module-federation-deprecation");
 async function hostGenerator(host, schema) {
+    (0, module_federation_deprecation_1.warnReactHostGeneratorDeprecation)();
     const tasks = [];
     const name = await (0, normalize_host_name_1.normalizeHostName)(host, schema.directory, schema.name);
     const options = {

package/src/generators/provider/files/_common/src/__componentName__.tsx__tmpl__

@@ -0,0 +1,11 @@
+// Exposed by the federation plugin as '<%= projectName %>/<%= exposeName %>'.
+// Consumers render it lazily via `lazyProvider('<%= projectName %>', '<%= exposeName %>')`.
+export function <%= componentName %>() {
+  return (
+    <section data-testid="<%= projectName %>">
+      <h1>Hello from <%= projectName %></h1>
+    </section>
+  );
+}
+
+export default <%= componentName %>;

package/src/generators/provider/files/_common/src/bootstrap.tsx__tmpl__

@@ -0,0 +1,12 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { <%= componentName %> } from './<%= componentName %>';
+
+const container = document.getElementById('root');
+if (!container) throw new Error('#root element not found');
+
+createRoot(container).render(
+  <StrictMode>
+    <<%= componentName %> />
+  </StrictMode>
+);

package/src/generators/provider/files/_common/src/index.ts__tmpl__

@@ -0,0 +1,5 @@
+// Indirection required by Module Federation: the federation runtime must boot
+// before any shared dependency (React, react-dom, etc.) is evaluated. Dynamic
+// `import('./bootstrap')` defers the real entry until federation is ready.
+import('./bootstrap');
+export {};

package/src/generators/provider/files/_common/tsconfig.json__tmpl__

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}

package/src/generators/provider/files/rsbuild/index.html__tmpl__

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title><%= projectName %> (standalone)</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!-- Rsbuild's html plugin injects the entry script automatically. -->
+  </body>
+</html>

package/src/generators/provider/files/rsbuild/package.json__tmpl__

@@ -0,0 +1,22 @@
+{
+  "name": "<%= projectName %>",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "rsbuild dev --port <%= port %>",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview --port <%= port %>"
+  },
+  "dependencies": {
+    "react": "<%= versions.reactVersion %>",
+    "react-dom": "<%= versions.reactDomVersion %>"
+  },
+  "devDependencies": {
+    "@module-federation/rsbuild-plugin": "<%= versions.moduleFederationRsbuildPluginVersion %>",
+    "@rsbuild/core": "<%= versions.rsbuildCoreVersion %>",
+    "@rsbuild/plugin-react": "<%= versions.rsbuildPluginReactVersion %>",
+    "@types/react": "<%= versions.typesReactVersion %>",
+    "@types/react-dom": "<%= versions.typesReactDomVersion %>",
+    "typescript": "<%= versions.typescriptVersion %>"
+  }
+}

package/src/generators/provider/files/rsbuild/rsbuild.config.ts__tmpl__

@@ -0,0 +1,31 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
+
+const PORT = <%= port %>;
+const NAME = '<%= federationName %>';
+
+export default defineConfig({
+  server: {
+    port: PORT,
+    // Allow cross-origin fetches from a consumer on a different port.
+    headers: { 'Access-Control-Allow-Origin': '*' },
+  },
+  // assetPrefix:true tells rsbuild to emit chunks with the dev-server URL as
+  // their public path. Without it a consumer on a different port asks its
+  // own origin for the federated chunks and gets the SPA-fallback HTML.
+  dev: { assetPrefix: true },
+  html: { template: './index.html' },
+  source: { entry: { index: './src/index.ts' } },
+  plugins: [
+    pluginReact(),
+    pluginModuleFederation({
+      name: NAME,
+      filename: 'remoteEntry.js',
+      exposes: {
+        './<%= exposeName %>': './src/<%= componentName %>.tsx',
+      },
+      shared: ['react', 'react-dom'],
+    }),
+  ],
+});

package/src/generators/provider/files/rspack/index.html__tmpl__

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title><%= projectName %> (standalone)</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!-- HtmlRspackPlugin injects the entry script automatically; do not add it here. -->
+  </body>
+</html>

package/src/generators/provider/files/rspack/package.json__tmpl__

@@ -0,0 +1,22 @@
+{
+  "name": "<%= projectName %>",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "rspack serve --mode=development",
+    "build": "rspack build --mode=production"
+  },
+  "dependencies": {
+    "@module-federation/enhanced": "<%= versions.moduleFederationEnhancedVersion %>",
+    "react": "<%= versions.reactVersion %>",
+    "react-dom": "<%= versions.reactDomVersion %>"
+  },
+  "devDependencies": {
+    "@rspack/cli": "<%= versions.rspackCliVersion %>",
+    "@rspack/core": "<%= versions.rspackCoreVersion %>",
+    "@rspack/dev-server": "<%= versions.rspackDevServerVersion %>",
+    "@types/react": "<%= versions.typesReactVersion %>",
+    "@types/react-dom": "<%= versions.typesReactDomVersion %>",
+    "typescript": "<%= versions.typescriptVersion %>"
+  }
+}