@nx/react 23.0.0-pr.35413.460eeef → 23.0.0-rc.0

package/{src → dist/src}/generators/application/lib/update-jest-config.js

@@ -10,9 +10,6 @@ function updateSpecConfig(host, options) {
     (0, devkit_1.updateJson)(host, `${options.appProjectRoot}/tsconfig.spec.json`, (json) => {
         const compilerOptions = json.compilerOptions ?? {};
         const types = compilerOptions.types ?? [];
-        if (options.style === 'styled-jsx') {
-            types.push('@nx/react/typings/styled-jsx.d.ts');
-        }
         types.push('@nx/react/typings/cssmodule.d.ts', '@nx/react/typings/image.d.ts');
         compilerOptions.types = types;
         json.compilerOptions = compilerOptions;

package/{src → dist/src}/generators/application/schema.d.ts

@@ -44,7 +44,6 @@ export interface NormalizedSchema<T extends Schema = Schema> extends T {
   importPath: string;
   parsedTags: string[];
   fileName: string;
-  styledModule: null | SupportedStyles;
   hasStyles: boolean;
   unitTestRunner: 'jest' | 'vitest' | 'none';
   addPlugin?: boolean;

package/{src → dist/src}/generators/application/schema.json

@@ -45,6 +45,7 @@
       "type": "string",
       "default": "css",
       "alias": "s",
+      "enum": ["css", "scss", "none"],
       "x-prompt": {
         "message": "Which stylesheet format would you like to use?",
         "type": "list",
@@ -55,27 +56,7 @@
           },
           {
             "value": "scss",
-            "label": "SASS(.scss)       [ https://sass-lang.com                    ]"
-          },
-          {
-            "value": "less",
-            "label": "LESS              [ https://lesscss.org                      ]"
-          },
-          {
-            "value": "tailwind",
-            "label": "tailwind          [ https://tailwindcss.com/                 ]"
-          },
-          {
-            "value": "styled-components",
-            "label": "styled-components [ https://styled-components.com            ]"
-          },
-          {
-            "value": "@emotion/styled",
-            "label": "emotion           [ https://emotion.sh                       ]"
-          },
-          {
-            "value": "styled-jsx",
-            "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
+            "label": "SASS(.scss)       [ https://sass-lang.com   ]"
           },
           {
             "value": "none",

package/{src → dist/src}/generators/component/component.d.ts

@@ -2,4 +2,3 @@ import { GeneratorCallback, Tree } from '@nx/devkit';
 import { Schema } from './schema';
 export declare function componentGenerator(host: Tree, schema: Schema): Promise<GeneratorCallback>;
 export default componentGenerator;
-//# sourceMappingURL=component.d.ts.map

package/{src → dist/src}/generators/component/component.js

@@ -2,23 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentGenerator = componentGenerator;
 const devkit_1 = require("@nx/devkit");
-const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+const internal_1 = require("@nx/js/internal");
 const path_1 = require("path");
-const add_styled_dependencies_1 = require("../../rules/add-styled-dependencies");
 const ast_utils_1 = require("../../utils/ast-utils");
 const get_in_source_vitest_tests_template_1 = require("../../utils/get-in-source-vitest-tests-template");
-const versions_1 = require("../../utils/versions");
 const get_component_tests_1 = require("./lib/get-component-tests");
 const normalize_options_1 = require("./lib/normalize-options");
+const versions_1 = require("../../utils/versions");
+const assert_supported_react_version_1 = require("../../utils/assert-supported-react-version");
 async function componentGenerator(host, schema) {
+    (0, assert_supported_react_version_1.assertSupportedReactVersion)(host);
     const options = await (0, normalize_options_1.normalizeOptions)(host, schema);
     createComponentFiles(host, options);
     const tasks = [];
-    const styledTask = (0, add_styled_dependencies_1.addStyledModuleDependencies)(host, options);
-    tasks.push(styledTask);
     addExportsToBarrel(host, options);
     if (options.routing) {
-        const routingTask = (0, devkit_1.addDependenciesToPackageJson)(host, { 'react-router-dom': versions_1.reactRouterDomVersion }, {});
+        const routingTask = (0, devkit_1.addDependenciesToPackageJson)(host, { 'react-router-dom': versions_1.reactRouterDomVersion }, {}, undefined, true);
         tasks.push(routingTask);
     }
     if (!options.skipFormat) {
@@ -38,17 +37,17 @@ function createComponentFiles(host, options) {
     if (options.skipTests || options.inSourceTests) {
         host.delete((0, devkit_1.joinPathFragments)(options.directory, `${options.fileName}.spec.${options.fileExtension}`));
     }
-    if (options.styledModule || !options.hasStyles || !options.globalCss) {
+    if (!options.hasStyles || !options.globalCss) {
         host.delete((0, path_1.join)(options.directory, `${options.fileName}.${options.style}`));
     }
-    if (options.styledModule || !options.hasStyles || options.globalCss) {
+    if (!options.hasStyles || options.globalCss) {
         host.delete((0, path_1.join)(options.directory, `${options.fileName}.module.${options.style}`));
     }
 }
 let tsModule;
 function addExportsToBarrel(host, options) {
     if (!tsModule) {
-        tsModule = (0, ensure_typescript_1.ensureTypescript)();
+        tsModule = (0, internal_1.ensureTypescript)();
     }
     const workspace = (0, devkit_1.getProjects)(host);
     const isApp = workspace.get(options.projectName).projectType === 'application';

package/{src → dist/src}/generators/component/files/__fileName__.__ext__

@@ -6,34 +6,21 @@ import { Route, Link } from 'react-router-dom';
 <%_ } _%>
 
 <%_ if (hasStyles) {
-   if (styledModule && styledModule !== 'styled-jsx' && styledModule !== 'tailwind') {
-    var wrapper = 'Styled' + className;
-    var extras = '';
-  _%>
-import styled from '<%= styledModule %>';
-  <%_ } else {
     var wrapper = 'div';
-    var extras = globalCss || styledModule === 'styled-jsx' || styledModule === 'tailwind' ? '' : " className={styles['container']}";
+    var extras = globalCss ? '' : " className={styles['container']}";
   _%>
-<%- style !== 'styled-jsx' && style!== 'tailwind' ? globalCss ? `import './${fileName}.${style}';` : `import styles from './${fileName}.module.${style}';`: '' %>
-  <%_ }
-} else {
+<%- globalCss ? `import './${fileName}.${style}';` : `import styles from './${fileName}.module.${style}';` %>
+<%_ } else {
     var wrapper = 'div';
     var extras = '';
 } _%>
 
-<%_ if (styledModule && styledModule !== 'styled-jsx' && styledModule !== 'tailwind') { _%>
-const Styled<%= className %> = styled.div`
-  color: pink;
-`;
-<%_ } _%>
 <%_ if(!isNextPage) { _%>
   <%_ if (classComponent) { _%>
 export class <%= className %> extends Component<% if (isTs) { %><{}><% } %> {
   <% if (isTs) { %>override<% } %> render() {
     return (
       <<%= wrapper %><%- extras %>>
-        <%= styledModule === 'styled-jsx' ? `<style jsx>{\`div { color: pink; }\`}</style>` : `` %>
         <p>Welcome to <%= className %>!</p>
         <%_ if (routing) { _%>
           <ul>
@@ -49,7 +36,6 @@ export class <%= className %> extends Component<% if (isTs) { %><{}><% } %> {
 export function <%= className %>() {
   return (
     <<%= wrapper %><%- extras %>>
-      <%_ if (styledModule === 'styled-jsx') { _%><style jsx>{`div { color: pink; }`}</style><%_ } _%>
       <h1>Welcome to <%= className %>!</h1>
       <%_ if (routing) { _%>
         <ul>
@@ -67,7 +53,6 @@ export default <%= className %>;
 export default function <%= className %>() {
   return (
     <<%= wrapper %><%- extras %>>
-      <%_ if (styledModule === 'styled-jsx') { _%><style jsx>{`div { color: pink; }`}</style><%_ } _%>
       <h1>Welcome to <%= className %>!</h1>
       <% if (routing) { %>
         <ul>

package/{src → dist/src}/generators/component/lib/get-component-tests.d.ts

@@ -1,3 +1,2 @@
 import { NormalizedSchema } from '../schema';
 export declare function getComponentTests(schema: NormalizedSchema): string;
-//# sourceMappingURL=get-component-tests.d.ts.map

package/{src → dist/src}/generators/component/lib/normalize-options.d.ts

@@ -1,4 +1,3 @@
 import { Tree } from '@nx/devkit';
 import { NormalizedSchema, Schema } from '../schema';
 export declare function normalizeOptions(tree: Tree, options: Schema): Promise<NormalizedSchema>;
-//# sourceMappingURL=normalize-options.d.ts.map

package/{src → dist/src}/generators/component/lib/normalize-options.js

@@ -2,26 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeOptions = normalizeOptions;
 const devkit_1 = require("@nx/devkit");
-const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
+const internal_1 = require("@nx/devkit/internal");
 const assertion_1 = require("../../../utils/assertion");
-const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
+const internal_2 = require("@nx/js/internal");
 async function normalizeOptions(tree, options) {
     (0, assertion_1.assertValidStyle)(options.style);
-    const { artifactName: name, directory, fileName, filePath, fileExtension, fileExtensionType, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(tree, {
+    const { artifactName: name, directory, fileName, filePath, fileExtension, fileExtensionType, project: projectName, } = await (0, internal_1.determineArtifactNameAndDirectoryOptions)(tree, {
         path: options.path,
         name: options.name,
         allowedFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
-        fileExtension: options.js ? 'js' : 'tsx',
-        js: options.js,
+        fileExtension: 'tsx',
     });
     const project = (0, devkit_1.readProjectConfiguration)(tree, projectName);
     const { className } = (0, devkit_1.names)(name);
     const { sourceRoot: projectSourceRoot, root: projectRoot, projectType, } = project;
-    const styledModule = /^(css|scss|less|none)$/.test(options.style)
-        ? null
-        : options.style;
     if (options.export &&
-        (0, ts_solution_setup_1.getProjectType)(tree, projectRoot, projectType) === 'application') {
+        (0, internal_2.getProjectType)(tree, projectRoot, projectType) === 'application') {
         devkit_1.logger.warn(`The "--export" option should not be used with applications and will do nothing.`);
     }
     options.classComponent = options.classComponent ?? false;
@@ -34,7 +30,6 @@ async function normalizeOptions(tree, options) {
         ...options,
         directory,
         projectName,
-        styledModule,
         hasStyles: options.style !== 'none',
         className,
         fileName,

package/{src → dist/src}/generators/component/schema.d.ts

@@ -1,4 +1,4 @@
-import type { FileExtensionType } from '@nx/devkit/src/generators/artifact-name-and-directory-utils';
+import type { FileExtensionType } from '@nx/devkit/internal';
 import { SupportedStyles } from '../../../typings/style';
 
 export interface Schema {
@@ -14,14 +14,9 @@ export interface Schema {
   skipFormat?: boolean;
   // Used by Next.js to determine how React should generate the page
   isNextPage?: boolean;
-
-  /**
-   * @deprecated Provide the full file path including the file extension in the `path` option. This option will be removed in Nx v21.
-   */
-  js?: boolean;
 }
 
-export interface NormalizedSchema extends Omit<Schema, 'js'> {
+export interface NormalizedSchema extends Schema {
   directory: string;
   projectRoot: string;
   projectSourceRoot: string;
@@ -31,6 +26,5 @@ export interface NormalizedSchema extends Omit<Schema, 'js'> {
   fileExtension: string;
   fileExtensionType: FileExtensionType;
   className: string;
-  styledModule: null | string;
   hasStyles: boolean;
 }

package/{src → dist/src}/generators/component/schema.json

@@ -25,6 +25,7 @@
       "type": "string",
       "alias": "s",
       "default": "css",
+      "enum": ["css", "scss", "none"],
       "x-prompt": {
         "message": "Which stylesheet format would you like to use?",
         "type": "list",
@@ -35,27 +36,7 @@
           },
           {
             "value": "scss",
-            "label": "SASS(.scss)       [ https://sass-lang.com          ]"
-          },
-          {
-            "value": "less",
-            "label": "LESS              [ https://lesscss.org            ]"
-          },
-          {
-            "value": "tailwind",
-            "label": "tailwind          [ https://tailwindcss.com/       ]"
-          },
-          {
-            "value": "styled-components",
-            "label": "styled-components [ https://styled-components.com ]"
-          },
-          {
-            "value": "@emotion/styled",
-            "label": "emotion           [ https://emotion.sh            ]"
-          },
-          {
-            "value": "styled-jsx",
-            "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
+            "label": "SASS(.scss)       [ https://sass-lang.com   ]"
           },
           {
             "value": "none",
@@ -64,11 +45,6 @@
         ]
       }
     },
-    "js": {
-      "type": "boolean",
-      "description": "Generate JavaScript files rather than TypeScript files.",
-      "x-deprecated": "Provide the full file path including the file extension in the `path` option. This option will be removed in Nx v21."
-    },
     "skipTests": {
       "type": "boolean",
       "description": "When true, does not create `spec.ts` test files for the new component.",

package/{src → dist/src}/generators/component-story/component-story.d.ts

@@ -11,4 +11,3 @@ export declare function createComponentStoriesFile(host: Tree, { project, compon
 export declare function findPropsAndGenerateFile(host: Tree, sourceFile: ts.SourceFile, cmpDeclaration: ts.Node, componentDirectory: string, name: string, interactionTests: boolean, uiFramework: string, isPlainJs: boolean, fromNodeArray?: boolean): void;
 export declare function componentStoryGenerator(host: Tree, schema: CreateComponentStoriesFileSchema): Promise<void>;
 export default componentStoryGenerator;
-//# sourceMappingURL=component-story.d.ts.map

package/{src → dist/src}/generators/component-story/component-story.js

@@ -4,8 +4,8 @@ exports.createComponentStoriesFile = createComponentStoriesFile;
 exports.findPropsAndGenerateFile = findPropsAndGenerateFile;
 exports.componentStoryGenerator = componentStoryGenerator;
 const devkit_1 = require("@nx/devkit");
-const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
-const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
+const assert_supported_react_version_1 = require("../../utils/assert-supported-react-version");
+const internal_1 = require("@nx/js/internal");
 const ast_utils_1 = require("../../utils/ast-utils");
 const component_props_1 = require("../../utils/component-props");
 const framework_1 = require("../../utils/framework");
@@ -13,10 +13,10 @@ const path_1 = require("path");
 let tsModule;
 function createComponentStoriesFile(host, { project, componentPath, interactionTests, uiFramework, }) {
     if (!tsModule) {
-        tsModule = (0, ensure_typescript_1.ensureTypescript)();
+        tsModule = (0, internal_1.ensureTypescript)();
     }
     const proj = (0, devkit_1.getProjects)(host).get(project);
-    const componentFilePath = (0, devkit_1.joinPathFragments)((0, ts_solution_setup_1.getProjectSourceRoot)(proj, host), componentPath);
+    const componentFilePath = (0, devkit_1.joinPathFragments)((0, internal_1.getProjectSourceRoot)(proj, host), componentPath);
     const componentDirectory = componentFilePath.replace(componentFilePath.slice(componentFilePath.lastIndexOf('/')), '');
     const isPlainJs = componentFilePath.endsWith('.jsx') || componentFilePath.endsWith('.js');
     const componentFileName = componentFilePath
@@ -62,6 +62,7 @@ function findPropsAndGenerateFile(host, sourceFile, cmpDeclaration, componentDir
     });
 }
 async function componentStoryGenerator(host, schema) {
+    (0, assert_supported_react_version_1.assertSupportedReactVersion)(host);
     createComponentStoriesFile(host, {
         ...schema,
         interactionTests: schema.interactionTests ?? true,

package/{src → dist/src}/generators/component-test/component-test.d.ts

@@ -2,4 +2,3 @@ import { Tree } from '@nx/devkit';
 import { ComponentTestSchema } from './schema';
 export declare function componentTestGenerator(tree: Tree, options: ComponentTestSchema): Promise<void>;
 export default componentTestGenerator;
-//# sourceMappingURL=component-test.d.ts.map

package/{src → dist/src}/generators/component-test/component-test.js

@@ -2,19 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentTestGenerator = componentTestGenerator;
 const devkit_1 = require("@nx/devkit");
-const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
-const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
+const assert_supported_react_version_1 = require("../../utils/assert-supported-react-version");
+const internal_1 = require("@nx/js/internal");
 const path_1 = require("path");
 const ast_utils_1 = require("../../utils/ast-utils");
 const component_props_1 = require("../../utils/component-props");
 const versions_1 = require("../../utils/versions");
 let tsModule;
 async function componentTestGenerator(tree, options) {
+    (0, assert_supported_react_version_1.assertSupportedReactVersion)(tree);
     (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
     // normalize any windows paths
     options.componentPath = options.componentPath.replace(/\\/g, '/');
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
-    const sourceRoot = (0, ts_solution_setup_1.getProjectSourceRoot)(projectConfig, tree);
+    const sourceRoot = (0, internal_1.getProjectSourceRoot)(projectConfig, tree);
     const normalizedPath = options.componentPath.startsWith(sourceRoot)
         ? (0, path_1.relative)(sourceRoot, options.componentPath)
         : options.componentPath;
@@ -25,7 +26,7 @@ async function componentTestGenerator(tree, options) {
 }
 function generateSpecsForComponents(tree, filePath) {
     if (!tsModule) {
-        tsModule = (0, ensure_typescript_1.ensureTypescript)();
+        tsModule = (0, internal_1.ensureTypescript)();
     }
     const sourceFile = tsModule.createSourceFile(filePath, tree.read(filePath, 'utf-8'), tsModule.ScriptTarget.Latest, true);
     const cmpNodes = (0, ast_utils_1.findExportDeclarationsForJsx)(sourceFile);

package/{src → dist/src}/generators/component-test/schema.d.ts

@@ -2,4 +2,3 @@ export interface ComponentTestSchema {
     project: string;
     componentPath: string;
 }
-//# sourceMappingURL=schema.d.ts.map

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

@@ -0,0 +1,4 @@
+import { GeneratorCallback, Tree } from '@nx/devkit';
+import type { ConsumerGeneratorSchema } from './schema';
+export declare function consumerGenerator(tree: Tree, schema: ConsumerGeneratorSchema): Promise<GeneratorCallback>;
+export default consumerGenerator;

package/dist/src/generators/consumer/consumer.js

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.consumerGenerator = consumerGenerator;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const assert_supported_react_version_1 = require("../../utils/assert-supported-react-version");
+const versions_1 = require("@nx/js/src/utils/versions");
+const versions_2 = require("../../utils/versions");
+const mfVersions = tslib_1.__importStar(require("../_utils/mf-versions"));
+const mf_dependencies_1 = require("../_utils/mf-dependencies");
+const normalize_1 = require("../_utils/normalize");
+const provider_1 = tslib_1.__importDefault(require("../provider/provider"));
+// `--mode=...` is rspack's portable equivalent of `NODE_ENV=...` and works on
+// Windows without a shell prefix.
+const BUNDLER_DEV_COMMAND = {
+    vite: 'vite',
+    rsbuild: 'rsbuild dev',
+    rspack: 'rspack serve --mode=development',
+};
+const BUNDLER_BUILD_COMMAND = {
+    vite: 'vite build',
+    rsbuild: 'rsbuild build',
+    rspack: 'rspack build --mode=production',
+};
+async function consumerGenerator(tree, schema) {
+    (0, assert_supported_react_version_1.assertSupportedReactVersion)(tree);
+    const opts = await (0, normalize_1.normalizeScaffoldOptions)(tree, {
+        directory: schema.directory,
+        surface: 'consumer',
+        bundler: schema.bundler,
+        port: schema.port,
+    });
+    // When the user explicitly passes `--providerNames=p1,p2`, generate a
+    // sibling provider app per entry and wire them into the consumer's
+    // PROVIDERS list + App.tsx. When the flag is omitted, ship a placeholder
+    // `my-provider` entry pointing at the per-bundler provider-default port
+    // without generating an actual provider project.
+    const providerNames = schema.providerNames?.length
+        ? schema.providerNames
+        : ['my-provider'];
+    const shouldGenerateProviders = !!schema.providerNames?.length;
+    const providerDefaultPort = (0, normalize_1.getDefaultPort)(opts.bundler, 'provider');
+    const providers = providerNames.map((name, i) => ({
+        name,
+        // The federation container name the provider build emits. Must match the
+        // provider's federation `name`, which is derived the same way (see
+        // provider.ts / normalize.ts) - it strips chars that aren't valid in a JS
+        // identifier, so a naive `alias.replace(/-/g, '_')` in the consumer would
+        // diverge for names with dots/slashes/@ and loadRemote() would resolve the
+        // URL but look up the wrong container.
+        federationName: (0, normalize_1.toFederationName)((0, devkit_1.names)(name).fileName),
+        componentName: `Provider${(0, devkit_1.names)(name).className}`,
+        directory: (0, devkit_1.joinPathFragments)(opts.projectRoot, '..', name),
+        port: providerDefaultPort + i,
+    }));
+    (0, devkit_1.addProjectConfiguration)(tree, opts.projectName, {
+        root: opts.projectRoot,
+        sourceRoot: (0, devkit_1.joinPathFragments)(opts.projectRoot, 'src'),
+        projectType: 'application',
+        targets: {
+            serve: {
+                executor: 'nx:run-commands',
+                continuous: true,
+                options: {
+                    command: BUNDLER_DEV_COMMAND[opts.bundler],
+                    cwd: opts.projectRoot,
+                },
+            },
+            build: {
+                executor: 'nx:run-commands',
+                options: {
+                    command: BUNDLER_BUILD_COMMAND[opts.bundler],
+                    cwd: opts.projectRoot,
+                },
+            },
+        },
+    });
+    const tasks = [];
+    if (shouldGenerateProviders) {
+        for (const p of providers) {
+            tasks.push(await (0, provider_1.default)(tree, {
+                directory: p.directory,
+                bundler: opts.bundler,
+                port: p.port,
+                // Wire `nx serve <provider>` to also spin up this consumer.
+                consumer: opts.projectName,
+            }));
+        }
+    }
+    // Point at `remoteEntry.js`, which every supported bundler emits at dev
+    // time. `mf-manifest.json` is richer (https://module-federation.io/configure/manifest-fields)
+    // but `@module-federation/vite` only emits it at build time, so a consumer
+    // serving against a dev-mode vite provider would get the SPA-fallback HTML
+    // and crash on JSON.parse. Swap to mf-manifest.json manually for prod if
+    // you want the extra metadata.
+    const remotes = providers.map((p) => ({
+        // `alias` is the key the consumer references (loadRemote/lazyProvider);
+        // `name` is the provider's federation container name; `entry` is its
+        // remoteEntry.js URL.
+        alias: p.name,
+        name: p.federationName,
+        entry: `http://localhost:${p.port}/remoteEntry.js`,
+    }));
+    // Vite emits ESM `remoteEntry.js`; rspack/rsbuild emit UMD. The federation
+    // runtime needs `type: 'module'` for ESM (else loads as a classic <script>
+    // and the browser throws #RUNTIME-001) and NO type for UMD (else
+    // #RUNTIME-002). We only generate same-bundler providers via --providerNames,
+    // so a single per-consumer setting is correct.
+    const remoteType = opts.bundler === 'vite' ? 'module' : null;
+    const templateSubstitutions = {
+        projectName: opts.projectName,
+        federationName: opts.federationName,
+        port: opts.port,
+        bundler: opts.bundler,
+        providers,
+        remotes,
+        remoteType,
+        versions: {
+            ...mfVersions,
+            reactVersion: versions_2.reactVersion,
+            reactDomVersion: versions_2.reactDomVersion,
+            typesReactVersion: versions_2.typesReactVersion,
+            typesReactDomVersion: versions_2.typesReactDomVersion,
+            typescriptVersion: versions_1.typescriptVersion,
+        },
+        tmpl: '',
+    };
+    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, 'files', '_common'), opts.projectRoot, templateSubstitutions);
+    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, 'files', opts.bundler), opts.projectRoot, templateSubstitutions);
+    // Write deps into the workspace root package.json so bare bundler bins
+    // resolve when nx invokes the generated run-commands serve target.
+    const deps = (0, mf_dependencies_1.getConsumerDeps)(opts.bundler);
+    tasks.push((0, devkit_1.addDependenciesToPackageJson)(tree, deps.dependencies, deps.devDependencies, undefined, true));
+    await (0, devkit_1.formatFiles)(tree);
+    return (0, devkit_1.runTasksInSerial)(...tasks);
+}
+exports.default = consumerGenerator;

package/dist/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/dist/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/dist/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/dist/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 };
+  });
+}