@nx/react 20.2.0-beta.2 → 20.2.0-beta.4

package/migrations.json

@@ -29,6 +29,18 @@
       "version": "19.6.1-beta.0",
       "description": "Ensure Target Defaults are set correctly for Module Federation.",
       "factory": "./src/migrations/update-19-6-1/ensure-depends-on-for-mf"
+    },
+    "update-20-2-0-update-module-federation-config-import": {
+      "cli": "nx",
+      "version": "20.2.0-beta.2",
+      "description": "Update the ModuleFederationConfig import use @nx/module-federation.",
+      "factory": "./src/migrations/update-20-2-0/migrate-mf-imports-to-new-package"
+    },
+    "update-20-2-0-update-with-module-federation-import": {
+      "cli": "nx",
+      "version": "20.2.0-beta.2",
+      "description": "Update the withModuleFederation import use @nx/module-federation/webpack.",
+      "factory": "./src/migrations/update-20-2-0/migrate-with-mf-import-to-new-package"
     }
   },
   "packageJsonUpdates": {
@@ -152,6 +164,27 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "20.2.0": {
+      "version": "20.2.0-beta.3",
+      "packages": {
+        "@module-federation/enhanced": {
+          "version": "0.7.6",
+          "alwaysAddToPackageJson": false
+        },
+        "@module-federation/runtime": {
+          "version": "0.7.6",
+          "alwaysAddToPackageJson": false
+        },
+        "@module-federation/sdk": {
+          "version": "0.7.6",
+          "alwaysAddToPackageJson": false
+        },
+        "@module-federation/node": {
+          "version": "2.6.11",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/module-federation.d.ts

@@ -1,4 +1,6 @@
-import { withModuleFederation } from './src/module-federation/with-module-federation';
-import { withModuleFederationForSSR } from './src/module-federation/with-module-federation-ssr';
-export { withModuleFederation };
-export { withModuleFederationForSSR };
+import { withModuleFederation } from '@nx/module-federation/webpack';
+import { withModuleFederationForSSR } from '@nx/module-federation/webpack';
+/**
+ * @deprecated Use `@nx/module-federation/webpack` instead. This will be removed in Nx v22.
+ */
+export { withModuleFederation, withModuleFederationForSSR };

package/module-federation.js

@@ -1,12 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withModuleFederationForSSR = exports.withModuleFederation = void 0;
-const with_module_federation_1 = require("./src/module-federation/with-module-federation");
-Object.defineProperty(exports, "withModuleFederation", { enumerable: true, get: function () { return with_module_federation_1.withModuleFederation; } });
-const with_module_federation_ssr_1 = require("./src/module-federation/with-module-federation-ssr");
-Object.defineProperty(exports, "withModuleFederationForSSR", { enumerable: true, get: function () { return with_module_federation_ssr_1.withModuleFederationForSSR; } });
+const webpack_1 = require("@nx/module-federation/webpack");
+Object.defineProperty(exports, "withModuleFederation", { enumerable: true, get: function () { return webpack_1.withModuleFederation; } });
+const webpack_2 = require("@nx/module-federation/webpack");
+Object.defineProperty(exports, "withModuleFederationForSSR", { enumerable: true, get: function () { return webpack_2.withModuleFederationForSSR; } });
 // Support for older generated code: `const withModuleFederation = require('@nx/react/module-federation')`
-module.exports = with_module_federation_1.withModuleFederation;
+/**
+ * @deprecated Use `@nx/module-federation/webpack` instead. This will be removed in Nx v22.
+ */
+module.exports = webpack_1.withModuleFederation;
 // Allow newer generated code to work: `const { withModuleFederation } = require(...)`;
-module.exports.withModuleFederation = with_module_federation_1.withModuleFederation;
-module.exports.withModuleFederationForSSR = with_module_federation_ssr_1.withModuleFederationForSSR;
+/**
+ * @deprecated Use `@nx/module-federation/webpack` instead. This will be removed in Nx v22.
+ */
+module.exports.withModuleFederation = webpack_1.withModuleFederation;
+/**
+ * @deprecated Use `@nx/module-federation/webpack` instead. This will be removed in Nx v22.
+ */
+module.exports.withModuleFederationForSSR = webpack_2.withModuleFederationForSSR;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "20.2.0-beta.2",
+  "version": "20.2.0-beta.4",
   "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",
-    "@module-federation/enhanced": "0.6.9",
-    "@nx/devkit": "20.2.0-beta.2",
-    "@nx/js": "20.2.0-beta.2",
-    "@nx/eslint": "20.2.0-beta.2",
-    "@nx/web": "20.2.0-beta.2",
+    "@nx/devkit": "20.2.0-beta.4",
+    "@nx/js": "20.2.0-beta.4",
+    "@nx/eslint": "20.2.0-beta.4",
+    "@nx/web": "20.2.0-beta.4",
+    "@nx/module-federation": "20.2.0-beta.4",
     "express": "^4.19.2",
     "http-proxy-middleware": "^3.0.3"
   },

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

@@ -4,13 +4,11 @@ exports.default = moduleFederationDevServer;
 const devkit_1 = require("@nx/devkit");
 const dev_server_impl_1 = require("@nx/webpack/src/executors/dev-server/dev-server.impl");
 const file_server_impl_1 = require("@nx/web/src/executors/file-server/file-server.impl");
-const module_federation_1 = require("@nx/webpack/src/utils/module-federation");
+const utils_1 = require("@nx/module-federation/src/utils");
 const async_iterable_1 = require("@nx/devkit/src/utils/async-iterable");
 const wait_for_port_open_1 = require("@nx/web/src/utils/wait-for-port-open");
 const fs_1 = require("fs");
 const path_1 = require("path");
-const start_remote_proxies_1 = require("@nx/webpack/src/utils/module-federation/start-remote-proxies");
-const parse_static_remotes_config_1 = require("@nx/webpack/src/utils/module-federation/parse-static-remotes-config");
 const build_static_remotes_1 = require("../../utils/build-static.remotes");
 function getBuildOptions(buildTarget, context) {
     const target = (0, devkit_1.parseTargetString)(buildTarget, context);
@@ -120,9 +118,9 @@ async function* moduleFederationDevServer(options, context) {
     if (!options.isInitialHost) {
         return yield* currIter;
     }
-    const moduleFederationConfig = (0, module_federation_1.getModuleFederationConfig)(buildOptions.tsConfig, context.root, p.root, 'react');
+    const moduleFederationConfig = (0, utils_1.getModuleFederationConfig)(buildOptions.tsConfig, context.root, p.root, 'react');
     const remoteNames = options.devRemotes?.map((r) => typeof r === 'string' ? r : r.remoteName);
-    const remotes = (0, module_federation_1.getRemotes)(remoteNames, options.skipRemotes, moduleFederationConfig, {
+    const remotes = (0, utils_1.getRemotes)(remoteNames, options.skipRemotes, moduleFederationConfig, {
         projectName: context.projectName,
         projectGraph: context.projectGraph,
         root: context.root,
@@ -133,11 +131,11 @@ async function* moduleFederationDevServer(options, context) {
         ...(remotes.devRemotes.map((r) => typeof r === 'string' ? r : r.remoteName) ?? []).map((r) => r.replace(/-/g, '_')),
         p.name.replace(/-/g, '_'),
     ]);
-    const staticRemotesConfig = (0, parse_static_remotes_config_1.parseStaticRemotesConfig)([...remotes.staticRemotes, ...remotes.dynamicRemotes], context);
+    const staticRemotesConfig = (0, utils_1.parseStaticRemotesConfig)([...remotes.staticRemotes, ...remotes.dynamicRemotes], context);
     const mappedLocationsOfStaticRemotes = await (0, build_static_remotes_1.buildStaticRemotes)(staticRemotesConfig, nxBin, context, options);
     const devRemoteIters = await startRemotes(remotes.devRemotes, context, options, 'serve');
     const staticRemotesIter = startStaticRemotesFileServer(staticRemotesConfig, context, options);
-    (0, start_remote_proxies_1.startRemoteProxies)(staticRemotesConfig, mappedLocationsOfStaticRemotes, options.ssl
+    (0, utils_1.startRemoteProxies)(staticRemotesConfig, mappedLocationsOfStaticRemotes, options.ssl
         ? {
             pathToCert: (0, path_1.join)(devkit_1.workspaceRoot, options.sslCert),
             pathToKey: (0, path_1.join)(devkit_1.workspaceRoot, options.sslKey),

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

@@ -4,14 +4,12 @@ exports.default = moduleFederationSsrDevServer;
 const devkit_1 = require("@nx/devkit");
 const ssr_dev_server_impl_1 = require("@nx/webpack/src/executors/ssr-dev-server/ssr-dev-server.impl");
 const path_1 = require("path");
-const module_federation_1 = require("@nx/webpack/src/utils/module-federation");
+const utils_1 = require("@nx/module-federation/src/utils");
 const async_iterable_1 = require("@nx/devkit/src/utils/async-iterable");
 const child_process_1 = require("child_process");
 const fs_1 = require("fs");
-const parse_static_remotes_config_1 = require("@nx/webpack/src/utils/module-federation/parse-static-remotes-config");
 const file_server_impl_1 = require("@nx/web/src/executors/file-server/file-server.impl");
 const cache_directory_1 = require("nx/src/utils/cache-directory");
-const start_ssr_remote_proxies_1 = require("@nx/webpack/src/utils/module-federation/start-ssr-remote-proxies");
 const wait_for_port_open_1 = require("@nx/web/src/utils/wait-for-port-open");
 function normalizeOptions(options) {
     return {
@@ -155,9 +153,9 @@ async function* moduleFederationSsrDevServer(ssrDevServerOptions, context) {
     if (!options.isInitialHost) {
         return yield* iter;
     }
-    const moduleFederationConfig = (0, module_federation_1.getModuleFederationConfig)(buildOptions.tsConfig, context.root, projectConfig.root, 'react');
+    const moduleFederationConfig = (0, utils_1.getModuleFederationConfig)(buildOptions.tsConfig, context.root, projectConfig.root, 'react');
     const remoteNames = options.devRemotes?.map((remote) => typeof remote === 'string' ? remote : remote.remoteName);
-    const remotes = (0, module_federation_1.getRemotes)(remoteNames, options.skipRemotes, moduleFederationConfig, {
+    const remotes = (0, utils_1.getRemotes)(remoteNames, options.skipRemotes, moduleFederationConfig, {
         projectName: context.projectName,
         projectGraph: context.projectGraph,
         root: context.root,
@@ -167,11 +165,11 @@ async function* moduleFederationSsrDevServer(ssrDevServerOptions, context) {
         ...(remotes.devRemotes.map((r) => typeof r === 'string' ? r : r.remoteName) ?? []).map((r) => r.replace(/-/g, '_')),
         projectConfig.name.replace(/-/g, '_'),
     ]);
-    const staticRemotesConfig = (0, parse_static_remotes_config_1.parseStaticSsrRemotesConfig)([...remotes.staticRemotes, ...remotes.dynamicRemotes], context);
+    const staticRemotesConfig = (0, utils_1.parseStaticSsrRemotesConfig)([...remotes.staticRemotes, ...remotes.dynamicRemotes], context);
     const mappedLocationsOfStaticRemotes = await buildSsrStaticRemotes(staticRemotesConfig, nxBin, context, options);
     const devRemoteIters = await startRemotes(remotes.devRemotes, context, options);
     const staticRemotesIter = startSsrStaticRemotesFileServer(staticRemotesConfig, context, options);
-    (0, start_ssr_remote_proxies_1.startSsrRemoteProxies)(staticRemotesConfig, mappedLocationsOfStaticRemotes, options.ssl
+    (0, utils_1.startSsrRemoteProxies)(staticRemotesConfig, mappedLocationsOfStaticRemotes, options.ssl
         ? {
             pathToCert: options.sslCert,
             pathToKey: options.sslKey,

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

@@ -1,7 +1,7 @@
 import { ModuleFederationStaticServerSchema } from './schema';
 import { ModuleFederationDevServerOptions } from '../module-federation-dev-server/schema';
 import { ExecutorContext } from 'nx/src/config/misc-interfaces';
-import { StaticRemotesConfig } from '@nx/webpack/src/utils/module-federation/parse-static-remotes-config';
+import { StaticRemotesConfig } from '@nx/module-federation/src/utils';
 export declare function startProxies(staticRemotesConfig: StaticRemotesConfig, hostServeOptions: ModuleFederationDevServerOptions, mappedLocationOfHost: string, mappedLocationsOfRemotes: Record<string, string>, sslOptions?: {
     pathToCert: string;
     pathToKey: string;

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

@@ -5,8 +5,7 @@ exports.default = moduleFederationStaticServer;
 const path_1 = require("path");
 const devkit_1 = require("@nx/devkit");
 const fs_1 = require("fs");
-const module_federation_1 = require("@nx/webpack/src/utils/module-federation");
-const parse_static_remotes_config_1 = require("@nx/webpack/src/utils/module-federation/parse-static-remotes-config");
+const utils_1 = require("@nx/module-federation/src/utils");
 const build_static_remotes_1 = require("../../utils/build-static.remotes");
 const child_process_1 = require("child_process");
 const process = require("node:process");
@@ -164,13 +163,13 @@ async function* moduleFederationStaticServer(schema, context) {
     // Get the remotes from the module federation config
     const p = context.projectsConfigurations.projects[context.projectName];
     const options = getBuildAndServeOptionsFromServeTarget(schema.serveTarget, context);
-    const moduleFederationConfig = (0, module_federation_1.getModuleFederationConfig)(options.buildOptions.tsConfig, context.root, p.root, 'react');
-    const remotes = (0, module_federation_1.getRemotes)([], options.serveOptions.skipRemotes, moduleFederationConfig, {
+    const moduleFederationConfig = (0, utils_1.getModuleFederationConfig)(options.buildOptions.tsConfig, context.root, p.root, 'react');
+    const remotes = (0, utils_1.getRemotes)([], options.serveOptions.skipRemotes, moduleFederationConfig, {
         projectName: context.projectName,
         projectGraph: context.projectGraph,
         root: context.root,
     }, options.pathToManifestFile);
-    const staticRemotesConfig = (0, parse_static_remotes_config_1.parseStaticRemotesConfig)([...remotes.staticRemotes, ...remotes.dynamicRemotes], context);
+    const staticRemotesConfig = (0, utils_1.parseStaticRemotesConfig)([...remotes.staticRemotes, ...remotes.dynamicRemotes], context);
     options.serveOptions.staticRemotesPort ??= remotes.staticRemotePort;
     const mappedLocationsOfStaticRemotes = await (0, build_static_remotes_1.buildStaticRemotes)(staticRemotesConfig, nxBin, context, options.serveOptions);
     // Build the host

package/src/generators/application/application.js

@@ -28,7 +28,6 @@ const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-projec
 const setup_tailwind_1 = require("../setup-tailwind/setup-tailwind");
 const flat_config_1 = require("@nx/eslint/src/utils/flat-config");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
-const add_project_root_to_rspack_plugin_excludes_1 = require("./lib/add-project-root-to-rspack-plugin-excludes");
 async function addLinting(host, options) {
     const tasks = [];
     if (options.linter === eslint_1.Linter.EsLint) {
@@ -74,16 +73,17 @@ async function applicationGenerator(host, schema) {
     });
 }
 async function applicationGeneratorInternal(host, schema) {
-    (0, ts_solution_setup_1.assertNotUsingTsSolutionSetup)(host, 'react', 'application');
     const tasks = [];
-    const options = await (0, normalize_options_1.normalizeOptions)(host, schema);
-    (0, show_possible_warnings_1.showPossibleWarnings)(host, options);
     const jsInitTask = await (0, js_1.initGenerator)(host, {
         ...schema,
         tsConfigName: schema.rootProject ? 'tsconfig.json' : 'tsconfig.base.json',
         skipFormat: true,
+        addTsPlugin: schema.useTsSolution,
+        formatter: schema.formatter,
     });
     tasks.push(jsInitTask);
+    const options = await (0, normalize_options_1.normalizeOptions)(host, schema);
+    (0, show_possible_warnings_1.showPossibleWarnings)(host, options);
     const initTask = await (0, init_1.default)(host, {
         ...options,
         skipFormat: true,
@@ -116,6 +116,15 @@ async function applicationGeneratorInternal(host, schema) {
             tasks.push(ensureDependencies(host, { uiFramework: 'react' }));
         }
     }
+    else if (options.bundler === 'rspack') {
+        const { rspackInitGenerator } = (0, devkit_1.ensurePackage)('@nx/rspack', versions_1.nxVersion);
+        const rspackInitTask = await rspackInitGenerator(host, {
+            ...options,
+            addPlugin: false,
+            skipFormat: true,
+        });
+        tasks.push(rspackInitTask);
+    }
     if (!options.rootProject) {
         (0, create_ts_config_1.extractTsConfigBase)(host);
     }
@@ -143,6 +152,7 @@ async function applicationGeneratorInternal(host, schema) {
             compiler: options.compiler,
             skipFormat: true,
             addPlugin: options.addPlugin,
+            projectType: 'application',
         });
         tasks.push(viteTask);
         createOrEditViteConfig(host, {
@@ -164,7 +174,7 @@ async function applicationGeneratorInternal(host, schema) {
         }, false);
     }
     else if (options.bundler === 'rspack') {
-        const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/rspack', versions_1.nxRspackVersion);
+        const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/rspack', versions_1.nxVersion);
         const rspackTask = await configurationGenerator(host, {
             project: options.projectName,
             main: (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)({
@@ -177,7 +187,6 @@ async function applicationGeneratorInternal(host, schema) {
             framework: 'react',
         });
         tasks.push(rspackTask);
-        (0, add_project_root_to_rspack_plugin_excludes_1.addProjectRootToRspackPluginExcludesIfExists)(host, options.appProjectRoot);
     }
     if (options.bundler !== 'vite' && options.unitTestRunner === 'vitest') {
         const { createOrEditViteConfig, vitestGenerator } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
@@ -251,6 +260,11 @@ async function applicationGeneratorInternal(host, schema) {
         });
         `);
     }
+    (0, ts_solution_setup_1.updateTsconfigFiles)(host, options.appProjectRoot, 'tsconfig.app.json', {
+        jsx: 'react-jsx',
+        module: 'esnext',
+        moduleResolution: 'bundler',
+    });
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }

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

@@ -0,0 +1,53 @@
+<%_ if (rspackPluginOptions) { _%>
+const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin');
+const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin');
+const { join } = require('path');
+
+module.exports = {
+  output: {
+    path: join(__dirname, '<%= offsetFromRoot %><%= rspackPluginOptions.outputPath %>'),
+  },
+  devServer: {
+    port: 4200,
+    historyApiFallback: {
+      index: '/index.html',
+      disableDotRule: true,
+      htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
+    },
+  },
+  plugins: [
+    new NxAppRspackPlugin({
+      tsConfig: '<%= rspackPluginOptions.tsConfig %>',
+      main: '<%= rspackPluginOptions.main %>',
+      index: '<%= rspackPluginOptions.index %>',
+      baseHref: '<%= rspackPluginOptions.baseHref %>',
+      assets: <%- JSON.stringify(rspackPluginOptions.assets) %>,
+      styles: <%- JSON.stringify(rspackPluginOptions.styles) %>,
+      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
+      optimization: process.env['NODE_ENV'] === 'production',
+    }),
+    new NxReactRspackPlugin({
+      // Uncomment this line if you don't want to use SVGR
+      // See: https://react-svgr.com/
+      // svgr: false
+    }),
+  ],
+};
+<%_ } else { _%>
+const { composePlugins, withNx, withReact } = require('@nx/rspack');
+
+// Nx plugins for rspack.
+module.exports = composePlugins(
+  withNx(),
+  withReact({
+    // Uncomment this line if you don't want to use SVGR
+    // See: https://react-svgr.com/
+    // svgr: false
+  }),
+  (config) => {
+    // Update the rspack config as needed here.
+    // e.g. `config.plugins.push(new MyPlugin())`
+    return config;
+  }
+);
+<%_ } _%>

package/src/generators/application/files/base-rspack/tsconfig.app.json__tmpl__

@@ -1,14 +1,31 @@
-{
+<%_ if (isUsingTsSolutionSetup) { _%>{
+  "extends": "<%= offsetFromRoot%>tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",
+    "jsx": "react-jsx",
+    "lib": ["dom"],
+    "types": [
+      "node",
+      <%_ if (style === 'styled-jsx') { _%>"@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx", "src/**/*.spec.js", "src/**/*.test.js", "src/**/*.spec.jsx", "src/**/*.test.jsx"],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}<% } else { %>{
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "<%= offsetFromRoot %>dist/out-tsc",
     "types": [
       "node",
-      <%_ if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } _%>
+      <%_ if (style === 'styled-jsx') { _%>"@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
       "@nx/react/typings/cssmodule.d.ts",
       "@nx/react/typings/image.d.ts"
-      ]
+    ]
   },
-  "exclude": ["jest.config.ts","src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx", "src/**/*.spec.js", "src/**/*.test.js", "src/**/*.spec.jsx", "src/**/*.test.jsx"],
+  "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx", "src/**/*.spec.js", "src/**/*.test.js", "src/**/*.spec.jsx", "src/**/*.test.jsx"],
   "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }
+<% } %>

package/src/generators/application/files/base-vite/tsconfig.app.json__tmpl__

@@ -1,4 +1,20 @@
-{
+<%_ if (isUsingTsSolutionSetup) { _%>{
+  "extends": "<%= offsetFromRoot%>tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",
+    "jsx": "react-jsx",
+    "lib": ["dom"],
+    "types": [
+      "node",
+      <%_ if (style === 'styled-jsx') { _%>"@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx", "src/**/*.spec.js", "src/**/*.test.js", "src/**/*.spec.jsx", "src/**/*.test.jsx"],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}<% } else { %>{
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "<%= offsetFromRoot %>dist/out-tsc",
@@ -7,8 +23,9 @@
       <%_ if (style === 'styled-jsx') { _%>"@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
       "@nx/react/typings/cssmodule.d.ts",
       "@nx/react/typings/image.d.ts"
-      ]
+    ]
   },
   "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx", "src/**/*.spec.js", "src/**/*.test.js", "src/**/*.spec.jsx", "src/**/*.test.jsx"],
   "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }
+<% } %>

package/src/generators/application/files/base-webpack/tsconfig.app.json__tmpl__

@@ -1,4 +1,20 @@
-{
+<%_ if (isUsingTsSolutionSetup) { _%>{
+  "extends": "<%= offsetFromRoot%>tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",
+    "jsx": "react-jsx",
+    "lib": ["dom"],
+    "types": [
+      "node",
+      <%_ if (style === 'styled-jsx') { _%>"@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx", "src/**/*.spec.js", "src/**/*.test.js", "src/**/*.spec.jsx", "src/**/*.test.jsx"],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}<% } else { %>{
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "<%= offsetFromRoot %>dist/out-tsc",
@@ -7,8 +23,9 @@
       <%_ if (style === 'styled-jsx') { _%>"@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
       "@nx/react/typings/cssmodule.d.ts",
       "@nx/react/typings/image.d.ts"
-      ]
+    ]
   },
-  "exclude": ["jest.config.ts","src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx", "src/**/*.spec.js", "src/**/*.test.js", "src/**/*.spec.jsx", "src/**/*.test.jsx"],
+  "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx", "src/**/*.spec.js", "src/**/*.test.js", "src/**/*.spec.jsx", "src/**/*.test.jsx"],
   "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }
+<% } %>

package/src/generators/application/files/style-css-module/src/app/__fileName__.tsx__tmpl__

@@ -1,8 +1,8 @@
 <% if (classComponent) { %>
 import { Component } from 'react';
 <%_ } _%>
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import styles from './<%= fileName %>.module.<%= style %>';
+// Uncomment this line to use CSS modules
+// import styles from './<%= fileName %>.module.<%= style %>';
 <%_ if (!minimal) { _%>
 import NxWelcome from "./nx-welcome";
 <%_ } _%>

package/src/generators/application/lib/add-e2e.d.ts

@@ -1,3 +1,3 @@
-import type { GeneratorCallback, Tree } from '@nx/devkit';
+import { GeneratorCallback, Tree } from '@nx/devkit';
 import { NormalizedSchema } from '../schema';
 export declare function addE2e(tree: Tree, options: NormalizedSchema): Promise<GeneratorCallback>;

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

@@ -6,10 +6,12 @@ const web_1 = require("@nx/web");
 const versions_1 = require("../../../utils/versions");
 const has_webpack_plugin_1 = require("../../../utils/has-webpack-plugin");
 const has_vite_plugin_1 = require("../../../utils/has-vite-plugin");
+const has_rspack_plugin_1 = require("../../../utils/has-rspack-plugin");
 const find_plugin_for_config_file_1 = require("@nx/devkit/src/utils/find-plugin-for-config-file");
 const target_defaults_utils_1 = require("@nx/devkit/src/generators/target-defaults-utils");
 async function addE2e(tree, options) {
     const hasNxBuildPlugin = (options.bundler === 'webpack' && (0, has_webpack_plugin_1.hasWebpackPlugin)(tree)) ||
+        (options.bundler === 'rspack' && (0, has_rspack_plugin_1.hasRspackPlugin)(tree)) ||
         (options.bundler === 'vite' && (0, has_vite_plugin_1.hasVitePlugin)(tree));
     let e2eWebServerInfo = {
         e2eWebServerAddress: `http://localhost:${options.devServerPort ?? 4200}`,
@@ -36,14 +38,28 @@ async function addE2e(tree, options) {
     switch (options.e2eTestRunner) {
         case 'cypress': {
             const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
-            (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
-                projectType: 'application',
-                root: options.e2eProjectRoot,
-                sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
-                targets: {},
-                implicitDependencies: [options.projectName],
-                tags: [],
-            });
+            if (options.isUsingTsSolutionConfig) {
+                (0, devkit_1.writeJson)(tree, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'package.json'), {
+                    name: options.e2eProjectName,
+                    version: '0.0.1',
+                    private: true,
+                    nx: {
+                        projectType: 'application',
+                        sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
+                        implicitDependencies: [options.projectName],
+                    },
+                });
+            }
+            else {
+                (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
+                    projectType: 'application',
+                    root: options.e2eProjectRoot,
+                    sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
+                    targets: {},
+                    implicitDependencies: [options.projectName],
+                    tags: [],
+                });
+            }
             const e2eTask = await configurationGenerator(tree, {
                 ...options,
                 project: options.e2eProjectName,
@@ -88,13 +104,27 @@ async function addE2e(tree, options) {
         }
         case 'playwright': {
             const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/playwright', versions_1.nxVersion);
-            (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
-                projectType: 'application',
-                root: options.e2eProjectRoot,
-                sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
-                targets: {},
-                implicitDependencies: [options.projectName],
-            });
+            if (options.isUsingTsSolutionConfig) {
+                (0, devkit_1.writeJson)(tree, (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'package.json'), {
+                    name: options.e2eProjectName,
+                    version: '0.0.1',
+                    private: true,
+                    nx: {
+                        projectType: 'application',
+                        sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
+                        implicitDependencies: [options.projectName],
+                    },
+                });
+            }
+            else {
+                (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
+                    projectType: 'application',
+                    root: options.e2eProjectRoot,
+                    sourceRoot: (0, devkit_1.joinPathFragments)(options.e2eProjectRoot, 'src'),
+                    targets: {},
+                    implicitDependencies: [options.projectName],
+                });
+            }
             const e2eTask = await configurationGenerator(tree, {
                 project: options.e2eProjectName,
                 skipFormat: true,

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

@@ -16,5 +16,6 @@ async function addJest(host, options) {
         setupFile: 'none',
         compiler: options.compiler,
         skipFormat: true,
+        runtimeTsconfigFileName: 'tsconfig.app.json',
     });
 }