@aws/nx-plugin 1.0.0-rc.46 → 1.0.0-rc.48

package/src/ts/react-website/app/__snapshots__/generator.spec.ts.snap

@@ -52,7 +52,7 @@ export default defineConfig(() => ({
       provider: 'v8' as const,
     },
   },
-  resolve: { tsconfigPaths: true },
+  resolve: { tsconfigPaths: true, dedupe: ['react', 'react-dom'] },
   define: { global: {} },
 }));
 "
@@ -108,7 +108,7 @@ export default defineConfig(() => ({
       provider: 'v8' as const,
     },
   },
-  resolve: { tsconfigPaths: true },
+  resolve: { tsconfigPaths: true, dedupe: ['react', 'react-dom'] },
   define: { global: {} },
 }));
 "
@@ -973,6 +973,9 @@ exports[`react-website generator > Tanstack router integration > should generate
     "formatter": {
       "quoteStyle": "single",
       "trailingCommas": "all"
+    },
+    "resolver": {
+      "experimentalPnpmCatalogs": true
     }
   },
   "css": {
@@ -988,7 +991,7 @@ exports[`react-website generator > Tanstack router integration > should generate
     "rules": {
       "preset": "none",
       "correctness": {
-        "noUndeclaredDependencies": "warn"
+        "noUndeclaredDependencies": "error"
       }
     }
   },
@@ -1007,12 +1010,29 @@ exports[`react-website generator > Tanstack router integration > should generate
       "!**/node_modules",
       "!**/.nx",
       "!**/.venv",
+      "!**/.grit",
       "!**/*.css",
       "!**/*.gen.*",
       "!**/generated/**",
       "!**/tsconfig*.json"
     ]
-  }
+  },
+  "overrides": [
+    {
+      "includes": [
+        "**/*.config.{ts,mts,cts,js,mjs,cjs}",
+        "**/*.{spec,test}.{ts,tsx,mts,cts,js,jsx,mjs,cjs}",
+        "**/*.stories.{ts,tsx}"
+      ],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "noUndeclaredDependencies": "off"
+          }
+        }
+      }
+    }
+  ]
 }
 "
 `;
@@ -1118,39 +1138,35 @@ exports[`react-website generator > Tanstack router integration > should generate
 exports[`react-website generator > Tanstack router integration > should generate website with no router correctly > package.json 1`] = `
 "{
   "name": "@proj/source",
-  "dependencies": {
-    "@cloudscape-design/board-components": "3.0.205",
-    "@cloudscape-design/components": "3.0.1330",
-    "@cloudscape-design/global-styles": "1.0.62",
-    "aws-cdk-lib": "2.261.0",
-    "constructs": "10.7.0",
-    "react": "19.2.7",
-    "react-dom": "19.2.7",
-    "tailwindcss": "4.3.3"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@nx/js": "23.1.0",
-    "@nx/react": "23.1.0",
+    "@nx/react": "catalog:",
     "@nx/vite": "23.1.0",
     "@nx/vitest": "23.1.0",
     "@nx/web": "23.1.0",
     "@swc/helpers": "~0.5.18",
-    "@tailwindcss/vite": "4.3.3",
+    "@tailwindcss/vite": "catalog:",
     "@testing-library/dom": "10.4.0",
     "@testing-library/react": "16.3.0",
-    "@types/node": "26.1.1",
+    "@types/node": "catalog:",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^6.0.0",
-    "@vitest/coverage-v8": "4.1.10",
-    "@vitest/ui": "4.1.10",
+    "@vitest/coverage-v8": "catalog:",
+    "@vitest/ui": "catalog:",
     "jiti": "2.4.2",
     "jsdom": "^27.1.0",
     "typescript": "~6.0.3",
-    "vite": "8.1.5",
-    "vitest": "4.1.10"
+    "vite": "catalog:",
+    "vitest": "catalog:"
   },
-  "type": "module"
+  "type": "module",
+  "workspaces": [
+    "packages/*",
+    "test-app",
+    "packages/common/constructs"
+  ]
 }
 "
 `;
@@ -1192,6 +1208,24 @@ You can also automatiaclly fix some lint errors by running the following command
 "
 `;
 
+exports[`react-website generator > Tanstack router integration > should generate website with no router correctly > packages/common/constructs/package.json 1`] = `
+"{
+  "name": "@proj/common-constructs",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "aws-cdk-lib": "catalog:",
+    "constructs": "catalog:",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:"
+  }
+}
+"
+`;
+
 exports[`react-website generator > Tanstack router integration > should generate website with no router correctly > packages/common/constructs/project.json 1`] = `
 "{
   "name": "@proj/common-constructs",
@@ -2114,9 +2148,25 @@ export default defineConfig(() => ({
 
 exports[`react-website generator > Tanstack router integration > should generate website with no router correctly > pnpm-workspace.yaml 1`] = `
 "packages:
-  - "packages/*"
-  - "test-app"
-  - "packages/common/*"
+  - packages/*
+  - test-app
+  - packages/common/*
+catalog:
+  vite: 8.1.5
+  vitest: 4.1.10
+  '@vitest/coverage-v8': 4.1.10
+  constructs: 10.7.0
+  aws-cdk-lib: 2.261.0
+  '@types/node': 26.1.1
+  react: 19.2.7
+  react-dom: 19.2.7
+  '@cloudscape-design/components': 3.0.1330
+  '@cloudscape-design/board-components': 3.0.205
+  '@cloudscape-design/global-styles': 1.0.62
+  tailwindcss: 4.3.3
+  '@nx/react': 23.1.0
+  '@vitest/ui': 4.1.10
+  '@tailwindcss/vite': 4.3.3
 "
 `;
 
@@ -2190,6 +2240,25 @@ exports[`react-website generator > Tanstack router integration > should generate
 "
 `;
 
+exports[`react-website generator > Tanstack router integration > should generate website with no router correctly > test-app/package.json 1`] = `
+"{
+  "name": "@proj/test-app",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@cloudscape-design/board-components": "catalog:",
+    "@cloudscape-design/components": "catalog:",
+    "@cloudscape-design/global-styles": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "tailwindcss": "catalog:"
+  },
+  "devDependencies": {}
+}
+"
+`;
+
 exports[`react-website generator > Tanstack router integration > should generate website with no router correctly > test-app/project.json 1`] = `
 "{
   "name": "@proj/test-app",
@@ -2616,7 +2685,7 @@ export default defineConfig(() => ({
       provider: 'v8' as const,
     },
   },
-  resolve: { tsconfigPaths: true },
+  resolve: { tsconfigPaths: true, dedupe: ['react', 'react-dom'] },
   define: { global: {} },
 }));
 "
@@ -2626,10 +2695,10 @@ exports[`react-website generator > Tanstack router integration > should generate
 "{
   "compilerOptions": {
     "paths": {
-      ":proj/test-app": [
+      "@proj/test-app": [
         "./test-app/src/index.ts"
       ],
-      ":proj/common-constructs": [
+      "@proj/common-constructs": [
         "./packages/common/constructs/src/index.ts"
       ]
     },
@@ -2689,6 +2758,9 @@ exports[`react-website generator > Tanstack router integration > should generate
     "formatter": {
       "quoteStyle": "single",
       "trailingCommas": "all"
+    },
+    "resolver": {
+      "experimentalPnpmCatalogs": true
     }
   },
   "css": {
@@ -2704,7 +2776,7 @@ exports[`react-website generator > Tanstack router integration > should generate
     "rules": {
       "preset": "none",
       "correctness": {
-        "noUndeclaredDependencies": "warn"
+        "noUndeclaredDependencies": "error"
       }
     }
   },
@@ -2723,12 +2795,29 @@ exports[`react-website generator > Tanstack router integration > should generate
       "!**/node_modules",
       "!**/.nx",
       "!**/.venv",
+      "!**/.grit",
       "!**/*.css",
       "!**/*.gen.*",
       "!**/generated/**",
       "!**/tsconfig*.json"
     ]
-  }
+  },
+  "overrides": [
+    {
+      "includes": [
+        "**/*.config.{ts,mts,cts,js,mjs,cjs}",
+        "**/*.{spec,test}.{ts,tsx,mts,cts,js,jsx,mjs,cjs}",
+        "**/*.stories.{ts,tsx}"
+      ],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "noUndeclaredDependencies": "off"
+          }
+        }
+      }
+    }
+  ]
 }
 "
 `;
@@ -2834,44 +2923,39 @@ exports[`react-website generator > Tanstack router integration > should generate
 exports[`react-website generator > Tanstack router integration > should generate website with router correctly > package.json 1`] = `
 "{
   "name": "@proj/source",
-  "dependencies": {
-    "@cloudscape-design/board-components": "3.0.205",
-    "@cloudscape-design/components": "3.0.1330",
-    "@cloudscape-design/global-styles": "1.0.62",
-    "@tanstack/react-router": "1.170.18",
-    "aws-cdk-lib": "2.261.0",
-    "constructs": "10.7.0",
-    "react": "19.2.7",
-    "react-dom": "19.2.7",
-    "tailwindcss": "4.3.3"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@nx/js": "23.1.0",
-    "@nx/react": "23.1.0",
+    "@nx/react": "catalog:",
     "@nx/vite": "23.1.0",
     "@nx/vitest": "23.1.0",
     "@nx/web": "23.1.0",
     "@swc/helpers": "~0.5.18",
-    "@tailwindcss/vite": "4.3.3",
-    "@tanstack/router-generator": "1.167.21",
-    "@tanstack/router-plugin": "1.168.22",
-    "@tanstack/router-utils": "1.162.2",
-    "@tanstack/virtual-file-routes": "1.162.0",
+    "@tailwindcss/vite": "catalog:",
+    "@tanstack/router-generator": "catalog:",
+    "@tanstack/router-plugin": "catalog:",
+    "@tanstack/router-utils": "catalog:",
+    "@tanstack/virtual-file-routes": "catalog:",
     "@testing-library/dom": "10.4.0",
     "@testing-library/react": "16.3.0",
-    "@types/node": "26.1.1",
+    "@types/node": "catalog:",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^6.0.0",
-    "@vitest/coverage-v8": "4.1.10",
-    "@vitest/ui": "4.1.10",
+    "@vitest/coverage-v8": "catalog:",
+    "@vitest/ui": "catalog:",
     "jiti": "2.4.2",
     "jsdom": "^27.1.0",
     "typescript": "~6.0.3",
-    "vite": "8.1.5",
-    "vitest": "4.1.10"
+    "vite": "catalog:",
+    "vitest": "catalog:"
   },
-  "type": "module"
+  "type": "module",
+  "workspaces": [
+    "packages/*",
+    "test-app",
+    "packages/common/constructs"
+  ]
 }
 "
 `;
@@ -2913,6 +2997,24 @@ You can also automatiaclly fix some lint errors by running the following command
 "
 `;
 
+exports[`react-website generator > Tanstack router integration > should generate website with router correctly > packages/common/constructs/package.json 1`] = `
+"{
+  "name": "@proj/common-constructs",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "aws-cdk-lib": "catalog:",
+    "constructs": "catalog:",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:"
+  }
+}
+"
+`;
+
 exports[`react-website generator > Tanstack router integration > should generate website with router correctly > packages/common/constructs/project.json 1`] = `
 "{
   "name": "@proj/common-constructs",
@@ -3835,9 +3937,30 @@ export default defineConfig(() => ({
 
 exports[`react-website generator > Tanstack router integration > should generate website with router correctly > pnpm-workspace.yaml 1`] = `
 "packages:
-  - "packages/*"
-  - "test-app"
-  - "packages/common/*"
+  - packages/*
+  - test-app
+  - packages/common/*
+catalog:
+  vite: 8.1.5
+  vitest: 4.1.10
+  '@vitest/coverage-v8': 4.1.10
+  constructs: 10.7.0
+  aws-cdk-lib: 2.261.0
+  '@types/node': 26.1.1
+  react: 19.2.7
+  react-dom: 19.2.7
+  '@cloudscape-design/components': 3.0.1330
+  '@cloudscape-design/board-components': 3.0.205
+  '@cloudscape-design/global-styles': 1.0.62
+  tailwindcss: 4.3.3
+  '@tanstack/react-router': 1.170.18
+  '@nx/react': 23.1.0
+  '@vitest/ui': 4.1.10
+  '@tailwindcss/vite': 4.3.3
+  '@tanstack/router-plugin': 1.168.22
+  '@tanstack/router-generator': 1.167.21
+  '@tanstack/virtual-file-routes': 1.162.0
+  '@tanstack/router-utils': 1.162.2
 "
 `;
 
@@ -3911,6 +4034,26 @@ exports[`react-website generator > Tanstack router integration > should generate
 "
 `;
 
+exports[`react-website generator > Tanstack router integration > should generate website with router correctly > test-app/package.json 1`] = `
+"{
+  "name": "@proj/test-app",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@cloudscape-design/board-components": "catalog:",
+    "@cloudscape-design/components": "catalog:",
+    "@cloudscape-design/global-styles": "catalog:",
+    "@tanstack/react-router": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "tailwindcss": "catalog:"
+  },
+  "devDependencies": {}
+}
+"
+`;
+
 exports[`react-website generator > Tanstack router integration > should generate website with router correctly > test-app/project.json 1`] = `
 "{
   "name": "@proj/test-app",
@@ -4530,7 +4673,7 @@ export default defineConfig(() => ({
       provider: 'v8' as const,
     },
   },
-  resolve: { tsconfigPaths: true },
+  resolve: { tsconfigPaths: true, dedupe: ['react', 'react-dom'] },
   define: { global: {} },
 }));
 "
@@ -4540,10 +4683,10 @@ exports[`react-website generator > Tanstack router integration > should generate
 "{
   "compilerOptions": {
     "paths": {
-      ":proj/test-app": [
+      "@proj/test-app": [
         "./test-app/src/index.ts"
       ],
-      ":proj/common-constructs": [
+      "@proj/common-constructs": [
         "./packages/common/constructs/src/index.ts"
       ]
     },
@@ -4651,7 +4794,7 @@ export default defineConfig(() => ({
       provider: 'v8' as const,
     },
   },
-  resolve: { tsconfigPaths: true },
+  resolve: { tsconfigPaths: true, dedupe: ['react', 'react-dom'] },
   define: { global: {} },
 }));
 "
@@ -5374,19 +5517,7 @@ root &&
 "
 `;
 
-exports[`react-website generator > should handle npm scope prefix correctly > scoped-dependencies 1`] = `
-{
-  "@cloudscape-design/board-components": "3.0.205",
-  "@cloudscape-design/components": "3.0.1330",
-  "@cloudscape-design/global-styles": "1.0.62",
-  "@tanstack/react-router": "1.170.18",
-  "aws-cdk-lib": "2.261.0",
-  "constructs": "10.7.0",
-  "react": "19.2.7",
-  "react-dom": "19.2.7",
-  "tailwindcss": "4.3.3",
-}
-`;
+exports[`react-website generator > should handle npm scope prefix correctly > scoped-dependencies 1`] = `{}`;
 
 exports[`react-website generator ux tests > Cloudscape > should update package.json with required dependencies > test-app/src/components/AppLayout/index.tsx 1`] = `
 "import * as React from 'react';
@@ -5732,8 +5863,8 @@ import {
   SidebarInset,
   SidebarProvider,
   SidebarTrigger,
-} from ':proj/common-shadcn/components/ui/sidebar';
-import { Separator } from ':proj/common-shadcn/components/ui/separator';
+} from '@proj/common-shadcn/components/ui/sidebar';
+import { Separator } from '@proj/common-shadcn/components/ui/separator';
 import Config from '../../config';
 
 import { Link, useLocation, useMatchRoute } from '@tanstack/react-router';
@@ -5744,7 +5875,7 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from ':proj/common-shadcn/components/ui/breadcrumb';
+} from '@proj/common-shadcn/components/ui/breadcrumb';
 import { AppSidebar } from '../app-sidebar';
 
 const getBreadcrumbs = (
@@ -5855,7 +5986,7 @@ import {
   Alert as ShadcnAlert,
   AlertDescription,
   AlertTitle,
-} from ':proj/common-shadcn/components/ui/alert';
+} from '@proj/common-shadcn/components/ui/alert';
 
 type AlertType = 'info' | 'error';
 
@@ -5895,7 +6026,7 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from ':proj/common-shadcn/components/ui/sidebar';
+} from '@proj/common-shadcn/components/ui/sidebar';
 import { Link } from '@tanstack/react-router';
 
 import Config from '../config';
@@ -5937,7 +6068,7 @@ export function AppSidebar() {
 `;
 
 exports[`react-website generator ux tests > Shadcn > should update package.json with required dependencies > test-app/src/components/spinner.tsx 1`] = `
-"import { Spinner as ShadcnSpinner } from ':proj/common-shadcn/components/ui/spinner';
+"import { Spinner as ShadcnSpinner } from '@proj/common-shadcn/components/ui/spinner';
 
 export const Spinner = ShadcnSpinner;
 "

package/src/ts/react-website/app/generator.js

@@ -1,16 +1,17 @@
 /**
  * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
- */ import { addDependenciesToPackageJson, generateFiles, joinPathFragments, names, OverwriteStrategy, readProjectConfiguration, updateJson, updateProjectConfiguration } from "@nx/devkit";
+ */ import { generateFiles, joinPathFragments, names, OverwriteStrategy, readProjectConfiguration, removeDependenciesFromPackageJson, updateJson, updateProjectConfiguration } from "@nx/devkit";
 import { applicationGenerator } from "@nx/react";
 import { relative, sep } from "path";
 import { addDestructuredImport, addSingleImport, applyGritQL } from "../../../utils/ast.js";
+import { addDependenciesToPackageJson } from "../../../utils/dependencies.js";
 import { formatFilesInSubtree } from "../../../utils/format.js";
 import { resolveIac } from "../../../utils/iac.js";
 import { installDependencies } from "../../../utils/install.js";
 import { addGeneratorMetricsIfApplicable } from "../../../utils/metrics.js";
 import { kebabCase, toClassName, toKebabCase } from "../../../utils/names.js";
-import { getNpmScopePrefix, toScopeAlias } from "../../../utils/npm-scope.js";
+import { getNpmScopePrefix } from "../../../utils/npm-scope.js";
 import { addGeneratorMetadata, getGeneratorInfo } from "../../../utils/nx.js";
 import { sortObjectKeys } from "../../../utils/object.js";
 import { getRelativePathToRoot } from "../../../utils/paths.js";
@@ -35,7 +36,7 @@ export async function tsReactWebsiteGenerator(tree, schema) {
         throw new Error('Shadcn requires TailwindCSS to be enabled.');
     }
     const npmScopePrefix = getNpmScopePrefix(tree);
-    const scopeAlias = toScopeAlias(npmScopePrefix);
+    const scopeAlias = npmScopePrefix;
     const websiteNameClassName = toClassName(schema.name);
     const websiteNameKebabCase = toKebabCase(schema.name);
     const fullyQualifiedName = `${npmScopePrefix}${websiteNameKebabCase}`;
@@ -264,8 +265,12 @@ export async function tsReactWebsiteGenerator(tree, schema) {
         if (tailwind) {
             await applyGritQL(tree, viteConfigPath, '`plugins: [$items]` => `plugins: [$items, tailwindcss()]` where { $items <: within `defineConfig($_)`, $items <: not some `tailwindcss()` }');
         }
-        // Use Vite's native tsconfig paths resolution (replaces vite-tsconfig-paths)
-        await applyGritQL(tree, viteConfigPath, 'or { `defineConfig(() => ({ $props }))` where { $props <: not some `resolve: $_`, $props += `resolve: { tsconfigPaths: true }` }, `defineConfig({ $props })` where { $props <: not some `resolve: $_`, $props += `resolve: { tsconfigPaths: true }` } }');
+        // Use Vite's native tsconfig paths resolution (replaces vite-tsconfig-paths).
+        // `dedupe` forces a single copy of react/react-dom into the bundle: each
+        // project declares its own react dependency, so without this a workspace
+        // library's hoisted copy can produce a second React instance and the
+        // "Invalid hook call" runtime crash.
+        await applyGritQL(tree, viteConfigPath, "or { `defineConfig(() => ({ $props }))` where { $props <: not some `resolve: $_`, $props += `resolve: { tsconfigPaths: true, dedupe: ['react', 'react-dom'] }` }, `defineConfig({ $props })` where { $props <: not some `resolve: $_`, $props += `resolve: { tsconfigPaths: true, dedupe: ['react', 'react-dom'] }` } }");
         // Add define: { global: {} } to the config (handles both callback and direct forms)
         await applyGritQL(tree, viteConfigPath, 'or { `defineConfig(() => ({ $props }))` where { $props <: not contains `define`, $props += `define: { global: {} }` }, `defineConfig({ $props })` where { $props <: not contains `define`, $props += `define: { global: {} }` } }');
     }
@@ -296,29 +301,44 @@ export async function tsReactWebsiteGenerator(tree, schema) {
                 }
             ] : tsconfig.references
         }));
-    const devDependencies = [
-        '@nx/react',
-        '@vitest/ui'
-    ];
     const dependencies = [
         'react',
         'react-dom'
     ];
+    // Build/test tooling imported only from vite.config.mts stays at the root.
+    const rootDevDependencies = [
+        '@nx/react',
+        '@vitest/ui'
+    ];
     if (ux === 'cloudscape') {
         dependencies.push('@cloudscape-design/components', '@cloudscape-design/board-components', '@cloudscape-design/global-styles');
     } else if (ux === 'shadcn') {
-    // not required to add any dependencies because dependencies are added by the common/shadcn package.
+        // Shared shadcn components live in the common/shadcn package, but the
+        // website's own generated components (e.g. the tanstack-router sidebar)
+        // import lucide-react directly, so the website must declare it.
+        if (tanstackRouter) {
+            dependencies.push('lucide-react');
+        }
     }
-    // Add TailwindCSS dependencies if enabled
     if (tailwind) {
         dependencies.push('tailwindcss');
-        devDependencies.push('@tailwindcss/vite');
+        rootDevDependencies.push('@tailwindcss/vite');
     }
     if (tanstackRouter) {
         dependencies.push('@tanstack/react-router');
-        devDependencies.push('@tanstack/router-plugin', '@tanstack/router-generator', '@tanstack/virtual-file-routes', '@tanstack/router-utils');
+        rootDevDependencies.push('@tanstack/router-plugin', '@tanstack/router-generator', '@tanstack/virtual-file-routes', '@tanstack/router-utils');
     }
-    addDependenciesToPackageJson(tree, withVersions(dependencies), withVersions(devDependencies));
+    addDependenciesToPackageJson(tree, withVersions(dependencies), {}, joinPathFragments(libraryRoot, 'package.json'));
+    addDependenciesToPackageJson(tree, {}, withVersions(rootDevDependencies));
+    // @nx/react's applicationGenerator seeds react/react-dom into the root
+    // manifest. The website now declares its own pinned versions, so drop the
+    // root copies: without catalogs (npm) the root's floating range resolves to
+    // a different version than the website's pin, installing a second React and
+    // producing the "Invalid hook call" runtime crash.
+    removeDependenciesFromPackageJson(tree, [
+        'react',
+        'react-dom'
+    ], []);
     await addGeneratorMetricsIfApplicable(tree, [
         REACT_WEBSITE_APP_GENERATOR_INFO
     ]);