@nx/react 17.0.3 → 17.0.4

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

@@ -0,0 +1,33 @@
+<% if (classComponent) { %>
+import { Component } from 'react';
+<% } if (!minimal) { %>
+import NxWelcome from "./nx-welcome";
+<% } %>
+
+<% if (classComponent) { %>
+export class App extends Component {
+  render() {
+<% } else { %>
+export function App() {
+<% } %>
+  return (
+  <div>
+    <% if (!minimal) { %>
+    <NxWelcome title="<%= projectName %>"/>
+     <% } else { %>
+      <h1>
+        <span> Hello there, </span>
+        Welcome <%= projectName %> 👋
+      </h1>
+     <% } %>
+  </div>);
+<% if (classComponent) { %>
+  }
+}
+<% } else { %>
+}
+<% } %>
+
+export default App;
+
+<% if (inSourceTests === true) { %> <%- inSourceVitestTests %> <% } %>

package/src/generators/application/files/style-tailwind/src/styles.css

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

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

@@ -4,13 +4,20 @@ exports.addE2e = void 0;
 const devkit_1 = require("@nx/devkit");
 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");
 async function addE2e(tree, options) {
     switch (options.e2eTestRunner) {
         case 'cypress': {
-            (0, web_1.webStaticServeGenerator)(tree, {
-                buildTarget: `${options.projectName}:build`,
-                targetName: 'serve-static',
-            });
+            const hasNxBuildPlugin = (options.bundler === 'webpack' && (0, has_webpack_plugin_1.hasWebpackPlugin)(tree)) ||
+                (options.bundler === 'vite' && (0, has_vite_plugin_1.hasVitePlugin)(tree));
+            if (!hasNxBuildPlugin) {
+                await (0, web_1.webStaticServeGenerator)(tree, {
+                    buildTarget: `${options.projectName}:build`,
+                    targetName: 'serve-static',
+                    spa: true,
+                });
+            }
             const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
             (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
                 projectType: 'application',
@@ -27,9 +34,19 @@ 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`,
+                devServerTarget: `${options.projectName}:${options.e2eWebServerTarget}`,
+                baseUrl: options.e2eWebServerAddress,
                 jsx: true,
                 rootProject: options.rootProject,
+                webServerCommands: hasNxBuildPlugin
+                    ? {
+                        default: `nx run ${options.projectName}:${options.e2eWebServerTarget}`,
+                        production: `nx run ${options.projectName}:preview`,
+                    }
+                    : undefined,
+                ciWebServerCommand: hasNxBuildPlugin
+                    ? `nx run ${options.projectName}:serve-static`
+                    : undefined,
             });
         }
         case 'playwright': {
@@ -49,9 +66,10 @@ 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:4200',
+                webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx ${options.e2eWebServerTarget} ${options.name}`,
+                webServerAddress: options.e2eWebServerAddress,
                 rootProject: options.rootProject,
+                addPlugin: options.addPlugin,
             });
         }
         case 'none':

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

@@ -4,10 +4,10 @@ exports.addJest = void 0;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../../utils/versions");
 async function addJest(host, options) {
-    const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/jest', versions_1.nxVersion);
-    if (options.unitTestRunner !== 'jest') {
+    if (options.unitTestRunner === 'none') {
         return () => { };
     }
+    const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/jest', versions_1.nxVersion);
     return await configurationGenerator(host, {
         ...options,
         project: options.projectName,

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

@@ -1,3 +1,3 @@
 import { NormalizedSchema } from '../schema';
-export declare function addProject(host: any, options: NormalizedSchema): void;
-export declare function maybeJs(options: NormalizedSchema, path: string): string;
+import { Tree } from '@nx/devkit';
+export declare function addProject(host: Tree, options: NormalizedSchema): void;

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

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.maybeJs = exports.addProject = void 0;
+exports.addProject = void 0;
 const devkit_1 = require("@nx/devkit");
+const has_webpack_plugin_1 = require("../../../utils/has-webpack-plugin");
+const maybe_js_1 = require("../../../utils/maybe-js");
 function addProject(host, options) {
     const project = {
         root: options.appProjectRoot,
@@ -11,22 +13,18 @@ function addProject(host, options) {
         tags: options.parsedTags,
     };
     if (options.bundler === 'webpack') {
-        project.targets = {
-            build: createBuildTarget(options),
-            serve: createServeTarget(options),
-        };
+        if (!(0, has_webpack_plugin_1.hasWebpackPlugin)(host) || !options.addPlugin) {
+            project.targets = {
+                build: createBuildTarget(options),
+                serve: createServeTarget(options),
+            };
+        }
     }
     (0, devkit_1.addProjectConfiguration)(host, options.projectName, {
         ...project,
     });
 }
 exports.addProject = addProject;
-function maybeJs(options, path) {
-    return options.js && (path.endsWith('.ts') || path.endsWith('.tsx'))
-        ? path.replace(/\.tsx?$/, '.js')
-        : path;
-}
-exports.maybeJs = maybeJs;
 function createBuildTarget(options) {
     return {
         executor: '@nx/webpack:webpack',
@@ -39,7 +37,7 @@ function createBuildTarget(options) {
                 : options.projectName),
             index: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/index.html'),
             baseHref: '/',
-            main: (0, devkit_1.joinPathFragments)(options.appProjectRoot, maybeJs(options, `src/main.tsx`)),
+            main: (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, `src/main.tsx`)),
             tsConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'tsconfig.app.json'),
             assets: [
                 (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/favicon.ico'),
@@ -51,7 +49,6 @@ function createBuildTarget(options) {
                     (0, devkit_1.joinPathFragments)(options.appProjectRoot, `src/styles.${options.style}`),
                 ],
             scripts: [],
-            isolatedConfig: true,
             webpackConfig: (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'webpack.config.js'),
         },
         configurations: {
@@ -64,8 +61,8 @@ function createBuildTarget(options) {
             production: {
                 fileReplacements: [
                     {
-                        replace: (0, devkit_1.joinPathFragments)(options.appProjectRoot, maybeJs(options, `src/environments/environment.ts`)),
-                        with: (0, devkit_1.joinPathFragments)(options.appProjectRoot, maybeJs(options, `src/environments/environment.prod.ts`)),
+                        replace: (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, `src/environments/environment.ts`)),
+                        with: (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, `src/environments/environment.prod.ts`)),
                     },
                 ],
                 optimization: true,

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

@@ -1,3 +1,3 @@
-import { NormalizedSchema } from '../schema';
 import { Tree } from '@nx/devkit';
+import { NormalizedSchema } from '../schema';
 export declare function addRouting(host: Tree, options: NormalizedSchema): import("@nx/devkit").GeneratorCallback;

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

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addRouting = void 0;
-const ast_utils_1 = require("../../../utils/ast-utils");
-const versions_1 = require("../../../utils/versions");
 const devkit_1 = require("@nx/devkit");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+const ast_utils_1 = require("../../../utils/ast-utils");
+const versions_1 = require("../../../utils/versions");
+const maybe_js_1 = require("../../../utils/maybe-js");
 let tsModule;
 function addRouting(host, options) {
     if (!options.routing) {
@@ -13,7 +14,7 @@ function addRouting(host, options) {
     if (!tsModule) {
         tsModule = (0, ensure_typescript_1.ensureTypescript)();
     }
-    const appPath = (0, devkit_1.joinPathFragments)(options.appProjectRoot, maybeJs(options, `src/app/${options.fileName}.tsx`));
+    const appPath = (0, devkit_1.joinPathFragments)(options.appProjectRoot, (0, maybe_js_1.maybeJs)(options, `src/app/${options.fileName}.tsx`));
     const appFileContent = host.read(appPath, 'utf-8');
     const appSource = tsModule.createSourceFile(appPath, appFileContent, tsModule.ScriptTarget.Latest, true);
     const changes = (0, devkit_1.applyChangesToString)(appFileContent, (0, ast_utils_1.addInitialRoutes)(appPath, appSource));
@@ -24,8 +25,3 @@ function addRouting(host, options) {
     return () => { };
 }
 exports.addRouting = addRouting;
-function maybeJs(options, path) {
-    return options.js && (path.endsWith('.ts') || path.endsWith('.tsx'))
-        ? path.replace(/\.tsx?$/, '.js')
-        : path;
-}

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

@@ -6,6 +6,8 @@ const js_1 = require("@nx/js");
 const path_1 = require("path");
 const create_ts_config_1 = require("../../../utils/create-ts-config");
 const get_in_source_vitest_tests_template_1 = require("../../../utils/get-in-source-vitest-tests-template");
+const maybe_js_1 = require("../../../utils/maybe-js");
+const has_webpack_plugin_1 = require("../../../utils/has-webpack-plugin");
 const get_app_tests_1 = require("./get-app-tests");
 function createApplicationFiles(host, options) {
     let styleSolutionSpecificAppFiles;
@@ -15,6 +17,9 @@ function createApplicationFiles(host, options) {
     else if (options.style === 'styled-jsx') {
         styleSolutionSpecificAppFiles = '../files/style-styled-jsx';
     }
+    else if (options.style === 'tailwind') {
+        styleSolutionSpecificAppFiles = '../files/style-tailwind';
+    }
     else if (options.style === 'none') {
         styleSolutionSpecificAppFiles = '../files/style-none';
     }
@@ -38,7 +43,12 @@ function createApplicationFiles(host, options) {
         (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-vite'), options.appProjectRoot, templateVariables);
     }
     else if (options.bundler === 'webpack') {
-        (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-webpack'), options.appProjectRoot, templateVariables);
+        (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, '../files/base-webpack'), options.appProjectRoot, {
+            ...templateVariables,
+            webpackPluginOptions: (0, has_webpack_plugin_1.hasWebpackPlugin)(host)
+                ? createNxWebpackPluginOptions(options)
+                : null,
+        });
         if (options.compiler === 'babel') {
             (0, devkit_1.writeJson)(host, `${options.appProjectRoot}/.babelrc`, {
                 presets: [
@@ -112,3 +122,22 @@ function createApplicationFiles(host, options) {
     (0, create_ts_config_1.createTsConfig)(host, options.appProjectRoot, 'app', options, relativePathToRootTsConfig);
 }
 exports.createApplicationFiles = createApplicationFiles;
+function createNxWebpackPluginOptions(options) {
+    return {
+        target: 'web',
+        compiler: options.compiler ?? 'babel',
+        outputPath: (0, devkit_1.joinPathFragments)('dist', options.appProjectRoot != '.'
+            ? options.appProjectRoot
+            : options.projectName),
+        index: './src/index.html',
+        baseHref: '/',
+        main: (0, maybe_js_1.maybeJs)(options, `./src/main.tsx`),
+        tsConfig: './tsconfig.app.json',
+        assets: ['./src/favicon.ico', './src/assets'],
+        styles: options.styledModule || !options.hasStyles
+            ? []
+            : [
+                `./src/styles.${options.style !== 'tailwind' ? options.style : 'css'}`,
+            ],
+    };
+}

package/src/generators/application/lib/install-common-dependencies.js

@@ -4,7 +4,18 @@ exports.installCommonDependencies = void 0;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../../utils/versions");
 function installCommonDependencies(host, options) {
-    const devDependencies = {};
+    if (options.skipPackageJson) {
+        return () => { };
+    }
+    const dependencies = {};
+    const devDependencies = {
+        '@types/node': versions_1.typesNodeVersion,
+        '@types/react': versions_1.typesReactVersion,
+        '@types/react-dom': versions_1.typesReactDomVersion,
+    };
+    if (options.bundler !== 'vite') {
+        dependencies['tslib'] = versions_1.tsLibVersion;
+    }
     // Vite requires style preprocessors to be installed manually.
     // `@nx/webpack` installs them automatically for now.
     if (options.bundler === 'vite' || options.unitTestRunner === 'vitest') {
@@ -28,6 +39,9 @@ function installCommonDependencies(host, options) {
             devDependencies['@babel/core'] = versions_1.babelCoreVersion;
         }
     }
+    if (options.unitTestRunner && options.unitTestRunner !== 'none') {
+        devDependencies['@testing-library/react'] = versions_1.testingLibraryReactVersion;
+    }
     return (0, devkit_1.addDependenciesToPackageJson)(host, {}, devDependencies);
 }
 exports.installCommonDependencies = installCommonDependencies;

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

@@ -26,15 +26,46 @@ async function normalizeOptions(host, options, callingGenerator = '@nx/react:app
         rootProject: options.rootProject,
         callingGenerator,
     });
+    const nxJson = (0, devkit_1.readNxJson)(host);
+    const addPlugin = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
+    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())
         : [];
     const fileName = options.pascalCaseFiles ? 'App' : 'app';
-    const styledModule = /^(css|scss|less|none)$/.test(options.style)
+    const styledModule = /^(css|scss|less|tailwind|none)$/.test(options.style)
         ? null
         : options.style;
     (0, assertion_1.assertValidStyle)(options.style);
@@ -48,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/lib/set-defaults.js

@@ -14,6 +14,7 @@ function setDefaults(host, options) {
     nxJson.generators['@nx/react'] = nxJson.generators['@nx/react'] || {};
     const prev = { ...nxJson.generators['@nx/react'] };
     const appDefaults = {
+        babel: true,
         style: options.style,
         linter: options.linter,
         bundler: options.bundler,

package/src/generators/application/lib/update-jest-config.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateSpecConfig = void 0;
+const maybe_js_1 = require("../../../utils/maybe-js");
 const jest_utils_1 = require("../../../utils/jest-utils");
 const devkit_1 = require("@nx/devkit");
 function updateSpecConfig(host, options) {
@@ -8,21 +9,20 @@ function updateSpecConfig(host, options) {
         return;
     }
     (0, devkit_1.updateJson)(host, `${options.appProjectRoot}/tsconfig.spec.json`, (json) => {
-        json.types = json.types || [];
+        const compilerOptions = json.compilerOptions ?? {};
+        const types = compilerOptions.types ?? [];
         if (options.style === 'styled-jsx') {
-            json.types.push('@nx/react/typings/styled-jsx.d.ts');
+            types.push('@nx/react/typings/styled-jsx.d.ts');
         }
-        json.types = [
-            ...json.types,
-            '@nx/react/typings/cssmodule.d.ts',
-            '@nx/react/typings/image.d.ts',
-        ];
+        types.push('@nx/react/typings/cssmodule.d.ts', '@nx/react/typings/image.d.ts');
+        compilerOptions.types = types;
+        json.compilerOptions = compilerOptions;
         return json;
     });
     if (options.unitTestRunner !== 'jest') {
         return;
     }
-    const configPath = `${options.appProjectRoot}/jest.config.${options.js ? 'js' : 'ts'}`;
+    const configPath = (0, maybe_js_1.maybeJs)(options, `${options.appProjectRoot}/jest.config.ts`);
     const originalContent = host.read(configPath, 'utf-8');
     const content = (0, jest_utils_1.updateJestConfigContent)(originalContent);
     host.write(configPath, content);

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 {
@@ -35,9 +36,13 @@ 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;
   hasStyles: boolean;
   unitTestRunner: 'jest' | 'vitest' | 'none';
+  addPlugin?: boolean;
 }

package/src/generators/application/schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "cli": "nx",
   "$id": "NxReactApp",
   "title": "Create a React Application",
@@ -56,11 +56,15 @@
           },
           {
             "value": "scss",
-            "label": "SASS(.scss)       [ http://sass-lang.com                     ]"
+            "label": "SASS(.scss)       [ https://sass-lang.com                     ]"
           },
           {
             "value": "less",
-            "label": "LESS              [ http://lesscss.org                       ]"
+            "label": "LESS              [ https://lesscss.org                       ]"
+          },
+          {
+            "value": "tailwind",
+            "label": "tailwind [ https://tailwindcss.com/            ]"
           },
           {
             "value": "styled-components",

package/src/generators/component/files/__fileName__.tsx__tmpl__

@@ -32,13 +32,30 @@ const Styled<%= className %> = styled.div`
   color: pink;
 `;
 <% }%>
-<% if (classComponent) { %>
-export class <%= className %> extends Component<<%= className %>Props> {
-  override render() {
+<% if(!isNextPage) { %>
+  <% if (classComponent) { %>
+  export class <%= className %> extends Component<<%= className %>Props> {
+    override render() {
+      return (
+        <<%= wrapper %><%- extras %>>
+          <%= styledModule === 'styled-jsx' ? `<style jsx>{\`div { color: pink; }\`}</style>` : `` %>
+          <p>Welcome to <%= className %>!</p>
+          <% if (routing) { %>
+            <ul>
+              <li><Link to="/"><%= name %> root</Link></li>
+            </ul>
+            <Route path="/" element={<div>This is the <%= name %> root route.</div>} />
+          <% } %>
+        </<%= wrapper %>>
+      );
+    }
+  }
+  <% } else { %>
+  export function <%= className %>(props: <%= className %>Props) {
     return (
       <<%= wrapper %><%- extras %>>
-        <%= styledModule === 'styled-jsx' ? `<style jsx>{\`div { color: pink; }\`}</style>` : `` %>
-        <p>Welcome to <%= className %>!</p>
+        <% if (styledModule === 'styled-jsx') { %><style jsx>{`div { color: pink; }`}</style><% } %>
+        <h1>Welcome to <%= className %>!</h1>
         <% if (routing) { %>
           <ul>
             <li><Link to="/"><%= name %> root</Link></li>
@@ -48,24 +65,24 @@ export class <%= className %> extends Component<<%= className %>Props> {
       </<%= wrapper %>>
     );
   }
-}
+  <% } %>
+
+  export default <%= className %>;
 <% } else { %>
-export function <%= className %>(props: <%= className %>Props) {
-  return (
-    <<%= wrapper %><%- extras %>>
-      <% if (styledModule === 'styled-jsx') { %><style jsx>{`div { color: pink; }`}</style><% } %>
-      <h1>Welcome to <%= className %>!</h1>
-      <% if (routing) { %>
-        <ul>
-          <li><Link to="/"><%= name %> root</Link></li>
-        </ul>
-        <Route path="/" element={<div>This is the <%= name %> root route.</div>} />
-      <% } %>
-    </<%= wrapper %>>
-  );
-};
+  export default function <%= className %>(props: <%= className %>Props) {
+    return (
+      <<%= wrapper %><%- extras %>>
+        <% if (styledModule === 'styled-jsx') { %><style jsx>{`div { color: pink; }`}</style><% } %>
+        <h1>Welcome to <%= className %>!</h1>
+        <% if (routing) { %>
+          <ul>
+            <li><Link to="/"><%= name %> root</Link></li>
+          </ul>
+          <Route path="/" element={<div>This is the <%= name %> root route.</div>} />
+        <% } %>
+      </<%= wrapper %>>
+    );
+  };
 <% } %>
 
-export default <%= className %>;
-
 <% if (inSourceTests === true) { %> <%- inSourceVitestTests %> <% } %>

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

@@ -22,7 +22,7 @@ async function normalizeOptions(tree, options) {
     });
     const project = (0, devkit_1.readProjectConfiguration)(tree, projectName);
     const { className } = (0, devkit_1.names)(name);
-    const { sourceRoot: projectSourceRoot, projectType } = project;
+    const { sourceRoot: projectSourceRoot, root: projectRoot, projectType, } = project;
     const styledModule = /^(css|scss|less|none)$/.test(options.style)
         ? null
         : options.style;
@@ -33,6 +33,8 @@ async function normalizeOptions(tree, options) {
     options.routing = options.routing ?? false;
     options.globalCss = options.globalCss ?? false;
     options.inSourceTests = options.inSourceTests ?? false;
+    //TODO (nicholas): Remove when Next page generator is removed
+    options.isNextPage = options.isNextPage ?? false;
     return {
         ...options,
         projectName,
@@ -42,7 +44,7 @@ async function normalizeOptions(tree, options) {
         className,
         fileName,
         filePath,
-        projectSourceRoot,
+        projectSourceRoot: projectSourceRoot ?? projectRoot,
     };
 }
 exports.normalizeOptions = normalizeOptions;

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

@@ -3,7 +3,7 @@ import { SupportedStyles } from '../../../typings/style';
 export interface Schema {
   name: string;
   /**
-   * @deprecated Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18.
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v19.
    */
   project?: string;
   style: SupportedStyles;
@@ -11,18 +11,18 @@ export interface Schema {
   directory?: string;
   export?: boolean;
   /**
-   * @deprecated Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18.
+   * @deprecated Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19.
    */
   pascalCaseFiles?: boolean;
   /**
-   * @deprecated Provide the `directory` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18.
+   * @deprecated Provide the `directory` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19.
    */
   pascalCaseDirectory?: boolean;
   classComponent?: boolean;
   routing?: boolean;
   js?: boolean;
   /**
-   * @deprecated Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v18.
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v19.
    */
   flat?: boolean;
   globalCss?: boolean;
@@ -33,6 +33,8 @@ export interface Schema {
   // Used by other wrapping generators to preserve previous behavior
   // e.g. @nx/next:component
   derivedDirectory?: string;
+  // Used by Next.js to determine how React should generate the page
+  isNextPage?: boolean;
 }
 
 export interface NormalizedSchema extends Schema {