@nx/react 20.0.0 → 20.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "20.0.0",
+  "version": "20.0.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": {
@@ -39,10 +39,10 @@
     "picocolors": "^1.1.0",
     "tslib": "^2.3.0",
     "@module-federation/enhanced": "0.6.6",
-    "@nx/devkit": "20.0.0",
-    "@nx/js": "20.0.0",
-    "@nx/eslint": "20.0.0",
-    "@nx/web": "20.0.0",
+    "@nx/devkit": "20.0.2",
+    "@nx/js": "20.0.2",
+    "@nx/eslint": "20.0.2",
+    "@nx/web": "20.0.2",
     "express": "^4.19.2",
     "http-proxy-middleware": "^3.0.0"
   },

package/src/generators/application/files/base-rspack/src/main.tsx__tmpl__

@@ -3,6 +3,7 @@ import * as ReactDOM from 'react-dom/client';
 <% if (routing) { %>import { BrowserRouter } from 'react-router-dom';<% } %>
 
 import App from './app/<%= fileName %>';
+import './styles.<%= style %>'
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(

package/src/generators/remote/lib/setup-tspath-for-remote.js

@@ -8,7 +8,5 @@ function setupTspathForRemote(tree, options) {
     const project = (0, devkit_1.readProjectConfiguration)(tree, options.projectName);
     const exportPath = (0, maybe_js_1.maybeJs)(options, './src/remote-entry.ts');
     const exportName = 'Module';
-    (0, js_1.addTsConfigPath)(tree, `${options.projectName}/${exportName}`, [
-        (0, devkit_1.joinPathFragments)(project.root, exportPath),
-    ]);
+    (0, js_1.addTsConfigPath)(tree, `${options.projectName.replace(/-/g, '_')}/${exportName}`, [(0, devkit_1.joinPathFragments)(project.root, exportPath)]);
 }

package/src/generators/remote/remote.js

@@ -70,6 +70,14 @@ async function remoteGenerator(host, schema) {
         }
     }
     await (0, project_name_and_root_utils_1.ensureProjectName)(host, options, 'application');
+    const REMOTE_NAME_REGEX = '^[a-zA-Z_$][a-zA-Z_$0-9]*$';
+    const remoteNameRegex = new RegExp(REMOTE_NAME_REGEX);
+    if (!remoteNameRegex.test(options.projectName)) {
+        throw new Error((0, devkit_1.stripIndents) `Invalid remote name: ${options.projectName}. Remote project names must:
+      - Start with a letter, dollar sign ($) or underscore (_)
+      - Followed by any valid character (letters, digits, underscores, or dollar signs)
+      The regular expression used is ${REMOTE_NAME_REGEX}.`);
+    }
     const initAppTask = await (0, application_1.default)(host, {
         ...options,
         name: options.projectName,
@@ -116,7 +124,10 @@ async function remoteGenerator(host, schema) {
         (0, add_remote_to_dynamic_host_1.addRemoteToDynamicHost)(host, options.projectName, options.devServerPort, pathToMFManifest);
     }
     (0, add_mf_env_to_inputs_1.addMfEnvToTargetDefaultInputs)(host);
-    const installTask = (0, devkit_1.addDependenciesToPackageJson)(host, {}, { '@module-federation/enhanced': versions_1.moduleFederationEnhancedVersion });
+    const installTask = (0, devkit_1.addDependenciesToPackageJson)(host, {}, {
+        '@module-federation/enhanced': versions_1.moduleFederationEnhancedVersion,
+        '@nx/web': versions_1.nxVersion,
+    });
     tasks.push(installTask);
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);

package/src/migrations/update-19-6-1/ensure-depends-on-for-mf.js

@@ -7,7 +7,7 @@ async function default_1(tree) {
     let usesModuleFederation = false;
     (0, executor_options_utils_1.forEachExecutorOptions)(tree, '@nx/webpack:webpack', (options, projectName, targetName) => {
         const webpackConfig = options.webpackConfig;
-        if (!webpackConfig) {
+        if (!webpackConfig || webpackConfig === '@nx/react/plugins/webpack') {
             return;
         }
         const webpackContents = tree.read(webpackConfig, 'utf-8');