@nx/react 18.0.0-beta.1 → 18.0.0-beta.3

package/generators.json

@@ -37,7 +37,7 @@
       "aliases": ["slice"]
     },
     "storybook-configuration": {
-      "factory": "./src/generators/storybook-configuration/configuration#storybookConfigurationGenerator",
+      "factory": "./src/generators/storybook-configuration/configuration#storybookConfigurationGeneratorInternal",
       "schema": "./src/generators/storybook-configuration/schema.json",
       "description": "Set up storybook for a React app or library.",
       "hidden": false

package/package.json

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

package/plugins/component-testing/index.js

@@ -25,12 +25,17 @@ const path_1 = require("path");
  * @param options override options
  */
 function nxComponentTestingPreset(pathToConfig, options) {
-    const normalizedProjectRootPath = ['.ts', '.js'].some((ext) => pathToConfig.endsWith(ext))
-        ? pathToConfig
-        : (0, path_1.dirname)(pathToConfig);
     const basePresetSettings = (0, cypress_preset_1.nxBaseCypressPreset)(pathToConfig, {
         testingType: 'component',
     });
+    if (global.NX_GRAPH_CREATION || global.NX_CYPRESS_INIT_GENERATOR_RUNNING) {
+        // this is only used by plugins, so we don't need the component testing
+        // options, cast to any to avoid type errors
+        return basePresetSettings;
+    }
+    const normalizedProjectRootPath = ['.ts', '.js'].some((ext) => pathToConfig.endsWith(ext))
+        ? pathToConfig
+        : (0, path_1.dirname)(pathToConfig);
     if (options?.bundler === 'vite') {
         return {
             ...basePresetSettings,
@@ -66,18 +71,24 @@ function nxComponentTestingPreset(pathToConfig, options) {
         const ctTargetName = options?.ctTargetName || 'component-test';
         const ctConfigurationName = process.env.NX_CYPRESS_TARGET_CONFIGURATION;
         const ctExecutorContext = (0, ct_helpers_1.createExecutorContext)(graph, ctTargets, ctProjectName, ctTargetName, ctConfigurationName);
-        const ctExecutorOptions = (0, devkit_1.readTargetOptions)({
-            project: ctProjectName,
-            target: ctTargetName,
-            configuration: ctConfigurationName,
-        }, ctExecutorContext);
-        const buildTarget = ctExecutorOptions.devServerTarget;
+        let buildTarget = options?.buildTarget;
+        if (!buildTarget) {
+            const ctExecutorOptions = (0, devkit_1.readTargetOptions)({
+                project: ctProjectName,
+                target: ctTargetName,
+                configuration: ctConfigurationName,
+            }, ctExecutorContext);
+            buildTarget = ctExecutorOptions.devServerTarget;
+        }
         if (!buildTarget) {
             throw new Error(`Unable to find the 'devServerTarget' executor option in the '${ctTargetName}' target of the '${ctProjectName}' project`);
         }
         webpackConfig = buildTargetWebpack(ctExecutorContext, buildTarget, ctProjectName);
     }
     catch (e) {
+        if (e instanceof InvalidExecutorError) {
+            throw e;
+        }
         devkit_1.logger.warn((0, devkit_1.stripIndents) `Unable to build a webpack config with the project graph. 
       Falling back to default webpack config.`);
         devkit_1.logger.warn(e);
@@ -137,6 +148,11 @@ function buildTargetWebpack(ctx, buildTarget, componentTestingProjectName) {
     Has component config? ${!!ctProjectConfig}
     `);
     }
+    if (buildableProjectConfig.targets[parsed.target].executor !==
+        '@nx/webpack:webpack') {
+        throw new InvalidExecutorError(`The '${parsed.target}' target of the '${parsed.project}' project is not using the '@nx/webpack:webpack' executor. ` +
+            `Please make sure to use '@nx/webpack:webpack' executor in that target to use Cypress Component Testing.`);
+    }
     const context = (0, ct_helpers_1.createExecutorContext)(graph, buildableProjectConfig.targets, parsed.project, parsed.target, parsed.target);
     const { normalizeOptions, } = require('@nx/webpack/src/executors/webpack/lib/normalize-options');
     const { resolveUserDefinedWebpackConfig, } = require('@nx/webpack/src/utils/webpack/resolve-user-defined-webpack-config');
@@ -197,3 +213,10 @@ function findTsConfig(projectRoot) {
         }
     }
 }
+class InvalidExecutorError extends Error {
+    constructor(message) {
+        super(message);
+        this.message = message;
+        this.name = 'InvalidExecutorError';
+    }
+}

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

@@ -19,12 +19,6 @@ function applyReactConfig(options, config = {}) {
                         ref: true,
                     },
                 },
-                {
-                    loader: require.resolve('file-loader'),
-                    options: {
-                        name: '[name].[hash].[ext]',
-                    },
-                },
             ],
         });
     }

package/src/generators/application/application.js

@@ -36,6 +36,7 @@ async function addLinting(host, options) {
             skipFormat: true,
             rootProject: options.rootProject,
             skipPackageJson: options.skipPackageJson,
+            addPlugin: options.addPlugin,
         });
         tasks.push(lintTask);
         if ((0, eslint_file_1.isEslintConfigSupported)(host)) {
@@ -51,6 +52,7 @@ async function addLinting(host, options) {
 }
 async function applicationGenerator(host, schema) {
     return await applicationGeneratorInternal(host, {
+        addPlugin: false,
         projectNameAndRootFormat: 'derived',
         ...schema,
     });
@@ -76,6 +78,7 @@ async function applicationGeneratorInternal(host, schema) {
         const webpackInitTask = await webpackInitGenerator(host, {
             skipPackageJson: options.skipPackageJson,
             skipFormat: true,
+            addPlugin: options.addPlugin,
         });
         tasks.push(webpackInitTask);
         if (!options.skipPackageJson) {
@@ -103,6 +106,7 @@ async function applicationGeneratorInternal(host, schema) {
             inSourceTests: options.inSourceTests,
             compiler: options.compiler,
             skipFormat: true,
+            addPlugin: options.addPlugin,
         });
         tasks.push(viteTask);
         createOrEditViteConfig(host, {
@@ -143,6 +147,7 @@ async function applicationGeneratorInternal(host, schema) {
             project: options.projectName,
             inSourceTests: options.inSourceTests,
             skipFormat: true,
+            addPlugin: options.addPlugin,
         });
         tasks.push(vitestTask);
         createOrEditViteConfig(host, {

package/src/generators/application/files/nx-welcome/src/app/nx-welcome.tsx

@@ -795,6 +795,25 @@ export function NxWelcome({ title }: { title: string }) {
                 nx g @nx/react:component ui/src/lib/button
               </pre>
             </details>
+            <details>
+              <summary>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                  />
+                </svg>
+                View project details
+              </summary>
+              <pre>nx show project {title} --web</pre>
+            </details>
             <details>
               <summary>
                 <svg

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

@@ -68,6 +68,7 @@ async function addE2e(tree, options) {
                 webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx serve ${options.name}`,
                 webServerAddress: 'http://localhost:4200',
                 rootProject: options.rootProject,
+                addPlugin: options.addPlugin,
             });
         }
         case 'none':

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

@@ -12,7 +12,7 @@ function addProject(host, options) {
         tags: options.parsedTags,
     };
     if (options.bundler === 'webpack') {
-        if (!(0, has_webpack_plugin_1.hasWebpackPlugin)(host)) {
+        if (!(0, has_webpack_plugin_1.hasWebpackPlugin)(host) || !options.addPlugin) {
             project.targets = {
                 build: createBuildTarget(options),
                 serve: createServeTarget(options),

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

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

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

@@ -28,6 +28,7 @@ export interface Schema {
   rootProject?: boolean;
   bundler?: 'webpack' | 'vite' | 'rspack';
   minimal?: boolean;
+  addPlugin?: boolean;
 }
 
 export interface NormalizedSchema<T extends Schema = Schema> extends T {
@@ -40,4 +41,5 @@ export interface NormalizedSchema<T extends Schema = Schema> extends T {
   styledModule: null | SupportedStyles;
   hasStyles: boolean;
   unitTestRunner: 'jest' | 'vitest' | 'none';
+  addPlugin?: boolean;
 }

package/src/generators/cypress-component-configuration/cypress-component-configuration.d.ts

@@ -1,9 +1,10 @@
 import { Tree } from '@nx/devkit';
 import { CypressComponentConfigurationSchema } from './schema.d';
+export declare function cypressComponentConfigGenerator(tree: Tree, options: CypressComponentConfigurationSchema): Promise<import("@nx/devkit").GeneratorCallback>;
 /**
  * This is for using cypresses own Component testing, if you want to use test
  * storybook components then use componentCypressGenerator instead.
  *
  */
-export declare function cypressComponentConfigGenerator(tree: Tree, options: CypressComponentConfigurationSchema): Promise<import("@nx/devkit").GeneratorCallback>;
+export declare function cypressComponentConfigGeneratorInternal(tree: Tree, options: CypressComponentConfigurationSchema): Promise<import("@nx/devkit").GeneratorCallback>;
 export default cypressComponentConfigGenerator;

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

@@ -1,26 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cypressComponentConfigGenerator = void 0;
+exports.cypressComponentConfigGeneratorInternal = exports.cypressComponentConfigGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../utils/versions");
 const add_files_1 = require("./lib/add-files");
 const ct_utils_1 = require("../../utils/ct-utils");
+function cypressComponentConfigGenerator(tree, options) {
+    return cypressComponentConfigGeneratorInternal(tree, {
+        addPlugin: false,
+        ...options,
+    });
+}
+exports.cypressComponentConfigGenerator = cypressComponentConfigGenerator;
 /**
  * This is for using cypresses own Component testing, if you want to use test
  * storybook components then use componentCypressGenerator instead.
  *
  */
-async function cypressComponentConfigGenerator(tree, options) {
+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 projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
     const installTask = await baseCyCtConfig(tree, {
         project: options.project,
         skipFormat: true,
         jsx: true,
+        addPlugin: options.addPlugin,
     });
-    const found = await (0, ct_utils_1.addCTTargetWithBuildTarget)(tree, {
+    const found = await (0, ct_utils_1.configureCypressCT)(tree, {
         project: options.project,
         buildTarget: options.buildTarget,
+        bundler: options.bundler,
         validExecutorNames: new Set([
             '@nx/webpack:webpack',
             '@nx/vite:build',
@@ -34,5 +44,5 @@ async function cypressComponentConfigGenerator(tree, options) {
     }
     return installTask;
 }
-exports.cypressComponentConfigGenerator = cypressComponentConfigGenerator;
+exports.cypressComponentConfigGeneratorInternal = cypressComponentConfigGeneratorInternal;
 exports.default = cypressComponentConfigGenerator;

package/src/generators/cypress-component-configuration/lib/add-files.js

@@ -10,9 +10,7 @@ async function addFiles(tree, projectConfig, options, found) {
     // when importing react
     const { addMountDefinition, addDefaultCTConfig } = await Promise.resolve().then(() => require('@nx/cypress/src/utils/config'));
     // Specifically undefined to allow Remix workaround of passing an empty string
-    const actualBundler = options.buildTarget !== undefined && options.bundler
-        ? options.bundler
-        : await (0, ct_utils_1.getBundlerFromTarget)(found, tree);
+    const actualBundler = await (0, ct_utils_1.getActualBundler)(tree, options, found);
     if (options.bundler && options.bundler !== actualBundler) {
         devkit_1.logger.warn(`You have specified ${options.bundler} as the bundler but this project is configured to use ${actualBundler}.
       This may cause errors. If you are seeing errors, try removing the --bundler option.`);
@@ -21,9 +19,6 @@ async function addFiles(tree, projectConfig, options, found) {
     const commandFile = (0, devkit_1.joinPathFragments)(projectConfig.root, 'cypress', 'support', 'component.ts');
     const updatedCommandFile = await addMountDefinition(tree.read(commandFile, 'utf-8'));
     tree.write(commandFile, `import { mount } from 'cypress/react18';\n${updatedCommandFile}`);
-    const cyFile = (0, devkit_1.joinPathFragments)(projectConfig.root, 'cypress.config.ts');
-    const updatedCyConfig = await addDefaultCTConfig(tree.read(cyFile, 'utf-8'), { bundler: bundlerToUse });
-    tree.write(cyFile, `import { nxComponentTestingPreset } from '@nx/react/plugins/component-testing';\n${updatedCyConfig}`);
     if (options.bundler === 'webpack' ||
         (!options.bundler && actualBundler === 'webpack')) {
         (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { '@nx/webpack': versions_1.nxVersion });

package/src/generators/cypress-component-configuration/schema.d.ts

@@ -4,4 +4,5 @@ export interface CypressComponentConfigurationSchema {
   skipFormat?: boolean;
   buildTarget?: string;
   bundler?: 'webpack' | 'vite';
+  addPlugin?: boolean;
 }

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

@@ -1,10 +1,11 @@
 import { composePlugins, withNx } from '@nx/webpack';
 import { withReact } from '@nx/react';
 import { withModuleFederation } from '@nx/react/module-federation';
+import { ModuleFederationConfig } from '@nx/webpack';
 
 import baseConfig from './module-federation.config';
 
-const prodConfig = {
+const prodConfig: ModuleFederationConfig = {
     ...baseConfig,
     /*
      * Remote overrides for production.

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

@@ -1,10 +1,10 @@
-import {composePlugins, withNx} from '@nx/webpack';
+import {composePlugins, withNx, ModuleFederationConfig} from '@nx/webpack';
 import {withReact} from '@nx/react';
 import {withModuleFederation} from '@nx/react/module-federation';
 
 import baseConfig from './module-federation.config';
 
-const config = {
+const config: ModuleFederationConfig = {
     ...baseConfig,
 };
 

package/src/generators/host/host.js

@@ -25,6 +25,8 @@ async function hostGeneratorInternal(host, schema) {
         ...(await (0, normalize_options_1.normalizeOptions)(host, schema, '@nx/react:host')),
         typescriptConfiguration: schema.typescriptConfiguration ?? true,
         dynamic: schema.dynamic ?? false,
+        // TODO(colum): remove when MF works with Crystal
+        addPlugin: false,
     };
     const initTask = await (0, application_1.default)(host, {
         ...options,

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

@@ -26,10 +26,12 @@ export interface Schema {
   minimal?: boolean;
   typescriptConfiguration?: boolean;
   dynamic?: boolean;
+  addPlugin?: boolean;
 }
 
 export interface NormalizedSchema extends Schema {
   appProjectRoot: string;
   e2eProjectName: string;
   projectName: string;
+  addPlugin?: boolean;
 }

package/src/generators/library/lib/add-linting.js

@@ -18,6 +18,7 @@ async function addLinting(host, options) {
             skipFormat: true,
             skipPackageJson: options.skipPackageJson,
             setParserOptionsProject: options.setParserOptionsProject,
+            addPlugin: options.addPlugin,
         });
         if ((0, eslint_file_1.isEslintConfigSupported)(host)) {
             (0, eslint_file_1.addExtendsToLintConfig)(host, options.projectRoot, 'plugin:@nx/react');

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

@@ -13,6 +13,7 @@ async function normalizeOptions(host, options) {
         projectNameAndRootFormat: options.projectNameAndRootFormat,
         callingGenerator: '@nx/react:library',
     });
+    options.addPlugin ??= process.env.NX_ADD_PLUGINS !== 'false';
     const fileName = options.simpleName
         ? projectNames.projectSimpleName
         : projectNames.projectFileName;
@@ -50,7 +51,7 @@ async function normalizeOptions(host, options) {
             throw new Error(`appProject expected type of "application" but got "${appProjectConfig.projectType}"`);
         }
         normalized.appMain =
-            appProjectConfig.targets.build.options.main ??
+            appProjectConfig.targets.build?.options?.main ??
                 findMainEntry(host, appProjectConfig.root);
         normalized.appSourceRoot = (0, devkit_1.normalizePath)(appProjectConfig.sourceRoot);
         // TODO(jack): We should use appEntryFile instead of appProject so users can directly set it rather than us inferring it.

package/src/generators/library/library.js

@@ -20,6 +20,7 @@ const path_1 = require("path");
 const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-project-command");
 async function libraryGenerator(host, schema) {
     return await libraryGeneratorInternal(host, {
+        addPlugin: false,
         projectNameAndRootFormat: 'derived',
         ...schema,
     });
@@ -67,6 +68,7 @@ async function libraryGeneratorInternal(host, schema) {
             compiler: options.compiler,
             skipFormat: true,
             testEnvironment: 'jsdom',
+            addPlugin: options.addPlugin,
         });
         tasks.push(viteTask);
         createOrEditViteConfig(host, {
@@ -121,6 +123,7 @@ async function libraryGeneratorInternal(host, schema) {
             inSourceTests: options.inSourceTests,
             skipFormat: true,
             testEnvironment: 'jsdom',
+            addPlugin: options.addPlugin,
         });
         tasks.push(vitestTask);
         createOrEditViteConfig(host, {

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

@@ -29,6 +29,7 @@ export interface Schema {
   unitTestRunner?: 'jest' | 'vitest' | 'none';
   minimal?: boolean;
   simpleName?: boolean;
+  addPlugin?: boolean;
 }
 
 export interface NormalizedSchema extends Schema {

package/src/generators/remote/remote.js

@@ -47,6 +47,8 @@ async function remoteGeneratorInternal(host, schema) {
         ...(await (0, normalize_options_1.normalizeOptions)(host, schema, '@nx/react:remote')),
         typescriptConfiguration: schema.typescriptConfiguration ?? false,
         dynamic: schema.dynamic ?? false,
+        // TODO(colum): remove when MF works with Crystal
+        addPlugin: false,
     };
     const initAppTask = await (0, application_1.default)(host, {
         ...options,

package/src/generators/setup-ssr/setup-ssr.js

@@ -17,8 +17,22 @@ function readEntryFile(host, path) {
         source: tsModule.createSourceFile(path, content, tsModule.ScriptTarget.Latest, true),
     };
 }
+async function getProjectConfig(tree, projectName) {
+    let maybeProjectConfig = (0, devkit_1.readProjectConfiguration)(tree, projectName);
+    if (!maybeProjectConfig.targets?.build) {
+        let projectGraph;
+        try {
+            projectGraph = (0, devkit_1.readCachedProjectGraph)();
+        }
+        catch {
+            projectGraph = await (0, devkit_1.createProjectGraphAsync)();
+        }
+        maybeProjectConfig = projectGraph.nodes[projectName].data;
+    }
+    return maybeProjectConfig;
+}
 async function setupSsrGenerator(tree, options) {
-    const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
+    const projectConfig = await getProjectConfig(tree, options.project);
     const projectRoot = projectConfig.root;
     const appImportCandidates = [
         options.appComponentImportPath ?? 'app/app',
@@ -42,11 +56,15 @@ async function setupSsrGenerator(tree, options) {
     if (projectConfig.targets.server) {
         throw new Error(`Project ${options.project} already has a server target.`);
     }
-    const originalOutputPath = projectConfig.targets.build?.options?.outputPath;
+    const originalOutputPath = projectConfig.targets.build?.options?.outputPath ??
+        projectConfig.targets.build?.outputs[0];
     if (!originalOutputPath) {
         throw new Error(`Project ${options.project} does not contain a outputPath for the build target.`);
     }
-    projectConfig.targets.build.options.outputPath = (0, devkit_1.joinPathFragments)(originalOutputPath, 'browser');
+    // TODO(colum): We need to figure out how to handle this for Crystal
+    if (projectConfig.targets.build.options?.outputPath) {
+        projectConfig.targets.build.options.outputPath = (0, devkit_1.joinPathFragments)(originalOutputPath, 'browser');
+    }
     projectConfig.targets = {
         ...projectConfig.targets,
         server: {
@@ -136,7 +154,8 @@ async function setupSsrGenerator(tree, options) {
             ? `"${options.extraInclude.join('", "')}",`
             : '',
         appComponentImport: appComponentInfo.importPath,
-        browserBuildOutputPath: projectConfig.targets.build.options.outputPath,
+        browserBuildOutputPath: projectConfig.targets.build?.options?.outputPath ??
+            projectConfig.targets.build?.outputs[0],
     });
     // Add <StaticRouter> to server main if needed.
     // TODO: need to read main.server.tsx not main.tsx.

package/src/generators/stories/stories.js

@@ -11,11 +11,10 @@ const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescri
 const versions_1 = require("../../utils/versions");
 let tsModule;
 async function projectRootPath(tree, config) {
-    const { findStorybookAndBuildTargetsAndCompiler } = await Promise.resolve().then(() => require('@nx/storybook/src/utils/utilities'));
     let projectDir;
     if (config.projectType === 'application') {
-        const { nextBuildTarget } = findStorybookAndBuildTargetsAndCompiler(config.targets);
-        if (!!nextBuildTarget) {
+        const isNextJs = await isNextJsProject(tree, config);
+        if (isNextJs) {
             // Next.js apps
             projectDir = 'components';
         }
@@ -115,4 +114,17 @@ async function storiesGenerator(host, schema) {
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 exports.storiesGenerator = storiesGenerator;
+async function isNextJsProject(tree, config) {
+    const { findStorybookAndBuildTargetsAndCompiler } = await Promise.resolve().then(() => require('@nx/storybook/src/utils/utilities'));
+    const { nextBuildTarget } = findStorybookAndBuildTargetsAndCompiler(config.targets);
+    if (nextBuildTarget) {
+        return true;
+    }
+    for (const configFile of ['next.config.js', 'next.config.ts']) {
+        if (tree.exists((0, path_1.join)(config.root, configFile))) {
+            return true;
+        }
+    }
+    return false;
+}
 exports.default = storiesGenerator;

package/src/generators/storybook-configuration/configuration.d.ts

@@ -1,5 +1,6 @@
 import { StorybookConfigureSchema } from './schema';
 import { Tree } from '@nx/devkit';
 export declare function storybookConfigurationGenerator(host: Tree, schema: StorybookConfigureSchema): Promise<import("@nx/devkit").GeneratorCallback>;
+export declare function storybookConfigurationGeneratorInternal(host: Tree, schema: StorybookConfigureSchema): Promise<import("@nx/devkit").GeneratorCallback>;
 export default storybookConfigurationGenerator;
 export declare function findWebpackConfig(tree: Tree, projectRoot: string): string | undefined;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.findWebpackConfig = exports.storybookConfigurationGenerator = void 0;
+exports.findWebpackConfig = exports.storybookConfigurationGeneratorInternal = exports.storybookConfigurationGenerator = void 0;
 const stories_1 = require("../stories/stories");
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../utils/versions");
@@ -20,13 +20,22 @@ async function generateStories(host, schema) {
         interactionTests: schema.interactionTests ?? true,
     });
 }
-async function storybookConfigurationGenerator(host, schema) {
+function storybookConfigurationGenerator(host, schema) {
+    return storybookConfigurationGeneratorInternal(host, {
+        addPlugin: false,
+        ...schema,
+    });
+}
+exports.storybookConfigurationGenerator = storybookConfigurationGenerator;
+async function storybookConfigurationGeneratorInternal(host, schema) {
+    schema.addPlugin ??= process.env.NX_ADD_PLUGINS !== 'false';
     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);
     if (findWebpackConfig(host, projectConfig.root) ||
         projectConfig.targets['build']?.executor === '@nx/rollup:rollup' ||
-        projectConfig.targets['build']?.executor === '@nrwl/rollup:rollup') {
+        projectConfig.targets['build']?.executor === '@nrwl/rollup:rollup' ||
+        projectConfig.targets['build']?.executor === '@nx/expo:build') {
         uiFramework = '@storybook/react-webpack5';
     }
     const installTask = await configurationGenerator(host, {
@@ -40,6 +49,7 @@ async function storybookConfigurationGenerator(host, schema) {
         configureStaticServe: schema.configureStaticServe,
         uiFramework: uiFramework, // cannot import UiFramework type dynamically
         skipFormat: true,
+        addPlugin: schema.addPlugin,
     });
     if (schema.generateStories) {
         await generateStories(host, schema);
@@ -47,7 +57,7 @@ async function storybookConfigurationGenerator(host, schema) {
     await (0, devkit_1.formatFiles)(host);
     return installTask;
 }
-exports.storybookConfigurationGenerator = storybookConfigurationGenerator;
+exports.storybookConfigurationGeneratorInternal = storybookConfigurationGeneratorInternal;
 exports.default = storybookConfigurationGenerator;
 function findWebpackConfig(tree, projectRoot) {
     const allowsExt = ['js', 'mjs', 'ts', 'cjs', 'mts', 'cts'];

package/src/generators/storybook-configuration/schema.d.ts

@@ -12,4 +12,5 @@ export interface StorybookConfigureSchema {
   configureCypress?: boolean;
   generateCypressSpecs?: boolean;
   cypressDirectory?: string;
+  addPlugin?: boolean;
 }

package/src/migrations/update-18-0-0/add-mf-env-var-to-target-defaults.js

@@ -13,7 +13,7 @@ exports.default = default_1;
 function hasModuleFederationProject(tree) {
     const projects = (0, devkit_1.getProjects)(tree);
     for (const project of projects.values()) {
-        const targets = project.targets;
+        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')) ||

package/src/module-federation/with-module-federation-ssr.js

@@ -3,6 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.withModuleFederationForSSR = void 0;
 const utils_1 = require("./utils");
 async function withModuleFederationForSSR(options) {
+    if (global.NX_GRAPH_CREATION) {
+        return (config) => config;
+    }
     const { sharedLibraries, sharedDependencies, mappedRemotes } = await (0, utils_1.getModuleFederationConfig)(options, {
         isServer: true,
     });

package/src/module-federation/with-module-federation.js

@@ -9,6 +9,9 @@ const isVarOrWindow = (libType) => libType === 'var' || libType === 'window';
  * @return {Promise<AsyncNxComposableWebpackPlugin>}
  */
 async function withModuleFederation(options) {
+    if (global.NX_GRAPH_CREATION) {
+        return (config) => config;
+    }
     const { sharedDependencies, sharedLibraries, mappedRemotes } = await (0, utils_1.getModuleFederationConfig)(options);
     const isGlobal = isVarOrWindow(options.library?.type);
     return (config, ctx) => {

package/src/utils/ct-utils.d.ts

@@ -1,9 +1,14 @@
 import { Tree } from '@nx/devkit';
 import { type FoundTarget } from '@nx/cypress/src/utils/find-target-options';
-export declare function addCTTargetWithBuildTarget(tree: Tree, options: {
+export declare function configureCypressCT(tree: Tree, options: {
     project: string;
     buildTarget: string;
+    bundler: 'vite' | 'webpack';
     validExecutorNames: Set<string>;
 }): Promise<FoundTarget>;
 export declare function getBundlerFromTarget(found: FoundTarget, tree: Tree): Promise<'vite' | 'webpack'>;
+export declare function getActualBundler(tree: Tree, options: {
+    buildTarget?: string;
+    bundler?: 'vite' | 'webpack';
+}, found: FoundTarget): Promise<"vite" | "webpack">;
 export declare function isComponent(tree: Tree, filePath: string): boolean;

package/src/utils/ct-utils.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isComponent = exports.getBundlerFromTarget = exports.addCTTargetWithBuildTarget = void 0;
+exports.isComponent = exports.getActualBundler = exports.getBundlerFromTarget = exports.configureCypressCT = void 0;
 const devkit_1 = require("@nx/devkit");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
 const ast_utils_1 = require("./ast-utils");
 let tsModule;
 const allowedFileExt = new RegExp(/\.[jt]sx?/);
 const isSpecFile = new RegExp(/(spec|test)\./);
-async function addCTTargetWithBuildTarget(tree, options) {
+async function configureCypressCT(tree, options) {
     let found = { target: options.buildTarget, config: undefined };
     // Specifically undefined as a workaround for Remix to pass an empty string as the buildTarget
     if (options.buildTarget === undefined) {
@@ -19,16 +19,29 @@ async function addCTTargetWithBuildTarget(tree, options) {
         });
         assertValidConfig(found?.config);
     }
-    const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
-    projectConfig.targets['component-test'].options = {
-        ...projectConfig.targets['component-test'].options,
-        devServerTarget: found.target,
-        skipServe: true,
+    const { addDefaultCTConfig, getProjectCypressConfigPath } = await Promise.resolve().then(() => require('@nx/cypress/src/utils/config'));
+    const ctConfigOptions = {
+        bundler: options.bundler ?? (await getActualBundler(tree, options, found)),
     };
-    (0, devkit_1.updateProjectConfiguration)(tree, options.project, projectConfig);
+    const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
+    if (projectConfig.targets?.['component-test']?.executor ===
+        '@nx/cypress:cypress') {
+        projectConfig.targets['component-test'].options = {
+            ...projectConfig.targets['component-test'].options,
+            devServerTarget: found.target,
+            skipServe: true,
+        };
+        (0, devkit_1.updateProjectConfiguration)(tree, options.project, projectConfig);
+    }
+    else {
+        ctConfigOptions.buildTarget = found.target;
+    }
+    const cypressConfigFilePath = getProjectCypressConfigPath(tree, projectConfig.root);
+    const updatedCyConfig = await addDefaultCTConfig(tree.read(cypressConfigFilePath, 'utf-8'), ctConfigOptions);
+    tree.write(cypressConfigFilePath, `import { nxComponentTestingPreset } from '@nx/react/plugins/component-testing';\n${updatedCyConfig}`);
     return found;
 }
-exports.addCTTargetWithBuildTarget = addCTTargetWithBuildTarget;
+exports.configureCypressCT = configureCypressCT;
 function assertValidConfig(config) {
     if (!config) {
         throw new Error('Unable to find a valid build configuration. Try passing in a target for an app. --build-target=<project>:<target>[:<configuration>]');
@@ -49,6 +62,14 @@ async function getBundlerFromTarget(found, tree) {
         : 'webpack';
 }
 exports.getBundlerFromTarget = getBundlerFromTarget;
+async function getActualBundler(tree, options, found) {
+    // Specifically undefined to allow Remix workaround of passing an empty string
+    const actualBundler = options.buildTarget !== undefined && options.bundler
+        ? options.bundler
+        : await getBundlerFromTarget(found, tree);
+    return actualBundler;
+}
+exports.getActualBundler = getActualBundler;
 function isComponent(tree, filePath) {
     if (!tsModule) {
         tsModule = (0, ensure_typescript_1.ensureTypescript)();