@nx/react 20.2.0-beta.2 → 20.2.0-beta.4

package/src/generators/application/lib/add-project.js

@@ -4,6 +4,8 @@ exports.addProject = addProject;
 const devkit_1 = require("@nx/devkit");
 const has_webpack_plugin_1 = require("../../../utils/has-webpack-plugin");
 const maybe_js_1 = require("../../../utils/maybe-js");
+const has_rspack_plugin_1 = require("../../../utils/has-rspack-plugin");
+const get_import_path_1 = require("@nx/js/src/utils/get-import-path");
 function addProject(host, options) {
     const project = {
         root: options.appProjectRoot,
@@ -20,9 +22,89 @@ function addProject(host, options) {
             };
         }
     }
-    (0, devkit_1.addProjectConfiguration)(host, options.projectName, {
-        ...project,
-    });
+    else if (options.bundler === 'rspack' &&
+        (!(0, has_rspack_plugin_1.hasRspackPlugin)(host) || !options.addPlugin)) {
+        project.targets = {
+            build: createRspackBuildTarget(options),
+            serve: createRspackServeTarget(options),
+        };
+    }
+    if (options.isUsingTsSolutionConfig) {
+        (0, devkit_1.writeJson)(host, (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json'), {
+            name: (0, get_import_path_1.getImportPath)(host, options.name),
+            version: '0.0.1',
+            private: true,
+            nx: {
+                name: options.name,
+                projectType: 'application',
+                sourceRoot: `${options.appProjectRoot}/src`,
+                tags: options.parsedTags?.length ? options.parsedTags : undefined,
+            },
+        });
+    }
+    if (!options.isUsingTsSolutionConfig || options.alwaysGenerateProjectJson) {
+        (0, devkit_1.addProjectConfiguration)(host, options.projectName, {
+            ...project,
+        });
+    }
+}
+function createRspackBuildTarget(options) {
+    return {
+        executor: '@nx/rspack:rspack',
+        outputs: ['{options.outputPath}'],
+        defaultConfiguration: 'production',
+        options: {
+            outputPath: (0, devkit_1.joinPathFragments)('dist', options.appProjectRoot),
+            index: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/index.html'),
+            baseHref: '/',
+            main: (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, `src/main.tsx`)),
+            tsConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
+            assets: [
+                (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/favicon.ico'),
+                (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/assets'),
+            ],
+            rspackConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'rspack.config.js'),
+            styles: options.styledModule || !options.hasStyles
+                ? []
+                : [
+                    (0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/styles.${options.style}`),
+                ],
+            scripts: [],
+            configurations: {
+                development: {
+                    mode: 'development',
+                },
+                production: {
+                    mode: 'production',
+                    optimization: true,
+                    sourceMap: false,
+                    outputHashing: 'all',
+                    namedChunks: false,
+                    extractLicenses: true,
+                    vendorChunk: false,
+                },
+            },
+        },
+    };
+}
+function createRspackServeTarget(options) {
+    return {
+        executor: '@nx/rspack:dev-server',
+        defaultConfiguration: 'development',
+        options: {
+            buildTarget: `${options.projectName}:build`,
+            hmr: true,
+        },
+        configurations: {
+            development: {
+                buildTarget: `${options.projectName}:build:development`,
+            },
+            production: {
+                buildTarget: `${options.projectName}:build:production`,
+                hmr: false,
+            },
+        },
+    };
 }
 function createBuildTarget(options) {
     return {

package/src/generators/application/lib/create-application-files.js

@@ -10,6 +10,8 @@ const maybe_js_1 = require("../../../utils/maybe-js");
 const has_webpack_plugin_1 = require("../../../utils/has-webpack-plugin");
 const get_app_tests_1 = require("./get-app-tests");
 const onboarding_1 = require("nx/src/nx-cloud/utilities/onboarding");
+const has_rspack_plugin_1 = require("../../../utils/has-rspack-plugin");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 async function createApplicationFiles(host, options) {
     let styleSolutionSpecificAppFiles;
     if (options.styledModule && options.style !== 'styled-jsx') {
@@ -46,6 +48,7 @@ async function createApplicationFiles(host, options) {
         inSourceVitestTests: (0, get_in_source_vitest_tests_template_1.getInSourceVitestTestsTemplate)(appTests),
         style: options.style === 'tailwind' ? 'css' : options.style,
         hasStyleFile,
+        isUsingTsSolutionSetup: (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host),
     };
     if (options.bundler === 'vite') {
         (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-vite'), options.appProjectRoot, templateVariables);
@@ -114,7 +117,12 @@ async function createApplicationFiles(host, options) {
         }
     }
     else if (options.bundler === 'rspack') {
-        (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-rspack'), options.appProjectRoot, templateVariables);
+        (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-rspack'), options.appProjectRoot, {
+            ...templateVariables,
+            rspackPluginOptions: (0, has_rspack_plugin_1.hasRspackPlugin)(host)
+                ? createNxRspackPluginOptions(options)
+                : null,
+        });
     }
     if (options.unitTestRunner === 'none' ||
         (options.unitTestRunner === 'vitest' && options.inSourceTests == true)) {
@@ -156,3 +164,24 @@ function createNxWebpackPluginOptions(options) {
             ],
     };
 }
+function createNxRspackPluginOptions(options) {
+    return {
+        target: 'web',
+        outputPath: (0, devkit_1.joinPathFragments)('dist', options.appProjectRoot != '.'
+            ? options.appProjectRoot
+            : options.projectName),
+        index: './src/index.html',
+        baseHref: '/',
+        main: (0, maybe_js_1.maybeJs)({
+            js: options.js,
+            useJsx: true,
+        }, `./src/main.tsx`),
+        tsConfig: './tsconfig.app.json',
+        assets: ['./src/favicon.ico', './src/assets'],
+        styles: options.styledModule || !options.hasStyles
+            ? []
+            : [
+                `./src/styles.${options.style !== 'tailwind' ? options.style : 'css'}`,
+            ],
+    };
+}

package/src/generators/application/lib/normalize-options.js

@@ -7,6 +7,7 @@ const devkit_1 = require("@nx/devkit");
 const project_name_and_root_utils_1 = require("@nx/devkit/src/generators/project-name-and-root-utils");
 const assertion_1 = require("../../../utils/assertion");
 const find_free_port_1 = require("./find-free-port");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 function normalizeDirectory(options) {
     options.directory = options.directory?.replace(/\\{1,2}/g, '/');
     const { projectDirectory } = (0, devkit_1.extractLayoutDirectory)(options.directory);
@@ -51,6 +52,7 @@ async function normalizeOptions(host, options) {
         fileName,
         styledModule,
         hasStyles: options.style !== 'none',
+        isUsingTsSolutionConfig: (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host),
     };
     normalized.routing = normalized.routing ?? false;
     normalized.strict = normalized.strict ?? true;

package/src/generators/application/lib/update-jest-config.js

@@ -17,6 +17,11 @@ function updateSpecConfig(host, options) {
         types.push('@nx/react/typings/cssmodule.d.ts', '@nx/react/typings/image.d.ts');
         compilerOptions.types = types;
         json.compilerOptions = compilerOptions;
+        if (options.isUsingTsSolutionConfig) {
+            // add project reference to the runtime tsconfig.app.json file
+            json.references ??= [];
+            json.references.push({ path: './tsconfig.app.json' });
+        }
         return json;
     });
     if (options.unitTestRunner !== 'jest') {

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

@@ -25,8 +25,12 @@ export interface Schema {
   rootProject?: boolean;
   bundler?: 'webpack' | 'vite' | 'rspack';
   minimal?: boolean;
+  // Internal options
   addPlugin?: boolean;
   nxCloudToken?: string;
+  useTsSolution?: boolean;
+  formatter?: 'prettier' | 'none';
+  alwaysGenerateProjectJson?: boolean; // this is needed for MF currently
 }
 
 export interface NormalizedSchema<T extends Schema = Schema> extends T {
@@ -40,4 +44,5 @@ export interface NormalizedSchema<T extends Schema = Schema> extends T {
   hasStyles: boolean;
   unitTestRunner: 'jest' | 'vitest' | 'none';
   addPlugin?: boolean;
+  isUsingTsSolutionConfig?: boolean;
 }

package/src/generators/application/schema.json

@@ -80,12 +80,6 @@
         ]
       }
     },
-    "linter": {
-      "description": "The tool to use for running lint checks.",
-      "type": "string",
-      "enum": ["eslint", "none"],
-      "default": "eslint"
-    },
     "routing": {
       "type": "boolean",
       "description": "Generate application with routes.",
@@ -104,11 +98,29 @@
       "default": false,
       "x-priority": "internal"
     },
+    "bundler": {
+      "description": "The bundler to use.",
+      "type": "string",
+      "enum": ["vite", "webpack", "rspack"],
+      "x-prompt": "Which bundler do you want to use to build the application?",
+      "default": "vite",
+      "x-priority": "important"
+    },
+    "linter": {
+      "description": "The tool to use for running lint checks.",
+      "type": "string",
+      "enum": ["eslint", "none"],
+      "default": "none",
+      "x-prompt": "Which linter would you like to use?",
+      "x-priority": "important"
+    },
     "unitTestRunner": {
       "type": "string",
       "enum": ["vitest", "jest", "none"],
       "description": "Test runner to use for unit tests.",
-      "default": "vitest"
+      "default": "none",
+      "x-prompt": "What unit test runner should be used?",
+      "x-priority": "important"
     },
     "inSourceTests": {
       "type": "boolean",
@@ -171,14 +183,6 @@
       "default": false,
       "hidden": true
     },
-    "bundler": {
-      "description": "The bundler to use.",
-      "type": "string",
-      "enum": ["vite", "webpack", "rspack"],
-      "x-prompt": "Which bundler do you want to use to build the application?",
-      "default": "vite",
-      "x-priority": "important"
-    },
     "minimal": {
       "description": "Generate a React app with a minimal setup, no separate test files.",
       "type": "boolean",

package/src/generators/component/component.js

@@ -67,7 +67,9 @@ function addExportsToBarrel(host, options) {
     const workspace = (0, devkit_1.getProjects)(host);
     const isApp = workspace.get(options.projectName).projectType === 'application';
     if (options.export && !isApp) {
-        const indexFilePath = (0, devkit_1.joinPathFragments)(options.projectSourceRoot, options.js ? 'index.js' : 'index.ts');
+        const indexFilePath = options.projectSourceRoot
+            ? (0, devkit_1.joinPathFragments)(options.projectSourceRoot, options.js ? 'index.js' : 'index.ts')
+            : (0, devkit_1.joinPathFragments)(options.projectRoot, 'src', options.js ? 'index.js' : 'index.ts');
         const indexSource = host.read(indexFilePath, 'utf-8');
         if (indexSource !== null) {
             const indexSourceFile = tsModule.createSourceFile(indexFilePath, indexSource, tsModule.ScriptTarget.Latest, true);

package/src/generators/component/lib/normalize-options.js

@@ -36,6 +36,7 @@ async function normalizeOptions(tree, options) {
         className,
         fileName,
         filePath,
-        projectSourceRoot: projectSourceRoot ?? projectRoot,
+        projectRoot,
+        projectSourceRoot: projectSourceRoot,
     };
 }

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

@@ -1,4 +1,3 @@
-import type { NameAndDirectoryFormat } from '@nx/devkit/src/generators/artifact-name-and-directory-utils';
 import { SupportedStyles } from '../../../typings/style';
 
 export interface Schema {
@@ -20,6 +19,7 @@ export interface Schema {
 
 export interface NormalizedSchema extends Schema {
   directory: string;
+  projectRoot: string;
   projectSourceRoot: string;
   projectName: string;
   fileName: string;

package/src/generators/component/schema.json

@@ -8,19 +8,17 @@
   "properties": {
     "path": {
       "type": "string",
-      "description": "Path where the component will be generated.",
+      "description": "The file path to the component without the file extension. Relative to the current working directory.",
       "$default": {
         "$source": "argv",
         "index": 0
       },
-      "x-prompt": "Where should the component be generated?",
+      "x-prompt": "What is the component file path?",
       "x-priority": "important"
     },
     "name": {
       "type": "string",
-      "description": "The name of the component.",
-      "x-prompt": "What name would you like to use for the component?",
-      "x-priority": "important"
+      "description": "The component symbol name. Defaults to the last segment of the file path."
     },
     "style": {
       "description": "The file extension to be used for style files.",

package/src/generators/hook/hook.js

@@ -49,22 +49,20 @@ function addExportsToBarrel(host, options) {
     }
 }
 async function normalizeOptions(host, options) {
-    assertValidOptions(options);
-    const { directory, fileName: _fileName, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(host, {
+    const { artifactName, directory, fileName: hookFilename, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(host, {
         path: options.path,
         name: options.name,
         fileExtension: 'tsx',
     });
-    const { className, fileName } = (0, devkit_1.names)(_fileName);
-    // If using `as-provided` file and directory, then don't normalize.
-    // Otherwise, support legacy behavior of prefixing filename with `use-`.
-    const hookFilename = fileName;
-    const hookName = className.toLocaleLowerCase().startsWith('use')
-        ? className
-        : 'use'.concat(className);
-    const hookTypeName = className.toLocaleLowerCase().startsWith('use')
-        ? className
-        : 'Use'.concat(className);
+    const { className } = (0, devkit_1.names)(hookFilename);
+    // if name is provided, use it as is for the hook name, otherwise prepend
+    // `use` to the pascal-cased file name if it doesn't already start with `use`
+    const hookName = options.name
+        ? artifactName
+        : className.toLocaleLowerCase().startsWith('use')
+            ? className
+            : `use${className}`;
+    const hookTypeName = (0, devkit_1.names)(hookName).className;
     const project = (0, devkit_1.getProjects)(host).get(projectName);
     const { sourceRoot: projectSourceRoot, projectType } = project;
     if (options.export && projectType === 'application') {
@@ -80,17 +78,4 @@ async function normalizeOptions(host, options) {
         projectName,
     };
 }
-function assertValidOptions(options) {
-    const slashes = ['/', '\\'];
-    slashes.forEach((s) => {
-        if (options.name.indexOf(s) !== -1) {
-            const [name, ...rest] = options.name.split(s).reverse();
-            let suggestion = rest.map((x) => x.toLowerCase()).join(s);
-            if (options.directory) {
-                suggestion = `${options.directory}${s}${suggestion}`;
-            }
-            throw new Error(`Found "${s}" in the hook name. Did you mean to use the --directory option (e.g. \`nx g c ${name} --directory ${suggestion}\`)?`);
-        }
-    });
-}
 exports.default = hookGenerator;

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

@@ -2,8 +2,6 @@ export interface Schema {
   path: string;
   name?: string;
   skipTests?: boolean;
-  directory?: string;
   export?: boolean;
   js?: boolean;
-  nameAndDirectoryFormat?: NameAndDirectoryFormat;
 }

package/src/generators/hook/schema.json

@@ -7,26 +7,28 @@
   "type": "object",
   "examples": [
     {
-      "command": "nx g hook mylib/my-hook",
-      "description": "Generate a hook `my-hook` in the `mylib` library"
+      "description": "Generate a hook with the exported symbol matching the file name. It results in the hook `useFoo` at `mylib/src/lib/foo.ts`",
+      "command": "nx g @nx/react:hook mylib/src/lib/foo"
+    },
+    {
+      "description": "Generate a hook with the exported symbol different from the file name. It results in the hook `useCustom` at `mylib/src/lib/foo.ts`",
+      "command": "nx g @nx/react:hook mylib/src/lib/foo --name=useCustom"
     }
   ],
   "properties": {
     "path": {
       "type": "string",
-      "description": "Path where the hook will be generated.",
+      "description": "The file path to the hook without the file extension. Relative to the current working directory.",
       "$default": {
         "$source": "argv",
         "index": 0
       },
-      "x-prompt": "Where should the hook be generated?",
+      "x-prompt": "What is the hook file path?",
       "x-priority": "important"
     },
     "name": {
       "type": "string",
-      "description": "The name of the hook.",
-      "x-prompt": "What name would you like to use for the hook?",
-      "x-priority": "important"
+      "description": "The hook symbol name. Defaults to the last segment of the file path."
     },
     "js": {
       "type": "boolean",
@@ -39,16 +41,6 @@
       "default": false,
       "x-priority": "internal"
     },
-    "directory": {
-      "type": "string",
-      "description": "The directory at which to create the hook file. When `--nameAndDirectoryFormat=as-provided`, it will be relative to the current working directory. Otherwise, it will be relative to the project root.",
-      "x-priority": "important"
-    },
-    "nameAndDirectoryFormat": {
-      "description": "Whether to generate the component in the directory as provided, relative to the current working directory and ignoring the project (`as-provided`) or generate it using the project and directory relative to the workspace root (`derived`).",
-      "type": "string",
-      "enum": ["as-provided", "derived"]
-    },
     "export": {
       "type": "boolean",
       "description": "When true, the hook is exported from the project `index.ts` (if it exists).",
@@ -57,5 +49,5 @@
       "x-prompt": "Should this hook be exported in the project?"
     }
   },
-  "required": ["name"]
+  "required": ["path"]
 }

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

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

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

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

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

@@ -1,7 +1,7 @@
 // @ts-check
 
 /**
- * @type {import('@nx/rspack/module-federation').ModuleFederationConfig}
+ * @type {import('@nx/module-federation').ModuleFederationConfig}
  **/
 const moduleFederationConfig = {
     name: '<%= projectName %>',

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

@@ -1,5 +1,5 @@
 const {composePlugins, withNx, withReact} = require('@nx/rspack');
-const {withModuleFederationForSSR} = require('@nx/rspack/module-federation');
+const {withModuleFederationForSSR} = require('@nx/module-federation/rspack');
 
 const baseConfig = require('./module-federation.config');
 

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

@@ -1,4 +1,4 @@
-import { ModuleFederationConfig } from '@nx/rspack/module-federation';
+import { ModuleFederationConfig } from '@nx/module-federation';
 
 const config: ModuleFederationConfig = {
   name: '<%= projectName %>',

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

@@ -1,5 +1,5 @@
 import {composePlugins, withNx, withReact} from '@nx/rspack';
-import {withModuleFederationForSSR} from '@nx/rspack/module-federation';
+import {withModuleFederationForSSR} from '@nx/module-federation/rspack';
 
 import baseConfig from './module-federation.config';
 

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

@@ -1,4 +1,4 @@
-import { ModuleFederationConfig } from '@nx/rspack/module-federation';
+import { ModuleFederationConfig } from '@nx/module-federation';
 
 const config: ModuleFederationConfig = {
   name: '<%= projectName %>',

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

@@ -1,5 +1,6 @@
 import { composePlugins, withNx, withReact } from '@nx/rspack';
-import { withModuleFederation, ModuleFederationConfig } from '@nx/rspack/module-federation';
+import { withModuleFederation } from '@nx/module-federation/rspack';
+import { ModuleFederationConfig } from '@nx/module-federation';
 
 import baseConfig from './module-federation.config';
 

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

@@ -1,5 +1,6 @@
 import {composePlugins, withNx, withReact} from '@nx/rspack';
-import {withModuleFederation, ModuleFederationConfig} from '@nx/rspack/module-federation';
+import { withModuleFederation } from '@nx/module-federation/rspack';
+import { ModuleFederationConfig } from '@nx/module-federation';
 
 import baseConfig from './module-federation.config';
 

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');
 

package/src/generators/host/files/webpack-module-federation/webpack.config.prod.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');
 

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

@@ -1,7 +1,7 @@
 // @ts-check
 
 /**
- * @type {import('@nx/webpack').ModuleFederationConfig}
+ * @type {import('@nx/module-federation').ModuleFederationConfig}
  **/
 const moduleFederationConfig = {
   name: '<%= projectName %>',

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

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

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

@@ -1,4 +1,4 @@
-import { ModuleFederationConfig } from '@nx/webpack';
+import { ModuleFederationConfig } from '@nx/module-federation';
 
 const config: ModuleFederationConfig = {
   name: '<%= projectName %>',

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

@@ -1,6 +1,6 @@
 import {composePlugins, withNx} from '@nx/webpack';
 import {withReact} from '@nx/react';
-import {withModuleFederationForSSR} from '@nx/react/module-federation';
+import {withModuleFederationForSSR} from '@nx/module-federation/webpack';
 
 import baseConfig from './module-federation.config';
 

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

@@ -1,4 +1,4 @@
-import { ModuleFederationConfig } from '@nx/webpack';
+import { ModuleFederationConfig } from '@nx/module-federation';
 
 const config: ModuleFederationConfig = {
   name: '<%= projectName %>',

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

@@ -1,7 +1,7 @@
 import { composePlugins, withNx } from '@nx/webpack';
 import { withReact } from '@nx/react';
-import { withModuleFederation } from '@nx/react/module-federation';
-import { ModuleFederationConfig } from '@nx/webpack';
+import { withModuleFederation } from '@nx/module-federation/webpack';
+import { ModuleFederationConfig } from '@nx/module-federation';
 
 import baseConfig from './module-federation.config';
 

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

@@ -1,6 +1,7 @@
-import {composePlugins, withNx, ModuleFederationConfig} from '@nx/webpack';
+import {composePlugins, withNx} from '@nx/webpack';
 import {withReact} from '@nx/react';
-import {withModuleFederation} from '@nx/react/module-federation';
+import {withModuleFederation} from '@nx/module-federation/webpack';
+import { ModuleFederationConfig } from '@nx/module-federation';
 
 import baseConfig from './module-federation.config';
 

package/src/generators/host/host.js

@@ -15,9 +15,8 @@ const add_mf_env_to_inputs_1 = require("../../utils/add-mf-env-to-inputs");
 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 ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
+const update_module_federation_tsconfig_1 = require("./lib/update-module-federation-tsconfig");
 async function hostGenerator(host, schema) {
-    (0, ts_solution_setup_1.assertNotUsingTsSolutionSetup)(host, 'react', 'host');
     const tasks = [];
     const options = {
         ...(await (0, normalize_options_1.normalizeOptions)(host, schema)),
@@ -48,6 +47,7 @@ async function hostGenerator(host, schema) {
         // The target use-case is loading remotes as child routes, thus always enable routing.
         routing: true,
         skipFormat: true,
+        alwaysGenerateProjectJson: true,
     });
     tasks.push(initTask);
     const remotesWithPorts = [];
@@ -80,6 +80,7 @@ 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_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,

package/src/generators/host/lib/update-module-federation-tsconfig.d.ts

@@ -0,0 +1,3 @@
+import { type Tree } from '@nx/devkit';
+import { NormalizedSchema } from '../schema';
+export declare function updateModuleFederationTsconfig(host: Tree, options: NormalizedSchema): void;