@nx/react 18.2.2 → 18.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "18.2.2",
+  "version": "18.2.3",
   "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,13 +34,14 @@
     "@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.2.2",
-    "@nx/js": "18.2.2",
-    "@nx/eslint": "18.2.2",
-    "@nx/web": "18.2.2",
-    "@nrwl/react": "18.2.2"
+    "@nx/devkit": "18.2.3",
+    "@nx/js": "18.2.3",
+    "@nx/eslint": "18.2.3",
+    "@nx/web": "18.2.3",
+    "@nrwl/react": "18.2.3"
   },
   "publishConfig": {
     "access": "public"

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

@@ -7,6 +7,26 @@ function applyReactConfig(options, config = {}) {
     addHotReload(config);
     if (options.svgr !== false) {
         removeSvgLoaderIfPresent(config);
+        // TODO(v20): Remove file-loader and use `?react` querystring to differentiate between asset and SVGR.
+        // It should be:
+        // use: [{
+        //   test: /\.svg$/i,
+        //   type: 'asset',
+        //   resourceQuery: /react/, // *.svg?react
+        // },
+        // {
+        //   test: /\.svg$/i,
+        //   issuer: /\.[jt]sx?$/,
+        //   resourceQuery: { not: [/react/] }, // exclude react component if *.svg?react
+        //   use: ['@svgr/webpack'],
+        // }],
+        // See:
+        // - SVGR: https://react-svgr.com/docs/webpack/#use-svgr-and-asset-svg-in-the-same-project
+        // - Vite: https://www.npmjs.com/package/vite-plugin-svgr
+        // - Rsbuild: https://github.com/web-infra-dev/rsbuild/pull/1783
+        // Note: We also need a migration for any projects that are using SVGR to convert
+        //       `import { ReactComponent as X } from './x.svg` to
+        //       `import X from './x.svg?react';
         config.module.rules.push({
             test: /\.svg$/,
             issuer: /\.(js|ts|md)x?$/,
@@ -19,6 +39,12 @@ function applyReactConfig(options, config = {}) {
                         ref: true,
                     },
                 },
+                {
+                    loader: require.resolve('file-loader'),
+                    options: {
+                        name: '[name].[hash].[ext]',
+                    },
+                },
             ],
         });
     }

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.d.ts

@@ -7,6 +7,7 @@ type ModuleFederationDevServerOptions = WebDevServerOptions & {
     isInitialHost?: boolean;
     parallel?: number;
     staticRemotesPort?: number;
+    pathToManifestFile?: string;
 };
 type StaticRemoteConfig = {
     basePath: string;

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

@@ -11,6 +11,8 @@ const cache_directory_1 = require("nx/src/utils/cache-directory");
 const node_child_process_1 = require("node:child_process");
 const node_path_1 = require("node:path");
 const node_fs_1 = require("node:fs");
+const fs_1 = require("fs");
+const path_1 = require("path");
 function getBuildOptions(buildTarget, context) {
     const target = (0, devkit_1.parseTargetString)(buildTarget, context);
     const buildOptions = (0, devkit_1.readTargetOptions)(target, context);
@@ -56,27 +58,30 @@ function startStaticRemotesFileServer(staticRemotesConfig, context, options) {
     }, context);
     return staticRemotesIter;
 }
-async function startDevRemotes(remotes, context, options) {
-    const devRemoteIters = [];
-    for (const app of remotes.devRemotes) {
-        const remoteProjectServeTarget = context.projectGraph.nodes[app].data.targets['serve'];
+async function startRemotes(remotes, context, options, target = 'serve') {
+    const remoteIters = [];
+    for (const app of remotes) {
+        const remoteProjectServeTarget = context.projectGraph.nodes[app].data.targets[target];
         const isUsingModuleFederationDevServerExecutor = remoteProjectServeTarget.executor.includes('module-federation-dev-server');
-        devRemoteIters.push(await (0, devkit_1.runExecutor)({
+        const overrides = target === 'serve'
+            ? {
+                watch: true,
+                ...(options.host ? { host: options.host } : {}),
+                ...(options.ssl ? { ssl: options.ssl } : {}),
+                ...(options.sslCert ? { sslCert: options.sslCert } : {}),
+                ...(options.sslKey ? { sslKey: options.sslKey } : {}),
+                ...(isUsingModuleFederationDevServerExecutor
+                    ? { isInitialHost: false }
+                    : {}),
+            }
+            : {};
+        remoteIters.push(await (0, devkit_1.runExecutor)({
             project: app,
-            target: 'serve',
+            target,
             configuration: context.configurationName,
-        }, {
-            watch: true,
-            ...(options.host ? { host: options.host } : {}),
-            ...(options.ssl ? { ssl: options.ssl } : {}),
-            ...(options.sslCert ? { sslCert: options.sslCert } : {}),
-            ...(options.sslKey ? { sslKey: options.sslKey } : {}),
-            ...(isUsingModuleFederationDevServerExecutor
-                ? { isInitialHost: false }
-                : {}),
-        }, context));
+        }, overrides, context));
     }
-    return devRemoteIters;
+    return remoteIters;
 }
 async function buildStaticRemotes(staticRemotesConfig, nxBin, context, options) {
     if (!staticRemotesConfig.remotes.length) {
@@ -155,6 +160,17 @@ async function* moduleFederationDevServer(options, context) {
         : (0, dev_server_impl_1.default)(options, context);
     const p = context.projectsConfigurations.projects[context.projectName];
     const buildOptions = getBuildOptions(options.buildTarget, context);
+    let pathToManifestFile = (0, node_path_1.join)(context.root, p.sourceRoot, 'assets/module-federation.manifest.json');
+    if (options.pathToManifestFile) {
+        const userPathToManifestFile = (0, node_path_1.join)(context.root, options.pathToManifestFile);
+        if (!(0, fs_1.existsSync)(userPathToManifestFile)) {
+            throw new Error(`The provided Module Federation manifest file path does not exist. Please check the file exists at "${userPathToManifestFile}".`);
+        }
+        else if ((0, path_1.extname)(options.pathToManifestFile) !== '.json') {
+            throw new Error(`The Module Federation manifest file must be a JSON. Please ensure the file at ${userPathToManifestFile} is a JSON.`);
+        }
+        pathToManifestFile = userPathToManifestFile;
+    }
     if (!options.isInitialHost) {
         return yield* currIter;
     }
@@ -163,7 +179,7 @@ async function* moduleFederationDevServer(options, context) {
         projectName: context.projectName,
         projectGraph: context.projectGraph,
         root: context.root,
-    });
+    }, pathToManifestFile);
     if (remotes.devRemotes.length > 0 && !initialStaticRemotesPorts) {
         options.staticRemotesPort = options.devRemotes.reduce((portToUse, r) => {
             const remotePort = context.projectGraph.nodes[r].data.targets['serve'].options.port;
@@ -177,11 +193,12 @@ async function* moduleFederationDevServer(options, context) {
     }
     const staticRemotesConfig = parseStaticRemotesConfig(remotes.staticRemotes, context);
     await buildStaticRemotes(staticRemotesConfig, nxBin, context, options);
-    const devRemoteIters = await startDevRemotes(remotes, context, options);
+    const devRemoteIters = await startRemotes(remotes.devRemotes, context, options, 'serve');
+    const dynamicRemotesIters = await startRemotes(remotes.dynamicRemotes, context, options, 'serve-static');
     const staticRemotesIter = remotes.staticRemotes.length > 0
         ? startStaticRemotesFileServer(staticRemotesConfig, context, options)
         : undefined;
-    return yield* (0, async_iterable_1.combineAsyncIterables)(currIter, ...devRemoteIters, ...(staticRemotesIter ? [staticRemotesIter] : []), (0, async_iterable_1.createAsyncIterable)(async ({ next, done }) => {
+    return yield* (0, async_iterable_1.combineAsyncIterables)(currIter, ...devRemoteIters, ...dynamicRemotesIters, ...(staticRemotesIter ? [staticRemotesIter] : []), (0, async_iterable_1.createAsyncIterable)(async ({ next, done }) => {
         if (!options.isInitialHost) {
             done();
             return;

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

@@ -109,6 +109,10 @@
     "staticRemotesPort": {
       "type": "number",
       "description": "The port at which to serve the file-server for the static remotes."
+    },
+    "pathToManifestFile": {
+      "type": "string",
+      "description": "Path to a Module Federation manifest file (e.g. `my/path/to/module-federation.manifest.json`) containing the dynamic remote applications relative to the workspace root."
     }
   }
 }

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

@@ -34,13 +34,13 @@ async function addE2e(tree, options) {
                 // the name and root are already normalized, instruct the generator to use them as is
                 bundler: options.bundler === 'rspack' ? 'webpack' : options.bundler,
                 skipFormat: true,
-                devServerTarget: `${options.projectName}:serve`,
-                baseUrl: `http://localhost:${options.devServerPort ?? 4200}`,
+                devServerTarget: `${options.projectName}:${options.e2eWebServerTarget}`,
+                baseUrl: options.e2eWebServerAddress,
                 jsx: true,
                 rootProject: options.rootProject,
                 webServerCommands: hasNxBuildPlugin
                     ? {
-                        default: `nx run ${options.projectName}:serve`,
+                        default: `nx run ${options.projectName}:${options.e2eWebServerTarget}`,
                         production: `nx run ${options.projectName}:preview`,
                     }
                     : undefined,
@@ -66,8 +66,8 @@ async function addE2e(tree, options) {
                 js: false,
                 linter: options.linter,
                 setParserOptionsProject: options.setParserOptionsProject,
-                webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx serve ${options.name}`,
-                webServerAddress: `http://localhost:${options.devServerPort ?? 4200}`,
+                webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx ${options.e2eWebServerTarget} ${options.name}`,
+                webServerAddress: options.e2eWebServerAddress,
                 rootProject: options.rootProject,
                 addPlugin: options.addPlugin,
             });

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

@@ -32,8 +32,35 @@ async function normalizeOptions(host, options, callingGenerator = '@nx/react:app
     options.addPlugin ??= addPlugin;
     options.rootProject = appProjectRoot === '.';
     options.projectNameAndRootFormat = projectNameAndRootFormat;
+    let e2eWebServerTarget = 'serve';
+    if (options.addPlugin) {
+        if (nxJson.plugins) {
+            for (const plugin of nxJson.plugins) {
+                if (options.bundler === 'vite' &&
+                    typeof plugin === 'object' &&
+                    plugin.plugin === '@nx/vite/plugin' &&
+                    plugin.options.serveTargetName) {
+                    e2eWebServerTarget = plugin.options
+                        .serveTargetName;
+                }
+                else if (options.bundler === 'webpack' &&
+                    typeof plugin === 'object' &&
+                    plugin.plugin === '@nx/webpack/plugin' &&
+                    plugin.options.serveTargetName) {
+                    e2eWebServerTarget = plugin.options
+                        .serveTargetName;
+                }
+            }
+        }
+    }
+    let e2ePort = options.devServerPort ?? 4200;
+    if (nxJson.targetDefaults?.[e2eWebServerTarget] &&
+        nxJson.targetDefaults?.[e2eWebServerTarget].options?.port) {
+        e2ePort = nxJson.targetDefaults?.[e2eWebServerTarget].options?.port;
+    }
     const e2eProjectName = options.rootProject ? 'e2e' : `${appProjectName}-e2e`;
     const e2eProjectRoot = options.rootProject ? 'e2e' : `${appProjectRoot}-e2e`;
+    const e2eWebServerAddress = `http://localhost:${e2ePort}`;
     const parsedTags = options.tags
         ? options.tags.split(',').map((s) => s.trim())
         : [];
@@ -52,6 +79,9 @@ async function normalizeOptions(host, options, callingGenerator = '@nx/react:app
         appProjectRoot,
         e2eProjectName,
         e2eProjectRoot,
+        e2eWebServerAddress,
+        e2eWebServerTarget,
+        e2ePort,
         parsedTags,
         fileName,
         styledModule,

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

@@ -36,6 +36,9 @@ export interface NormalizedSchema<T extends Schema = Schema> extends T {
   appProjectRoot: string;
   e2eProjectName: string;
   e2eProjectRoot: string;
+  e2eWebServerAddress: string;
+  e2eWebServerTarget: string;
+  e2ePort: number;
   parsedTags: string[];
   fileName: string;
   styledModule: null | SupportedStyles;