@nx/react 18.1.0-beta.1 → 18.1.0-beta.10

package/migrations.json

@@ -53,6 +53,12 @@
       "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"
+    },
+    "fix-target-defaults-for-webpack": {
+      "cli": "nx",
+      "version": "18.1.1-beta.0",
+      "description": "Ensure targetDefaults inputs for task hashing when '@nx/webpack:webpack' is used are correct for Module Federation.",
+      "factory": "./src/migrations/update-18-1-1/fix-target-defaults-inputs"
     }
   },
   "packageJsonUpdates": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "18.1.0-beta.1",
+  "version": "18.1.0-beta.10",
   "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": {
@@ -36,11 +36,11 @@
     "chalk": "^4.1.0",
     "minimatch": "9.0.3",
     "tslib": "^2.3.0",
-    "@nx/devkit": "18.1.0-beta.1",
-    "@nx/js": "18.1.0-beta.1",
-    "@nx/eslint": "18.1.0-beta.1",
-    "@nx/web": "18.1.0-beta.1",
-    "@nrwl/react": "18.1.0-beta.1"
+    "@nx/devkit": "18.1.0-beta.10",
+    "@nx/js": "18.1.0-beta.10",
+    "@nx/eslint": "18.1.0-beta.10",
+    "@nx/web": "18.1.0-beta.10",
+    "@nrwl/react": "18.1.0-beta.10"
   },
   "publishConfig": {
     "access": "public"

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.js

@@ -198,8 +198,10 @@ async function* moduleFederationDevServer(options, context) {
             devkit_1.logger.info(`NX All remotes started, server ready at ${baseUrl}`);
             next({ success: true, baseUrl: baseUrl });
         }
-        catch {
-            throw new Error(`Timed out waiting for remote to start. Check above for any errors.`);
+        catch (err) {
+            throw new Error(`Failed to start remotes. Check above for any errors.`, {
+                cause: err,
+            });
         }
         finally {
             done();

package/src/executors/module-federation-dev-server/schema.json

@@ -19,7 +19,7 @@
       "items": {
         "type": "string"
       },
-      "description": "List of remote applications to not automatically serve, either statically or in development mode.",
+      "description": "List of remote applications to not automatically serve, either statically or in development mode. This will not remove the remotes from the `module-federation.config` file, and therefore the application may still try to fetch these remotes.\nThis option is useful for when the `host` application is using a `remote` that does not live in the same workspace as the `host`.",
       "x-priority": "important"
     },
     "buildTarget": {

package/src/generators/application/application.js

@@ -143,7 +143,7 @@ async function applicationGeneratorInternal(host, schema) {
             tsConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
             target: 'web',
             newProject: true,
-            uiFramework: 'react',
+            framework: 'react',
         });
         tasks.push(rspackTask);
     }
@@ -201,8 +201,8 @@ async function applicationGeneratorInternal(host, schema) {
         devkit_1.logger.warn(`${chalk.bold('styled-jsx')} is not supported by ${chalk.bold('Rspack')}. We've added ${chalk.bold('babel-loader')} to your project, but using babel will slow down your build.`);
         tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, {}, { 'babel-loader': versions_1.babelLoaderVersion }));
         host.write((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'rspack.config.js'), (0, devkit_1.stripIndents) `
-        const { composePlugins, withNx, withWeb } = require('@nx/rspack');
-        module.exports = composePlugins(withNx(), withWeb(), (config) => {
+        const { composePlugins, withNx, withReact } = require('@nx/rspack');
+        module.exports = composePlugins(withNx(), withReact(), (config) => {
           config.module.rules.push({
             test: /\\.[jt]sx$/i,
             use: [

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

@@ -34,7 +34,7 @@ async function addE2e(tree, options) {
                 bundler: options.bundler === 'rspack' ? 'webpack' : options.bundler,
                 skipFormat: true,
                 devServerTarget: `${options.projectName}:serve`,
-                baseUrl: 'http://localhost:4200',
+                baseUrl: `http://localhost:${options.devServerPort ?? 4200}`,
                 jsx: true,
                 rootProject: options.rootProject,
                 webServerCommands: hasNxBuildPlugin
@@ -66,7 +66,7 @@ async function addE2e(tree, options) {
                 linter: options.linter,
                 setParserOptionsProject: options.setParserOptionsProject,
                 webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx serve ${options.name}`,
-                webServerAddress: 'http://localhost:4200',
+                webServerAddress: `http://localhost:${options.devServerPort ?? 4200}`,
                 rootProject: options.rootProject,
                 addPlugin: options.addPlugin,
             });

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

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

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

@@ -19,7 +19,10 @@ exports.cypressComponentConfigGenerator = cypressComponentConfigGenerator;
  */
 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 nxJson = (0, devkit_1.readNxJson)(tree);
+    const addPlugin = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
+    options.addPlugin ??= addPlugin;
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
     const installTask = await baseCyCtConfig(tree, {
         project: options.project,

package/src/generators/host/lib/update-module-federation-e2e-project.js

@@ -5,11 +5,13 @@ const devkit_1 = require("@nx/devkit");
 function updateModuleFederationE2eProject(host, options) {
     try {
         let projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.e2eProjectName);
-        projectConfig.targets.e2e.options = {
-            ...projectConfig.targets.e2e.options,
-            baseUrl: `http://localhost:${options.devServerPort}`,
-        };
-        (0, devkit_1.updateProjectConfiguration)(host, options.e2eProjectName, projectConfig);
+        if (projectConfig.targets.e2e.executor !== '@nx/playwright:playwright') {
+            projectConfig.targets.e2e.options = {
+                ...projectConfig.targets.e2e.options,
+                baseUrl: `http://localhost:${options.devServerPort}`,
+            };
+            (0, devkit_1.updateProjectConfiguration)(host, options.e2eProjectName, projectConfig);
+        }
     }
     catch {
         // nothing

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

@@ -13,7 +13,10 @@ async function normalizeOptions(host, options) {
         projectNameAndRootFormat: options.projectNameAndRootFormat,
         callingGenerator: '@nx/react:library',
     });
-    options.addPlugin ??= process.env.NX_ADD_PLUGINS !== 'false';
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    const addPlugin = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
+    options.addPlugin ??= addPlugin;
     const fileName = options.simpleName
         ? projectNames.projectSimpleName
         : projectNames.projectFileName;

package/src/generators/storybook-configuration/configuration.js

@@ -28,7 +28,10 @@ function storybookConfigurationGenerator(host, schema) {
 }
 exports.storybookConfigurationGenerator = storybookConfigurationGenerator;
 async function storybookConfigurationGeneratorInternal(host, schema) {
-    schema.addPlugin ??= process.env.NX_ADD_PLUGINS !== 'false';
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    const addPluginDefault = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
+    schema.addPlugin ??= addPluginDefault;
     const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/storybook', versions_1.nxVersion);
     let uiFramework = '@storybook/react-vite';
     const projectConfig = (0, devkit_1.readProjectConfiguration)(host, schema.project);

package/src/migrations/update-18-1-1/fix-target-defaults-inputs.d.ts

@@ -0,0 +1,2 @@
+import { type Tree } from '@nx/devkit';
+export default function (tree: Tree): Promise<void>;

package/src/migrations/update-18-1-1/fix-target-defaults-inputs.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const devkit_1 = require("@nx/devkit");
+async function default_1(tree) {
+    if (!hasModuleFederationProject(tree)) {
+        return;
+    }
+    ensureTargetDefaultsContainProductionInputs(tree);
+    await (0, devkit_1.formatFiles)(tree);
+}
+exports.default = default_1;
+function ensureTargetDefaultsContainProductionInputs(tree) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    const webpackExecutor = '@nx/webpack:webpack';
+    const mfEnvVar = 'NX_MF_DEV_SERVER_STATIC_REMOTES';
+    nxJson.targetDefaults[webpackExecutor] ??= {};
+    nxJson.targetDefaults[webpackExecutor].inputs ??= [
+        'production',
+        '^production',
+        { env: mfEnvVar },
+    ];
+    if (!nxJson.targetDefaults[webpackExecutor].inputs.includes('production')) {
+        nxJson.targetDefaults[webpackExecutor].inputs.push('production');
+    }
+    if (!nxJson.targetDefaults[webpackExecutor].inputs.includes('^production')) {
+        nxJson.targetDefaults[webpackExecutor].inputs.push('^production');
+    }
+    let mfEnvVarExists = false;
+    for (const input of nxJson.targetDefaults[webpackExecutor].inputs) {
+        if (typeof input === 'object' && input['env'] === mfEnvVar) {
+            mfEnvVarExists = true;
+            break;
+        }
+    }
+    if (!mfEnvVarExists) {
+        nxJson.targetDefaults[webpackExecutor].inputs.push({ env: mfEnvVar });
+    }
+    (0, devkit_1.updateNxJson)(tree, nxJson);
+}
+function hasModuleFederationProject(tree) {
+    const projects = (0, devkit_1.getProjects)(tree);
+    for (const project of projects.values()) {
+        const targets = project.targets || {};
+        for (const [_, target] of Object.entries(targets)) {
+            if (target.executor === '@nx/webpack:webpack' &&
+                (tree.exists((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.ts')) ||
+                    tree.exists((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.js')))) {
+                return true;
+            }
+        }
+    }
+    return false;
+}

package/src/utils/add-mf-env-to-inputs.js

@@ -8,7 +8,10 @@ function addMfEnvToTargetDefaultInputs(tree) {
     const mfEnvVar = 'NX_MF_DEV_SERVER_STATIC_REMOTES';
     nxJson.targetDefaults ??= {};
     nxJson.targetDefaults[webpackExecutor] ??= {};
-    nxJson.targetDefaults[webpackExecutor].inputs ??= [];
+    nxJson.targetDefaults[webpackExecutor].inputs ??= [
+        'production',
+        '^production',
+    ];
     let mfEnvVarExists = false;
     for (const input of nxJson.targetDefaults[webpackExecutor].inputs) {
         if (typeof input === 'object' && input['env'] === mfEnvVar) {