@nx/react 18.0.0-beta.0 → 18.0.0-beta.2

package/generators.json

@@ -37,7 +37,7 @@
       "aliases": ["slice"]
     },
     "storybook-configuration": {
-      "factory": "./src/generators/storybook-configuration/configuration#storybookConfigurationGenerator",
+      "factory": "./src/generators/storybook-configuration/configuration#storybookConfigurationGeneratorInternal",
       "schema": "./src/generators/storybook-configuration/schema.json",
       "description": "Set up storybook for a React app or library.",
       "hidden": false

package/migrations.json

@@ -47,6 +47,12 @@
       "version": "16.7.0-beta.2",
       "description": "Add @nx/react types to tsconfig types array",
       "implementation": "./src/migrations/update-16-7-0-add-typings/update-16-7-0-add-typings"
+    },
+    "add-module-federation-env-var-to-target-defaults": {
+      "cli": "nx",
+      "version": "18.0.0-beta.0",
+      "description": "Add NX_MF_DEV_SERVER_STATIC_REMOTES to inputs for task hashing when '@nx/webpack:webpack' is used for Module Federation.",
+      "factory": "./src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults"
     }
   },
   "packageJsonUpdates": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "18.0.0-beta.0",
+  "version": "18.0.0-beta.2",
   "private": false,
   "description": "The React plugin for Nx contains executors and generators for managing React applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Cypress, and Storybook.\n\n- Generators for applications, libraries, components, hooks, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -34,14 +34,13 @@
     "@phenomnomnominal/tsquery": "~5.0.1",
     "@svgr/webpack": "^8.0.1",
     "chalk": "^4.1.0",
-    "file-loader": "^6.2.0",
     "minimatch": "9.0.3",
     "tslib": "^2.3.0",
-    "@nx/devkit": "18.0.0-beta.0",
-    "@nx/js": "18.0.0-beta.0",
-    "@nx/eslint": "18.0.0-beta.0",
-    "@nx/web": "18.0.0-beta.0",
-    "@nrwl/react": "18.0.0-beta.0"
+    "@nx/devkit": "18.0.0-beta.2",
+    "@nx/js": "18.0.0-beta.2",
+    "@nx/eslint": "18.0.0-beta.2",
+    "@nx/web": "18.0.0-beta.2",
+    "@nrwl/react": "18.0.0-beta.2"
   },
   "publishConfig": {
     "access": "public"

package/plugins/component-testing/index.js

@@ -25,12 +25,17 @@ const path_1 = require("path");
  * @param options override options
  */
 function nxComponentTestingPreset(pathToConfig, options) {
-    const normalizedProjectRootPath = ['.ts', '.js'].some((ext) => pathToConfig.endsWith(ext))
-        ? pathToConfig
-        : (0, path_1.dirname)(pathToConfig);
     const basePresetSettings = (0, cypress_preset_1.nxBaseCypressPreset)(pathToConfig, {
         testingType: 'component',
     });
+    if (global.NX_GRAPH_CREATION || global.NX_CYPRESS_INIT_GENERATOR_RUNNING) {
+        // this is only used by plugins, so we don't need the component testing
+        // options, cast to any to avoid type errors
+        return basePresetSettings;
+    }
+    const normalizedProjectRootPath = ['.ts', '.js'].some((ext) => pathToConfig.endsWith(ext))
+        ? pathToConfig
+        : (0, path_1.dirname)(pathToConfig);
     if (options?.bundler === 'vite') {
         return {
             ...basePresetSettings,
@@ -66,18 +71,24 @@ function nxComponentTestingPreset(pathToConfig, options) {
         const ctTargetName = options?.ctTargetName || 'component-test';
         const ctConfigurationName = process.env.NX_CYPRESS_TARGET_CONFIGURATION;
         const ctExecutorContext = (0, ct_helpers_1.createExecutorContext)(graph, ctTargets, ctProjectName, ctTargetName, ctConfigurationName);
-        const ctExecutorOptions = (0, devkit_1.readTargetOptions)({
-            project: ctProjectName,
-            target: ctTargetName,
-            configuration: ctConfigurationName,
-        }, ctExecutorContext);
-        const buildTarget = ctExecutorOptions.devServerTarget;
+        let buildTarget = options?.buildTarget;
+        if (!buildTarget) {
+            const ctExecutorOptions = (0, devkit_1.readTargetOptions)({
+                project: ctProjectName,
+                target: ctTargetName,
+                configuration: ctConfigurationName,
+            }, ctExecutorContext);
+            buildTarget = ctExecutorOptions.devServerTarget;
+        }
         if (!buildTarget) {
             throw new Error(`Unable to find the 'devServerTarget' executor option in the '${ctTargetName}' target of the '${ctProjectName}' project`);
         }
         webpackConfig = buildTargetWebpack(ctExecutorContext, buildTarget, ctProjectName);
     }
     catch (e) {
+        if (e instanceof InvalidExecutorError) {
+            throw e;
+        }
         devkit_1.logger.warn((0, devkit_1.stripIndents) `Unable to build a webpack config with the project graph. 
       Falling back to default webpack config.`);
         devkit_1.logger.warn(e);
@@ -137,6 +148,11 @@ function buildTargetWebpack(ctx, buildTarget, componentTestingProjectName) {
     Has component config? ${!!ctProjectConfig}
     `);
     }
+    if (buildableProjectConfig.targets[parsed.target].executor !==
+        '@nx/webpack:webpack') {
+        throw new InvalidExecutorError(`The '${parsed.target}' target of the '${parsed.project}' project is not using the '@nx/webpack:webpack' executor. ` +
+            `Please make sure to use '@nx/webpack:webpack' executor in that target to use Cypress Component Testing.`);
+    }
     const context = (0, ct_helpers_1.createExecutorContext)(graph, buildableProjectConfig.targets, parsed.project, parsed.target, parsed.target);
     const { normalizeOptions, } = require('@nx/webpack/src/executors/webpack/lib/normalize-options');
     const { resolveUserDefinedWebpackConfig, } = require('@nx/webpack/src/utils/webpack/resolve-user-defined-webpack-config');
@@ -152,7 +168,7 @@ function buildTargetWebpack(ctx, buildTarget, componentTestingProjectName) {
     }
     return async () => {
         customWebpack = await customWebpack;
-        // TODO(v18): Once webpackConfig is always set in @nx/webpack:webpack and isolatedConfig is removed, we no longer need this default.
+        // TODO(v19): Once webpackConfig is always set in @nx/webpack:webpack and isolatedConfig is removed, we no longer need this default.
         const configure = composePluginsSync(withNx(), withWeb());
         const defaultWebpack = configure({}, {
             options: {
@@ -197,3 +213,10 @@ function findTsConfig(projectRoot) {
         }
     }
 }
+class InvalidExecutorError extends Error {
+    constructor(message) {
+        super(message);
+        this.message = message;
+        this.name = 'InvalidExecutorError';
+    }
+}

package/plugins/nx-react-webpack-plugin/lib/apply-react-config.js

@@ -19,12 +19,6 @@ function applyReactConfig(options, config = {}) {
                         ref: true,
                     },
                 },
-                {
-                    loader: require.resolve('file-loader'),
-                    options: {
-                        name: '[name].[hash].[ext]',
-                    },
-                },
             ],
         });
     }

package/src/generators/application/application.js

@@ -22,6 +22,7 @@ const show_possible_warnings_1 = require("./lib/show-possible-warnings");
 const add_e2e_1 = require("./lib/add-e2e");
 const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
 const js_1 = require("@nx/js");
+const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-project-command");
 async function addLinting(host, options) {
     const tasks = [];
     if (options.linter === eslint_1.Linter.EsLint) {
@@ -35,6 +36,7 @@ async function addLinting(host, options) {
             skipFormat: true,
             rootProject: options.rootProject,
             skipPackageJson: options.skipPackageJson,
+            addPlugin: options.addPlugin,
         });
         tasks.push(lintTask);
         if ((0, eslint_file_1.isEslintConfigSupported)(host)) {
@@ -50,6 +52,7 @@ async function addLinting(host, options) {
 }
 async function applicationGenerator(host, schema) {
     return await applicationGeneratorInternal(host, {
+        addPlugin: false,
         projectNameAndRootFormat: 'derived',
         ...schema,
     });
@@ -75,6 +78,7 @@ async function applicationGeneratorInternal(host, schema) {
         const webpackInitTask = await webpackInitGenerator(host, {
             skipPackageJson: options.skipPackageJson,
             skipFormat: true,
+            addPlugin: options.addPlugin,
         });
         tasks.push(webpackInitTask);
         if (!options.skipPackageJson) {
@@ -102,6 +106,7 @@ async function applicationGeneratorInternal(host, schema) {
             inSourceTests: options.inSourceTests,
             compiler: options.compiler,
             skipFormat: true,
+            addPlugin: options.addPlugin,
         });
         tasks.push(viteTask);
         createOrEditViteConfig(host, {
@@ -142,6 +147,7 @@ async function applicationGeneratorInternal(host, schema) {
             project: options.projectName,
             inSourceTests: options.inSourceTests,
             skipFormat: true,
+            addPlugin: options.addPlugin,
         });
         tasks.push(vitestTask);
         createOrEditViteConfig(host, {
@@ -208,6 +214,9 @@ async function applicationGeneratorInternal(host, schema) {
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }
+    tasks.push(() => {
+        (0, log_show_project_command_1.logShowProjectCommand)(options.projectName);
+    });
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 exports.applicationGeneratorInternal = applicationGeneratorInternal;

package/src/generators/application/files/nx-welcome/src/app/nx-welcome.tsx

@@ -795,6 +795,25 @@ export function NxWelcome({ title }: { title: string }) {
                 nx g @nx/react:component ui/src/lib/button
               </pre>
             </details>
+            <details>
+              <summary>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                  />
+                </svg>
+                View project details
+              </summary>
+              <pre>nx show project {title} --web</pre>
+            </details>
             <details>
               <summary>
                 <svg

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

@@ -68,6 +68,7 @@ async function addE2e(tree, options) {
                 webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx serve ${options.name}`,
                 webServerAddress: 'http://localhost:4200',
                 rootProject: options.rootProject,
+                addPlugin: options.addPlugin,
             });
         }
         case 'none':

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

@@ -12,7 +12,7 @@ function addProject(host, options) {
         tags: options.parsedTags,
     };
     if (options.bundler === 'webpack') {
-        if (!(0, has_webpack_plugin_1.hasWebpackPlugin)(host)) {
+        if (!(0, has_webpack_plugin_1.hasWebpackPlugin)(host) || !options.addPlugin) {
             project.targets = {
                 build: createBuildTarget(options),
                 serve: createServeTarget(options),

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

@@ -26,6 +26,7 @@ async function normalizeOptions(host, options, callingGenerator = '@nx/react:app
         rootProject: options.rootProject,
         callingGenerator,
     });
+    options.addPlugin ??= process.env.NX_ADD_PLUGINS !== 'false';
     options.rootProject = appProjectRoot === '.';
     options.projectNameAndRootFormat = projectNameAndRootFormat;
     const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`;

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

@@ -28,6 +28,7 @@ export interface Schema {
   rootProject?: boolean;
   bundler?: 'webpack' | 'vite' | 'rspack';
   minimal?: boolean;
+  addPlugin?: boolean;
 }
 
 export interface NormalizedSchema<T extends Schema = Schema> extends T {
@@ -40,4 +41,5 @@ export interface NormalizedSchema<T extends Schema = Schema> extends T {
   styledModule: null | SupportedStyles;
   hasStyles: boolean;
   unitTestRunner: 'jest' | 'vitest' | 'none';
+  addPlugin?: boolean;
 }

package/src/generators/application/schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "cli": "nx",
   "$id": "NxReactApp",
   "title": "Create a React Application",
@@ -56,11 +56,11 @@
           },
           {
             "value": "scss",
-            "label": "SASS(.scss)       [ http://sass-lang.com                     ]"
+            "label": "SASS(.scss)       [ https://sass-lang.com                     ]"
           },
           {
             "value": "less",
-            "label": "LESS              [ http://lesscss.org                       ]"
+            "label": "LESS              [ https://lesscss.org                       ]"
           },
           {
             "value": "styled-components",

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

@@ -3,7 +3,7 @@ import { SupportedStyles } from '../../../typings/style';
 export interface Schema {
   name: string;
   /**
-   * @deprecated Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18.
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v19.
    */
   project?: string;
   style: SupportedStyles;
@@ -11,18 +11,18 @@ export interface Schema {
   directory?: string;
   export?: boolean;
   /**
-   * @deprecated Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18.
+   * @deprecated Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19.
    */
   pascalCaseFiles?: boolean;
   /**
-   * @deprecated Provide the `directory` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18.
+   * @deprecated Provide the `directory` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19.
    */
   pascalCaseDirectory?: boolean;
   classComponent?: boolean;
   routing?: boolean;
   js?: boolean;
   /**
-   * @deprecated Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v18.
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v19.
    */
   flat?: boolean;
   globalCss?: boolean;

package/src/generators/component/schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "cli": "nx",
   "$id": "NxReactComponent",
   "title": "Create a React Component",
@@ -13,7 +13,7 @@
       "$default": {
         "$source": "projectName"
       },
-      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18."
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v19."
     },
     "name": {
       "type": "string",
@@ -40,11 +40,11 @@
           },
           {
             "value": "scss",
-            "label": "SASS(.scss)       [ http://sass-lang.com          ]"
+            "label": "SASS(.scss)       [ https://sass-lang.com          ]"
           },
           {
             "value": "less",
-            "label": "LESS              [ http://lesscss.org            ]"
+            "label": "LESS              [ https://lesscss.org            ]"
           },
           {
             "value": "styled-components",
@@ -91,7 +91,7 @@
       "type": "boolean",
       "description": "Create component at the source root rather than its own directory.",
       "default": false,
-      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v18."
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v19."
     },
     "export": {
       "type": "boolean",
@@ -105,14 +105,14 @@
       "description": "Use pascal case component file name (e.g. `App.tsx`).",
       "alias": "P",
       "default": false,
-      "x-deprecated": "Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18."
+      "x-deprecated": "Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19."
     },
     "pascalCaseDirectory": {
       "type": "boolean",
       "description": "Use pascal case directory name (e.g. `App/App.tsx`).",
       "alias": "R",
       "default": false,
-      "x-deprecated": "Provide the `directory` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18."
+      "x-deprecated": "Provide the `directory` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19."
     },
     "classComponent": {
       "type": "boolean",

package/src/generators/component-cypress-spec/schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "cli": "nx",
   "$id": "NxReactComponentCypressSpec",
   "title": "Create component Cypress spec",

package/src/generators/component-story/schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "cli": "nx",
   "$id": "NxReactComponentStory",
   "title": "Create component story",

package/src/generators/component-test/schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "cli": "nx",
   "$id": "NxReactCypressComponentTest",
   "title": "Add Cypress component test",

package/src/generators/cypress-component-configuration/cypress-component-configuration.d.ts

@@ -1,9 +1,10 @@
 import { Tree } from '@nx/devkit';
 import { CypressComponentConfigurationSchema } from './schema.d';
+export declare function cypressComponentConfigGenerator(tree: Tree, options: CypressComponentConfigurationSchema): Promise<import("@nx/devkit").GeneratorCallback>;
 /**
  * This is for using cypresses own Component testing, if you want to use test
  * storybook components then use componentCypressGenerator instead.
  *
  */
-export declare function cypressComponentConfigGenerator(tree: Tree, options: CypressComponentConfigurationSchema): Promise<import("@nx/devkit").GeneratorCallback>;
+export declare function cypressComponentConfigGeneratorInternal(tree: Tree, options: CypressComponentConfigurationSchema): Promise<import("@nx/devkit").GeneratorCallback>;
 export default cypressComponentConfigGenerator;

package/src/generators/cypress-component-configuration/cypress-component-configuration.js

@@ -1,26 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cypressComponentConfigGenerator = void 0;
+exports.cypressComponentConfigGeneratorInternal = exports.cypressComponentConfigGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../utils/versions");
 const add_files_1 = require("./lib/add-files");
 const ct_utils_1 = require("../../utils/ct-utils");
+function cypressComponentConfigGenerator(tree, options) {
+    return cypressComponentConfigGeneratorInternal(tree, {
+        addPlugin: false,
+        ...options,
+    });
+}
+exports.cypressComponentConfigGenerator = cypressComponentConfigGenerator;
 /**
  * This is for using cypresses own Component testing, if you want to use test
  * storybook components then use componentCypressGenerator instead.
  *
  */
-async function cypressComponentConfigGenerator(tree, options) {
+async function cypressComponentConfigGeneratorInternal(tree, options) {
     const { componentConfigurationGenerator: baseCyCtConfig } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
+    options.addPlugin ??= process.env.NX_ADD_PLUGINS !== 'false';
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
     const installTask = await baseCyCtConfig(tree, {
         project: options.project,
         skipFormat: true,
         jsx: true,
+        addPlugin: options.addPlugin,
     });
-    const found = await (0, ct_utils_1.addCTTargetWithBuildTarget)(tree, {
+    const found = await (0, ct_utils_1.configureCypressCT)(tree, {
         project: options.project,
         buildTarget: options.buildTarget,
+        bundler: options.bundler,
         validExecutorNames: new Set([
             '@nx/webpack:webpack',
             '@nx/vite:build',
@@ -34,5 +44,5 @@ async function cypressComponentConfigGenerator(tree, options) {
     }
     return installTask;
 }
-exports.cypressComponentConfigGenerator = cypressComponentConfigGenerator;
+exports.cypressComponentConfigGeneratorInternal = cypressComponentConfigGeneratorInternal;
 exports.default = cypressComponentConfigGenerator;

package/src/generators/cypress-component-configuration/lib/add-files.js

@@ -10,9 +10,7 @@ async function addFiles(tree, projectConfig, options, found) {
     // when importing react
     const { addMountDefinition, addDefaultCTConfig } = await Promise.resolve().then(() => require('@nx/cypress/src/utils/config'));
     // Specifically undefined to allow Remix workaround of passing an empty string
-    const actualBundler = options.buildTarget !== undefined && options.bundler
-        ? options.bundler
-        : await (0, ct_utils_1.getBundlerFromTarget)(found, tree);
+    const actualBundler = await (0, ct_utils_1.getActualBundler)(tree, options, found);
     if (options.bundler && options.bundler !== actualBundler) {
         devkit_1.logger.warn(`You have specified ${options.bundler} as the bundler but this project is configured to use ${actualBundler}.
       This may cause errors. If you are seeing errors, try removing the --bundler option.`);
@@ -21,9 +19,6 @@ async function addFiles(tree, projectConfig, options, found) {
     const commandFile = (0, devkit_1.joinPathFragments)(projectConfig.root, 'cypress', 'support', 'component.ts');
     const updatedCommandFile = await addMountDefinition(tree.read(commandFile, 'utf-8'));
     tree.write(commandFile, `import { mount } from 'cypress/react18';\n${updatedCommandFile}`);
-    const cyFile = (0, devkit_1.joinPathFragments)(projectConfig.root, 'cypress.config.ts');
-    const updatedCyConfig = await addDefaultCTConfig(tree.read(cyFile, 'utf-8'), { bundler: bundlerToUse });
-    tree.write(cyFile, `import { nxComponentTestingPreset } from '@nx/react/plugins/component-testing';\n${updatedCyConfig}`);
     if (options.bundler === 'webpack' ||
         (!options.bundler && actualBundler === 'webpack')) {
         (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { '@nx/webpack': versions_1.nxVersion });

package/src/generators/cypress-component-configuration/schema.d.ts

@@ -4,4 +4,5 @@ export interface CypressComponentConfigurationSchema {
   skipFormat?: boolean;
   buildTarget?: string;
   bundler?: 'webpack' | 'vite';
+  addPlugin?: boolean;
 }

package/src/generators/federate-module/schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "cli": "nx",
   "$id": "NxReactFederateModule",
   "title": "Federate Module",

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

@@ -1,22 +1,22 @@
 export interface Schema {
   name: string;
   /**
-   * @deprecated Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18.
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v19.
    */
   project: string;
   skipTests?: boolean;
   directory?: string;
   export?: boolean;
   /**
-   * @deprecated Provide the `name` option instead and use the `as-provided` format. This option will be removed in Nx v18.
+   * @deprecated Provide the `name` option instead and use the `as-provided` format. This option will be removed in Nx v19.
    */
   pascalCaseFiles?: boolean;
   /**
-   * @deprecated Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v18.
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v19.
    */
   pascalCaseDirectory?: boolean;
   /**
-   * @deprecated Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v18.
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v19.
    */
   flat?: boolean;
   js?: boolean;

package/src/generators/hook/schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "cli": "nx",
   "$id": "NxReactHook",
   "title": "Create a React Hook for Nx",
@@ -19,7 +19,7 @@
       "$default": {
         "$source": "projectName"
       },
-      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18."
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v19."
     },
     "name": {
       "type": "string",
@@ -56,7 +56,7 @@
       "type": "boolean",
       "description": "Create hook at the source root rather than its own directory.",
       "default": false,
-      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. It will be removed in Nx v18."
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. It will be removed in Nx v19."
     },
     "export": {
       "type": "boolean",
@@ -70,14 +70,14 @@
       "description": "Use pascal case hook file name (e.g. `useHook.ts`).",
       "alias": "P",
       "default": false,
-      "x-deprecated": "Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18."
+      "x-deprecated": "Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19."
     },
     "pascalCaseDirectory": {
       "type": "boolean",
       "description": "Use pascal case directory name (e.g. `useHook/useHook.ts`).",
       "alias": "R",
       "default": false,
-      "x-deprecated": "Provide the `directory` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18."
+      "x-deprecated": "Provide the `directory` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19."
     }
   },
   "required": ["name"]

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

@@ -1,10 +1,11 @@
 import { composePlugins, withNx } from '@nx/webpack';
 import { withReact } from '@nx/react';
 import { withModuleFederation } from '@nx/react/module-federation';
+import { ModuleFederationConfig } from '@nx/webpack';
 
 import baseConfig from './module-federation.config';
 
-const prodConfig = {
+const prodConfig: ModuleFederationConfig = {
     ...baseConfig,
     /*
      * Remote overrides for production.

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

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

package/src/generators/host/host.js

@@ -11,6 +11,7 @@ const add_module_federation_files_1 = require("./lib/add-module-federation-files
 const normalize_remote_1 = require("./lib/normalize-remote");
 const setup_ssr_for_host_1 = require("./lib/setup-ssr-for-host");
 const update_module_federation_e2e_project_1 = require("./lib/update-module-federation-e2e-project");
+const add_mf_env_to_inputs_1 = require("../../utils/add-mf-env-to-inputs");
 async function hostGenerator(host, schema) {
     return hostGeneratorInternal(host, {
         projectNameAndRootFormat: 'derived',
@@ -24,6 +25,8 @@ async function hostGeneratorInternal(host, schema) {
         ...(await (0, normalize_options_1.normalizeOptions)(host, schema, '@nx/react:host')),
         typescriptConfiguration: schema.typescriptConfiguration ?? true,
         dynamic: schema.dynamic ?? false,
+        // TODO(colum): remove when MF works with Crystal
+        addPlugin: false,
     };
     const initTask = await (0, application_1.default)(host, {
         ...options,
@@ -78,6 +81,7 @@ async function hostGeneratorInternal(host, schema) {
     if (!options.setParserOptionsProject) {
         host.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.lint.json'));
     }
+    (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(host);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }