@nx/react 21.2.0 → 21.2.2

package/mf/dynamic-federation.js

@@ -4,7 +4,7 @@ exports.setRemoteUrlResolver = setRemoteUrlResolver;
 exports.setRemoteDefinitions = setRemoteDefinitions;
 exports.setRemoteDefinition = setRemoteDefinition;
 exports.loadRemoteModule = loadRemoteModule;
-const node_path_1 = require("node:path");
+const url_helpers_1 = require("@nx/module-federation/url-helpers");
 let remoteUrlDefinitions = {};
 let resolveRemoteUrl;
 const remoteModuleMap = new Map();
@@ -132,15 +132,7 @@ async function loadRemoteContainer(remoteName) {
     const remoteUrl = remoteUrlDefinitions
         ? remoteUrlDefinitions[remoteName]
         : await resolveRemoteUrl(remoteName);
-    const url = new URL(remoteUrl);
-    const ext = (0, node_path_1.extname)(url.pathname);
-    const needsRemoteEntry = !['.js', '.mjs', '.json'].includes(ext);
-    if (needsRemoteEntry) {
-        url.pathname = url.pathname.endsWith('/')
-            ? `${url.pathname}remoteEntry.mjs`
-            : `${url.pathname}/remoteEntry.mjs`;
-    }
-    const containerUrl = url.href;
+    const containerUrl = (0, url_helpers_1.processRuntimeRemoteUrl)(remoteUrl, 'mjs');
     const container = await fetchRemoteModule(containerUrl, remoteName);
     await container.init(__webpack_share_scopes__.default);
     remoteContainerMap.set(remoteName, container);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "21.2.0",
+  "version": "21.2.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, Vitest, Playwright, 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": {
@@ -38,11 +38,11 @@
     "minimatch": "9.0.3",
     "picocolors": "^1.1.0",
     "tslib": "^2.3.0",
-    "@nx/devkit": "21.2.0",
-    "@nx/js": "21.2.0",
-    "@nx/eslint": "21.2.0",
-    "@nx/web": "21.2.0",
-    "@nx/module-federation": "21.2.0",
+    "@nx/devkit": "21.2.2",
+    "@nx/js": "21.2.2",
+    "@nx/eslint": "21.2.2",
+    "@nx/web": "21.2.2",
+    "@nx/module-federation": "21.2.2",
     "express": "^4.21.2",
     "http-proxy-middleware": "^3.0.3",
     "semver": "^7.6.3"

package/src/generators/application/files/base-rspack/rspack.config.js__tmpl__

@@ -8,7 +8,7 @@ module.exports = {
     path: join(__dirname, '<%= rspackPluginOptions.outputPath %>'),
   },
   devServer: {
-    port: 4200,
+    port: <%= port %>,
     historyApiFallback: {
       index: '/index.html',
       disableDotRule: true,

package/src/generators/application/files/base-webpack/webpack.config.js__tmpl__

@@ -8,7 +8,7 @@ module.exports = {
     path: join(__dirname, '<%= webpackPluginOptions.outputPath %>'),
   },
   devServer: {
-    port: 4200,
+    port: <%= port %>,
     historyApiFallback: {
       index: '/index.html',
       disableDotRule: true,

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

@@ -18,7 +18,7 @@ async function addE2e(tree, options) {
         e2eWebServerAddress: `http://localhost:${options.devServerPort ?? 4200}`,
         e2eWebServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx run ${options.projectName}:serve`,
         e2eCiWebServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx run ${options.projectName}:serve-static`,
-        e2eCiBaseUrl: `http://localhost:4200`,
+        e2eCiBaseUrl: `http://localhost:${options.port ?? 4300}`,
         e2eDevServerTarget: `${options.projectName}:serve`,
     };
     if (options.bundler === 'webpack') {
@@ -32,8 +32,12 @@ async function addE2e(tree, options) {
     else if (options.bundler === 'vite') {
         const { getViteE2EWebServerInfo, getReactRouterE2EWebServerInfo } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
         e2eWebServerInfo = options.useReactRouter
-            ? await getReactRouterE2EWebServerInfo(tree, options.projectName, (0, devkit_1.joinPathFragments)(options.appProjectRoot, `vite.config.${options.js ? 'js' : 'ts'}`), options.addPlugin, options.devServerPort ?? 4200)
-            : await getViteE2EWebServerInfo(tree, options.projectName, (0, devkit_1.joinPathFragments)(options.appProjectRoot, `vite.config.${options.js ? 'js' : 'ts'}`), options.addPlugin, options.devServerPort ?? 4200);
+            ? await getReactRouterE2EWebServerInfo(tree, options.projectName, (0, devkit_1.joinPathFragments)(options.appProjectRoot, `vite.config.${options.js ? 'js' : 'ts'}`), options.addPlugin, options.devServerPort ?? 4200, 
+            // If the user manually sets the port, then use it for dev and preview
+            options.port)
+            : await getViteE2EWebServerInfo(tree, options.projectName, (0, devkit_1.joinPathFragments)(options.appProjectRoot, `vite.config.${options.js ? 'js' : 'ts'}`), options.addPlugin, options.devServerPort ?? 4200, 
+            // If the user manually sets the port, then use it for dev and preview
+            options.port);
     }
     else if (options.bundler === 'rsbuild') {
         (0, devkit_1.ensurePackage)('@nx/rsbuild', versions_1.nxVersion);

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

@@ -89,7 +89,7 @@ function createRspackBuildTarget(options) {
             styles: options.styledModule || !options.hasStyles
                 ? []
                 : [
-                    (0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/styles.${options.style}`),
+                    (0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/styles.${options.style === 'tailwind' ? 'css' : options.style}`),
                 ],
             scripts: [],
             configurations: {
@@ -151,7 +151,7 @@ function createBuildTarget(options) {
             styles: options.styledModule || !options.hasStyles
                 ? []
                 : [
-                    (0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/styles.${options.style}`),
+                    (0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/styles.${options.style === 'tailwind' ? 'css' : options.style}`),
                 ],
             scripts: [],
             webpackConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'webpack.config.js'),

package/src/generators/application/lib/bundlers/add-vite.js

@@ -33,6 +33,7 @@ async function setupViteConfiguration(tree, options, tasks) {
         skipFormat: true,
         addPlugin: options.addPlugin,
         projectType: 'application',
+        port: options.port,
     });
     tasks.push(viteTask);
     createOrEditViteConfig(tree, {
@@ -41,6 +42,8 @@ async function setupViteConfiguration(tree, options, tasks) {
         includeVitest: options.unitTestRunner === 'vitest',
         inSourceTests: options.inSourceTests,
         rollupOptionsExternal: ["'react'", "'react-dom'", "'react/jsx-runtime'"],
+        port: options.port,
+        previewPort: options.port,
         ...(options.useReactRouter
             ? reactRouterFrameworkConfig
             : baseReactConfig),

package/src/generators/application/lib/create-application-files.d.ts

@@ -18,6 +18,7 @@ export declare function getDefaultTemplateVariables(host: Tree, options: Normali
     style: "none" | "styled-components" | "@emotion/styled" | "styled-jsx" | "css" | "scss" | "less";
     hasStyleFile: boolean;
     isUsingTsSolutionSetup: boolean;
+    port: number;
     projectName: string;
     appProjectRoot: string;
     e2eProjectName: string;

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

@@ -36,6 +36,7 @@ function getDefaultTemplateVariables(host, options) {
         style: options.style === 'tailwind' ? 'css' : options.style,
         hasStyleFile,
         isUsingTsSolutionSetup: (0, ts_solution_setup_1.isUsingTsSolutionSetup)(host),
+        port: options.port ?? 4200,
     };
 }
 function createNxRspackPluginOptions(options, rootOffset, tsx = true) {

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

@@ -60,7 +60,7 @@ async function normalizeOptions(host, options) {
     normalized.unitTestRunner = normalized.unitTestRunner ?? 'jest';
     normalized.e2eTestRunner = normalized.e2eTestRunner ?? 'playwright';
     normalized.inSourceTests = normalized.minimal || normalized.inSourceTests;
-    normalized.devServerPort ??= (0, find_free_port_1.findFreePort)(host);
+    normalized.devServerPort ??= options.port ?? (0, find_free_port_1.findFreePort)(host);
     normalized.minimal = normalized.minimal ?? false;
     return normalized;
 }

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

@@ -33,6 +33,7 @@ export interface Schema {
   useTsSolution?: boolean;
   formatter?: 'prettier' | 'none';
   useProjectJson?: boolean;
+  port?: number;
 }
 
 export interface NormalizedSchema<T extends Schema = Schema> extends T {

package/src/generators/application/schema.json

@@ -16,6 +16,10 @@
     {
       "command": "nx g app apps/myapp --routing",
       "description": "Set up React Router"
+    },
+    {
+      "command": "nx g app apps/myapp --port=3000",
+      "description": "Set up the dev server to use port 3000"
     }
   ],
   "type": "object",
@@ -196,6 +200,12 @@
     "useProjectJson": {
       "type": "boolean",
       "description": "Use a `project.json` configuration file instead of inlining the Nx configuration in the `package.json` file."
+    },
+    "port": {
+      "type": "number",
+      "description": "The port to use for the development server",
+      "x-prompt": "Which port would you like to use for the dev server?",
+      "default": 4200
     }
   },
   "required": ["directory"],

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

@@ -1,6 +1,6 @@
-import { NxAppRspackPlugin } from '@nx/rspack/app-plugin';
-import { NxReactRspackPlugin } from '@nx/rspack/react-plugin';
-import { NxModuleFederationPlugin, NxModuleFederationSSRDevServerPlugin } from '@nx/module-federation/rspack';
+import { NxAppRspackPlugin } from '@nx/rspack/app-plugin.js';
+import { NxReactRspackPlugin } from '@nx/rspack/react-plugin.js';
+import { NxModuleFederationPlugin, NxModuleFederationSSRDevServerPlugin } from '@nx/module-federation/rspack.js';
 import { join } from 'path';
 
 import browserMfConfig from './module-federation.config';

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

@@ -1,6 +1,6 @@
-import { NxAppRspackPlugin } from '@nx/rspack/app-plugin';
-import { NxReactRspackPlugin } from '@nx/rspack/react-plugin';
-import { NxModuleFederationPlugin, NxModuleFederationDevServerPlugin } from '@nx/module-federation/rspack';
+import { NxAppRspackPlugin } from '@nx/rspack/app-plugin.js';
+import { NxReactRspackPlugin } from '@nx/rspack/react-plugin.js';
+import { NxModuleFederationPlugin, NxModuleFederationDevServerPlugin } from '@nx/module-federation/rspack.js';
 import { ModuleFederationConfig } from '@nx/module-federation';
 import { join } from 'path';
 

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

@@ -1,6 +1,6 @@
-import { NxAppRspackPlugin } from '@nx/rspack/app-plugin';
-import { NxReactRspackPlugin } from '@nx/rspack/react-plugin';
-import { NxModuleFederationPlugin, NxModuleFederationDevServerPlugin } from '@nx/module-federation/rspack';
+import { NxAppRspackPlugin } from '@nx/rspack/app-plugin.js';
+import { NxReactRspackPlugin } from '@nx/rspack/react-plugin.js';
+import { NxModuleFederationPlugin, NxModuleFederationDevServerPlugin } from '@nx/module-federation/rspack.js';
 import { join } from 'path';
 
 import config from './module-federation.config';

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/module-federation/webpack';
+import {withModuleFederationForSSR} from '@nx/module-federation/webpack.js';
 
 import baseConfig from './module-federation.config';
 

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

@@ -1,6 +1,6 @@
 import { composePlugins, withNx } from '@nx/webpack';
 import { withReact } from '@nx/react';
-import { withModuleFederation } from '@nx/module-federation/webpack';
+import { withModuleFederation } from '@nx/module-federation/webpack.js';
 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,6 @@
 import {composePlugins, withNx} from '@nx/webpack';
 import {withReact} from '@nx/react';
-import {withModuleFederation} from '@nx/module-federation/webpack';
+import {withModuleFederation} from '@nx/module-federation/webpack.js';
 import { ModuleFederationConfig } from '@nx/module-federation';
 
 import baseConfig from './module-federation.config';

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

@@ -1,6 +1,6 @@
-import { NxAppRspackPlugin } from '@nx/rspack/app-plugin';
-import { NxReactRspackPlugin } from '@nx/rspack/react-plugin';
-import { NxModuleFederationPlugin, NxModuleFederationSSRDevServerPlugin } from '@nx/module-federation/rspack';
+import { NxAppRspackPlugin } from '@nx/rspack/app-plugin.js';
+import { NxReactRspackPlugin } from '@nx/rspack/react-plugin.js';
+import { NxModuleFederationPlugin, NxModuleFederationSSRDevServerPlugin } from '@nx/module-federation/rspack.js';
 import { join } from 'path';
 
 import browserMfConfig from './module-federation.config';

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

@@ -1,6 +1,6 @@
-import { NxAppRspackPlugin } from '@nx/rspack/app-plugin';
-import { NxReactRspackPlugin } from '@nx/rspack/react-plugin';
-import { NxModuleFederationPlugin, NxModuleFederationDevServerPlugin } from '@nx/module-federation/rspack';
+import { NxAppRspackPlugin } from '@nx/rspack/app-plugin.js';
+import { NxReactRspackPlugin } from '@nx/rspack/react-plugin.js';
+import { NxModuleFederationPlugin, NxModuleFederationDevServerPlugin } from '@nx/module-federation/rspack.js';
 import { join } from 'path';
 
 import config from './module-federation.config';

package/src/generators/remote/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/module-federation/webpack';
+import {withModuleFederationForSSR} from '@nx/module-federation/webpack.js';
 
 import baseConfig from "./module-federation.server.config";
 

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

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

package/src/utils/versions.d.ts

@@ -45,7 +45,7 @@ export declare const isbotVersion = "^3.6.5";
 export declare const corsVersion = "~2.8.5";
 export declare const typesCorsVersion = "~2.8.12";
 export declare const moduleFederationNodeVersion = "^2.6.26";
-export declare const moduleFederationEnhancedVersion = "^0.9.0";
+export declare const moduleFederationEnhancedVersion = "^0.15.0";
 export declare const lessVersion = "3.12.2";
 export declare const sassVersion = "^1.55.0";
 export declare const rollupPluginUrlVersion = "^8.0.2";

package/src/utils/versions.js

@@ -52,7 +52,7 @@ exports.isbotVersion = '^3.6.5';
 exports.corsVersion = '~2.8.5';
 exports.typesCorsVersion = '~2.8.12';
 exports.moduleFederationNodeVersion = '^2.6.26';
-exports.moduleFederationEnhancedVersion = '^0.9.0';
+exports.moduleFederationEnhancedVersion = '^0.15.0';
 // style preprocessors
 exports.lessVersion = '3.12.2';
 exports.sassVersion = '^1.55.0';