fix(react): add missing offset variable for generateFiles

When using pnpm with its strict symlink structure, TypeScript fails to resolve
the @nx/react/typings/cssmodule.d.ts file when it's specified in the types array.
This is because pnpm doesn't hoist dependencies in the same way as npm/yarn.

By moving these type definitions to the files array  we ensure they are always included regardless of the package manager's module resolution

Fixes: #29945

packages/next/src/generators/cypress-component-configuration/__snapshots__/cypress-component-configuration.spec.ts.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`cypress-component-configuration generator should setup nextjs app: 
     {

packages/next/src/generators/library/library.spec.ts

@@ -37,10 +37,11 @@ describe('next library', () => {
       ...baseOptions,
       directory: 'my-lib',
     });
-    const tsconfigTypes = readJson(appTree, 'my-lib/tsconfig.lib.json')
-      .compilerOptions.types;
+    const tsconfig = readJson(appTree, 'my-lib/tsconfig.lib.json');
 
-    expect(tsconfigTypes).toContain('@nx/next/typings/image.d.ts');
+    expect(tsconfig.files).toContain(
+      '../node_modules/@nx/next/typings/image.d.ts'
+    );
   });
 
   it('should add jsxImportSource in tsconfig.json for @emotion/styled', async () => {
@@ -217,10 +218,7 @@ describe('next library', () => {
             "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",
             "types": [
               "node",
-              "@nx/react/typings/cssmodule.d.ts",
-              "@nx/react/typings/image.d.ts",
               "next",
-              "@nx/next/typings/image.d.ts",
             ],
           },
           "exclude": [
@@ -240,6 +238,11 @@ describe('next library', () => {
             "eslint.config.mjs",
           ],
           "extends": "../tsconfig.base.json",
+          "files": [
+            "../node_modules/@nx/react/typings/cssmodule.d.ts",
+            "../node_modules/@nx/react/typings/image.d.ts",
+            "../node_modules/@nx/next/typings/image.d.ts",
+          ],
           "include": [
             "src/**/*.js",
             "src/**/*.jsx",

packages/next/src/generators/library/library.ts

@@ -3,6 +3,7 @@ import {
   formatFiles,
   GeneratorCallback,
   joinPathFragments,
+  offsetFromRoot,
   runTasksInSerial,
   Tree,
   updateJson,
@@ -145,11 +146,19 @@ export async function libraryGeneratorInternal(host: Tree, rawOptions: Schema) {
       if (!json.compilerOptions.types) {
         json.compilerOptions.types = [];
       }
-      json.compilerOptions.types = [
-        ...json.compilerOptions.types,
-        'next',
-        '@nx/next/typings/image.d.ts',
+      json.compilerOptions.types = [...json.compilerOptions.types, 'next'];
+
+      // Add Next.js typings to files array instead of types for better pnpm compatibility
+      if (!json.files) {
+        json.files = [];
+      }
+      json.files = [
+        ...json.files,
+        `${offsetFromRoot(
+          options.projectRoot
+        )}node_modules/@nx/next/typings/image.d.ts`,
       ];
+
       return json;
     }
   );

packages/react/src/generators/application/__snapshots__/application.spec.ts.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`app --bundler=rsbuild should generate valid rsbuild config files for @emotion/styled 1`] = `
 "import styled from '@emotion/styled';

packages/react/src/generators/application/application.spec.ts

@@ -82,10 +82,12 @@ describe('app', () => {
       const tsconfigApp = readJson(appTree, 'my-app/tsconfig.app.json');
       expect(tsconfigApp.compilerOptions.types).toEqual([
         'node',
-        '@nx/react/typings/cssmodule.d.ts',
-        '@nx/react/typings/image.d.ts',
         'vite/client',
       ]);
+      expect(tsconfigApp.files).toEqual([
+        '../node_modules/@nx/react/typings/cssmodule.d.ts',
+        '../node_modules/@nx/react/typings/image.d.ts',
+      ]);
       const tsconfigSpec = readJson(appTree, 'my-app/tsconfig.spec.json');
       expect(tsconfigSpec.compilerOptions.types).toEqual([
         'vitest/globals',
@@ -93,9 +95,13 @@ describe('app', () => {
         'vite/client',
         'node',
         'vitest',
-        '@nx/react/typings/cssmodule.d.ts',
-        '@nx/react/typings/image.d.ts',
       ]);
+      expect(tsconfigSpec.files).toContain(
+        '../node_modules/@nx/react/typings/cssmodule.d.ts'
+      );
+      expect(tsconfigSpec.files).toContain(
+        '../node_modules/@nx/react/typings/image.d.ts'
+      );
       expect(appTree.read('my-app/vite.config.ts', 'utf-8')).toMatchSnapshot();
     });
 
@@ -236,10 +242,12 @@ describe('app', () => {
       const tsconfigApp = readJson(appTree, 'my-app/tsconfig.app.json');
       expect(tsconfigApp.compilerOptions.types).toEqual([
         'node',
-        '@nx/react/typings/cssmodule.d.ts',
-        '@nx/react/typings/image.d.ts',
         'vite/client',
       ]);
+      expect(tsconfigApp.files).toEqual([
+        '../node_modules/@nx/react/typings/cssmodule.d.ts',
+        '../node_modules/@nx/react/typings/image.d.ts',
+      ]);
       const tsconfigSpec = readJson(appTree, 'my-app/tsconfig.spec.json');
       expect(tsconfigSpec.compilerOptions.types).toEqual([
         'vitest/globals',
@@ -247,9 +255,13 @@ describe('app', () => {
         'vite/client',
         'node',
         'vitest',
-        '@nx/react/typings/cssmodule.d.ts',
-        '@nx/react/typings/image.d.ts',
       ]);
+      expect(tsconfigSpec.files).toContain(
+        '../node_modules/@nx/react/typings/cssmodule.d.ts'
+      );
+      expect(tsconfigSpec.files).toContain(
+        '../node_modules/@nx/react/typings/image.d.ts'
+      );
       expect(appTree.read('my-app/vite.config.ts', 'utf-8')).toMatchSnapshot();
     });
 
@@ -1185,14 +1197,13 @@ describe('app', () => {
             "module": "commonjs",
             "moduleResolution": "node10",
             "jsx": "react-jsx",
-            "types": [
-              "jest",
-              "node",
-              "@nx/react/typings/cssmodule.d.ts",
-              "@nx/react/typings/image.d.ts"
-            ]
+            "types": ["jest", "node"]
           },
-          "files": ["src/test-setup.ts"],
+          "files": [
+            "src/test-setup.ts",
+            "../node_modules/@nx/react/typings/cssmodule.d.ts",
+            "../node_modules/@nx/react/typings/image.d.ts"
+          ],
           "include": [
             "jest.config.ts",
             "src/**/*.test.ts",
@@ -1427,8 +1438,6 @@ describe('app', () => {
             "tsBuildInfoFile": "dist/tsconfig.app.tsbuildinfo",
             "types": [
               "node",
-              "@nx/react/typings/cssmodule.d.ts",
-              "@nx/react/typings/image.d.ts",
               "vite/client",
             ],
           },
@@ -1452,6 +1461,10 @@ describe('app', () => {
             "eslint.config.mjs",
           ],
           "extends": "../tsconfig.base.json",
+          "files": [
+            "../node_modules/@nx/react/typings/cssmodule.d.ts",
+            "../node_modules/@nx/react/typings/image.d.ts",
+          ],
           "include": [
             "src/**/*.js",
             "src/**/*.jsx",
@@ -1474,11 +1487,13 @@ describe('app', () => {
               "vite/client",
               "node",
               "vitest",
-              "@nx/react/typings/cssmodule.d.ts",
-              "@nx/react/typings/image.d.ts",
             ],
           },
           "extends": "../tsconfig.base.json",
+          "files": [
+            "../node_modules/@nx/react/typings/cssmodule.d.ts",
+            "../node_modules/@nx/react/typings/image.d.ts",
+          ],
           "include": [
             "vite.config.ts",
             "vite.config.mts",

packages/react/src/generators/application/files/base-rsbuild/tsconfig.app.json__tmpl__

@@ -5,26 +5,26 @@
     "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"
-    ]
+    "types": ["node"]
   },
+  "files": [
+    <%_ if (style === 'styled-jsx') { _%>"<%= offsetFromRoot %>node_modules/@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
+    "<%= offsetFromRoot %>node_modules/@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",<%_ } _%>
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts"
-    ]
+    "types": ["node"]
   },
+  "files": [
+    <%_ if (style === 'styled-jsx') { _%>"<%= offsetFromRoot %>node_modules/@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
+    "<%= offsetFromRoot %>node_modules/@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"]
 }

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

@@ -5,26 +5,26 @@
     "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"
-    ]
+    "types": ["node"]
   },
+  "files": [
+    <%_ if (style === 'styled-jsx') { _%>"<%= offsetFromRoot %>node_modules/@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
+    "<%= offsetFromRoot %>node_modules/@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",<%_ } _%>
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts"
-    ]
+    "types": ["node"]
   },
+  "files": [
+    <%_ if (style === 'styled-jsx') { _%>"<%= offsetFromRoot %>node_modules/@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
+    "<%= offsetFromRoot %>node_modules/@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"]
 }

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

@@ -5,26 +5,26 @@
     "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"
-    ]
+    "types": ["node"]
   },
+  "files": [
+    <%_ if (style === 'styled-jsx') { _%>"<%= offsetFromRoot %>node_modules/@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
+    "<%= offsetFromRoot %>node_modules/@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",<%_ } _%>
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts"
-    ]
+    "types": ["node"]
   },
+  "files": [
+    <%_ if (style === 'styled-jsx') { _%>"<%= offsetFromRoot %>node_modules/@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
+    "<%= offsetFromRoot %>node_modules/@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"]
 }

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

@@ -5,26 +5,26 @@
     "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"
-    ]
+    "types": ["node"]
   },
+  "files": [
+    <%_ if (style === 'styled-jsx') { _%>"<%= offsetFromRoot %>node_modules/@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
+    "<%= offsetFromRoot %>node_modules/@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",<%_ } _%>
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts"
-    ]
+    "types": ["node"]
   },
+  "files": [
+    <%_ if (style === 'styled-jsx') { _%>"<%= offsetFromRoot %>node_modules/@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
+    "<%= offsetFromRoot %>node_modules/@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"]
 }

packages/react/src/generators/application/lib/update-jest-config.ts

@@ -1,7 +1,7 @@
 import { maybeJs } from '../../../utils/maybe-js';
 import { updateJestConfigContent } from '../../../utils/jest-utils';
 import { NormalizedSchema } from '../schema';
-import { Tree, updateJson } from '@nx/devkit';
+import { Tree, updateJson, offsetFromRoot } from '@nx/devkit';
 
 export function updateSpecConfig(host: Tree, options: NormalizedSchema) {
   if (options.unitTestRunner === 'none') {
@@ -11,15 +11,24 @@ export function updateSpecConfig(host: Tree, options: NormalizedSchema) {
   updateJson(host, `${options.appProjectRoot}/tsconfig.spec.json`, (json) => {
     const compilerOptions = json.compilerOptions ?? {};
     const types = compilerOptions.types ?? [];
-    if (options.style === 'styled-jsx') {
-      types.push('@nx/react/typings/styled-jsx.d.ts');
-    }
-    types.push(
-      '@nx/react/typings/cssmodule.d.ts',
-      '@nx/react/typings/image.d.ts'
-    );
     compilerOptions.types = types;
     json.compilerOptions = compilerOptions;
+
+    // Add React typings to files array instead of types for better pnpm compatibility
+    if (!json.files) {
+      json.files = [];
+    }
+    const offset = offsetFromRoot(options.appProjectRoot);
+    if (options.style === 'styled-jsx') {
+      json.files.push(
+        `${offset}node_modules/@nx/react/typings/styled-jsx.d.ts`
+      );
+    }
+    json.files.push(
+      `${offset}node_modules/@nx/react/typings/cssmodule.d.ts`,
+      `${offset}node_modules/@nx/react/typings/image.d.ts`
+    );
+
     if (options.isUsingTsSolutionConfig) {
       // add project reference to the runtime tsconfig.app.json file
       json.references ??= [];

packages/react/src/generators/host/__snapshots__/host.rspack.spec.ts.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`hostGenerator bundler=rspack should generate host files and configs for SSR 1`] = `
 "// @ts-check

packages/react/src/generators/host/files/common/tsconfig.lint.json__tmpl__

@@ -2,12 +2,12 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": [
-        "node",
-        "@nx/react/typings/cssmodule.d.ts",
-        "@nx/react/typings/image.d.ts"
-    ]
+    "types": ["node"]
   },
+  "files": [
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/image.d.ts"
+  ],
   "include": [
     "src/**/*.js",
     "src/**/*.jsx",

packages/react/src/generators/host/files/rspack-common/tsconfig.lint.json__tmpl__

@@ -2,12 +2,12 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": [
-        "node",
-        "@nx/react/typings/cssmodule.d.ts",
-        "@nx/react/typings/image.d.ts"
-    ]
+    "types": ["node"]
   },
+  "files": [
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/image.d.ts"
+  ],
   "include": [
     "src/**/*.js",
     "src/**/*.jsx",

packages/react/src/generators/host/files/rspack-module-federation-ssr-ts/tsconfig.server.json__tmpl__

@@ -3,12 +3,12 @@
   "compilerOptions": {
     "outDir": "../../out-tsc/server",
     "target": "es2019",
-    "types": [
-      "node",
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts"
-    ]
+    "types": ["node"]
   },
+  "files": [
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/image.d.ts"
+  ],
   "include": [
     "src/remotes.d.ts",
     "src/main.server.tsx",

packages/react/src/generators/host/files/rspack-module-federation-ssr/tsconfig.server.json__tmpl__

@@ -3,12 +3,12 @@
   "compilerOptions": {
     "outDir": "../../out-tsc/server",
     "target": "es2019",
-    "types": [
-      "node",
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts"
-    ]
+    "types": ["node"]
   },
+  "files": [
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/image.d.ts"
+  ],
   "include": [
     "src/remotes.d.ts",
     "src/main.server.tsx",

packages/react/src/generators/host/files/webpack-module-federation-ssr-ts/tsconfig.server.json__tmpl__

@@ -3,12 +3,12 @@
   "compilerOptions": {
     "outDir": "../../out-tsc/server",
     "target": "es2019",
-    "types": [
-      "node",
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts"
-    ]
+    "types": ["node"]
   },
+  "files": [
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/image.d.ts"
+  ],
   "include": [
     "src/remotes.d.ts",
     "src/main.server.tsx",

packages/react/src/generators/host/files/webpack-module-federation-ssr/tsconfig.server.json__tmpl__

@@ -3,12 +3,12 @@
   "compilerOptions": {
     "outDir": "../../out-tsc/server",
     "target": "es2019",
-    "types": [
-      "node",
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts"
-    ]
+    "types": ["node"]
   },
+  "files": [
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/image.d.ts"
+  ],
   "include": [
     "src/remotes.d.ts",
     "src/main.server.tsx",

packages/react/src/generators/host/host.rspack.spec.ts

@@ -238,13 +238,13 @@ describe('hostGenerator', () => {
         compilerOptions: {
           outDir: '../../out-tsc/server',
           target: 'es2019',
-          types: [
-            'node',
-            '@nx/react/typings/cssmodule.d.ts',
-            '@nx/react/typings/image.d.ts',
-          ],
+          types: ['node'],
         },
         extends: './tsconfig.app.json',
+        files: [
+          '../node_modules/@nx/react/typings/cssmodule.d.ts',
+          '../node_modules/@nx/react/typings/image.d.ts',
+        ],
         include: ['src/remotes.d.ts', 'src/main.server.tsx', 'server.ts'],
       });
 
@@ -280,13 +280,13 @@ describe('hostGenerator', () => {
         compilerOptions: {
           outDir: '../../out-tsc/server',
           target: 'es2019',
-          types: [
-            'node',
-            '@nx/react/typings/cssmodule.d.ts',
-            '@nx/react/typings/image.d.ts',
-          ],
+          types: ['node'],
         },
         extends: './tsconfig.app.json',
+        files: [
+          '../node_modules/@nx/react/typings/cssmodule.d.ts',
+          '../node_modules/@nx/react/typings/image.d.ts',
+        ],
         include: ['src/remotes.d.ts', 'src/main.server.tsx', 'server.ts'],
       });
 
@@ -505,8 +505,6 @@ describe('hostGenerator', () => {
             "tsBuildInfoFile": "dist/tsconfig.app.tsbuildinfo",
             "types": [
               "node",
-              "@nx/react/typings/cssmodule.d.ts",
-              "@nx/react/typings/image.d.ts",
             ],
           },
           "exclude": [
@@ -522,6 +520,10 @@ describe('hostGenerator', () => {
             "src/**/*.test.jsx",
           ],
           "extends": "../tsconfig.base.json",
+          "files": [
+            "../node_modules/@nx/react/typings/cssmodule.d.ts",
+            "../node_modules/@nx/react/typings/image.d.ts",
+          ],
           "include": [
             "src/**/*.js",
             "src/**/*.jsx",

packages/react/src/generators/host/host.webpack.spec.ts

@@ -238,13 +238,13 @@ describe('hostGenerator', () => {
         compilerOptions: {
           outDir: '../../out-tsc/server',
           target: 'es2019',
-          types: [
-            'node',
-            '@nx/react/typings/cssmodule.d.ts',
-            '@nx/react/typings/image.d.ts',
-          ],
+          types: ['node'],
         },
         extends: './tsconfig.app.json',
+        files: [
+          '../node_modules/@nx/react/typings/cssmodule.d.ts',
+          '../node_modules/@nx/react/typings/image.d.ts',
+        ],
         include: ['src/remotes.d.ts', 'src/main.server.tsx', 'server.ts'],
       });
 
@@ -284,13 +284,13 @@ describe('hostGenerator', () => {
         compilerOptions: {
           outDir: '../../out-tsc/server',
           target: 'es2019',
-          types: [
-            'node',
-            '@nx/react/typings/cssmodule.d.ts',
-            '@nx/react/typings/image.d.ts',
-          ],
+          types: ['node'],
         },
         extends: './tsconfig.app.json',
+        files: [
+          '../node_modules/@nx/react/typings/cssmodule.d.ts',
+          '../node_modules/@nx/react/typings/image.d.ts',
+        ],
         include: ['src/remotes.d.ts', 'src/main.server.tsx', 'server.ts'],
       });
 

packages/react/src/generators/host/lib/add-module-federation-files.ts

@@ -44,6 +44,7 @@ export function addModuleFederationFiles(
           ...options,
           static: !options?.dynamic,
           tmpl: '',
+          offsetFromRoot: offsetFromRoot(options.appProjectRoot),
           remotes: defaultRemoteManifest.map(({ name, port }) => {
             return {
               ...names(name),

packages/react/src/generators/host/lib/setup-ssr-for-host.ts

@@ -71,6 +71,7 @@ export async function setupSsrForHost(
           port: Number(options?.devServerPort) || 4200,
           appName,
           tmpl: '',
+          offsetFromRoot: offsetFromRoot(options.appProjectRoot),
           browserBuildOutputPath: project.targets.build?.options?.outputPath,
           remotes: defaultRemoteManifest.map(({ name, port }) => {
             return {

packages/react/src/generators/library/__snapshots__/library.spec.ts.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`lib --bundler none, unit test runner vitest should configure vite 1`] = `
 "

packages/react/src/generators/library/files/common/tsconfig.lib.json__tmpl__

@@ -2,13 +2,13 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "<%= offsetFromRoot %>dist/out-tsc",
-    "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"
-    ]
+    "types": ["node"]
   },
+  "files": [
+    <%_ if (style === 'styled-jsx') { %>"<%= offsetFromRoot %>node_modules/@nx/react/typings/styled-jsx.d.ts",<% } _%>
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
+    "<%= offsetFromRoot %>node_modules/@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"],
   "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }

packages/react/src/generators/library/files/vite/tsconfig.lib.json__tmpl__

@@ -2,13 +2,13 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "<%= offsetFromRoot %>dist/out-tsc",
-    "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"
-    ]
+    "types": ["node"]
   },
+  "files": [
+    <%_ if (style === 'styled-jsx') { _%>"<%= offsetFromRoot %>node_modules/@nx/react/typings/styled-jsx.d.ts",<%_ } _%>
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/image.d.ts"
+  ],
   "exclude": ["**/*.spec.ts", "**/*.test.ts", "**/*.spec.tsx", "**/*.test.tsx", "**/*.spec.js", "**/*.test.js", "**/*.spec.jsx", "**/*.test.jsx"],
   "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }

packages/react/src/generators/library/library.spec.ts

@@ -79,11 +79,10 @@ describe('lib', () => {
       unitTestRunner: 'vitest',
     });
     const tsconfigApp = readJson(tree, 'my-lib/tsconfig.lib.json');
-    expect(tsconfigApp.compilerOptions.types).toEqual([
-      'node',
-      '@nx/react/typings/cssmodule.d.ts',
-      '@nx/react/typings/image.d.ts',
-      'vite/client',
+    expect(tsconfigApp.compilerOptions.types).toEqual(['node', 'vite/client']);
+    expect(tsconfigApp.files).toEqual([
+      '../node_modules/@nx/react/typings/cssmodule.d.ts',
+      '../node_modules/@nx/react/typings/image.d.ts',
     ]);
     const tsconfigSpec = readJson(tree, 'my-lib/tsconfig.spec.json');
     expect(tsconfigSpec.compilerOptions.types).toEqual([
@@ -1078,8 +1077,6 @@ module.exports = withNx(
             "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",
             "types": [
               "node",
-              "@nx/react/typings/cssmodule.d.ts",
-              "@nx/react/typings/image.d.ts",
               "vite/client",
             ],
           },
@@ -1111,6 +1108,10 @@ module.exports = withNx(
             "eslint.config.mjs",
           ],
           "extends": "../../tsconfig.base.json",
+          "files": [
+            "../../node_modules/@nx/react/typings/cssmodule.d.ts",
+            "../../node_modules/@nx/react/typings/image.d.ts",
+          ],
           "include": [
             "src/**/*.js",
             "src/**/*.jsx",

packages/react/src/generators/remote/files/rspack-module-federation-ssr-ts/tsconfig.lint.json__tmpl__

@@ -2,12 +2,12 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": [
-        "node",
-        "@nx/react/typings/cssmodule.d.ts",
-        "@nx/react/typings/image.d.ts"
-    ]
+    "types": ["node"]
   },
+  "files": [
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/image.d.ts"
+  ],
   "include": [
     "src/**/*.js",
     "src/**/*.jsx",

packages/react/src/generators/remote/files/rspack-module-federation-ts/tsconfig.lint.json__tmpl__

@@ -2,12 +2,12 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": [
-        "node",
-        "@nx/react/typings/cssmodule.d.ts",
-        "@nx/react/typings/image.d.ts"
-    ]
+    "types": ["node"]
   },
+  "files": [
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/image.d.ts"
+  ],
   "include": [
     "src/**/*.js",
     "src/**/*.jsx",

packages/react/src/generators/remote/files/webpack-module-federation-ssr-ts/tsconfig.lint.json__tmpl__

@@ -2,12 +2,12 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": [
-        "node",
-        "@nx/react/typings/cssmodule.d.ts",
-        "@nx/react/typings/image.d.ts"
-    ]
+    "types": ["node"]
   },
+  "files": [
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/image.d.ts"
+  ],
   "include": [
     "src/**/*.js",
     "src/**/*.jsx",

packages/react/src/generators/remote/files/webpack-module-federation-ts/tsconfig.lint.json__tmpl__

@@ -2,12 +2,12 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": [
-        "node",
-        "@nx/react/typings/cssmodule.d.ts",
-        "@nx/react/typings/image.d.ts"
-    ]
+    "types": ["node"]
   },
+  "files": [
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/image.d.ts"
+  ],
   "include": [
     "src/**/*.js",
     "src/**/*.jsx",

packages/react/src/generators/remote/lib/setup-ssr-for-remote.ts

@@ -58,6 +58,7 @@ export async function setupSsrForRemote(
           port: Number(options?.devServerPort) || 4200,
           appName,
           tmpl: '',
+          offsetFromRoot: offsetFromRoot(options.appProjectRoot),
           browserBuildOutputPath: project.targets.build?.options?.outputPath,
           serverBuildOutputPath: project.targets.server?.options?.outputPath,
         };

packages/react/src/generators/remote/remote.ts

@@ -59,6 +59,7 @@ export function addModuleFederationFiles(
           ...names(options.projectName),
           ...options,
           tmpl: '',
+          offsetFromRoot: offsetFromRoot(options.appProjectRoot),
         };
 
   generateFiles(

packages/react/src/generators/setup-ssr/files/tsconfig.server.json__tmpl__

@@ -3,12 +3,12 @@
   "compilerOptions": {
     "outDir": "../../out-tsc/server",
     "target": "es2019",
-    "types": [
-      "node",
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts"
-    ]
+    "types": ["node"]
   },
+  "files": [
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
+    "<%= offsetFromRoot %>node_modules/@nx/react/typings/image.d.ts"
+  ],
   "include": [
     <%- extraInclude %>
     "src/main.server.tsx",

packages/react/src/generators/setup-ssr/setup-ssr.ts

@@ -5,6 +5,7 @@ import {
   formatFiles,
   generateFiles,
   joinPathFragments,
+  offsetFromRoot,
   readCachedProjectGraph,
   readNxJson,
   readProjectConfiguration,
@@ -235,6 +236,7 @@ export async function setupSsrGenerator(tree: Tree, options: Schema) {
 
   generateFiles(tree, join(__dirname, 'files'), projectRoot, {
     tmpl: '',
+    offsetFromRoot: offsetFromRoot(projectRoot),
     port: Number(options?.serverPort) || 4200,
     extraInclude:
       options.extraInclude?.length > 0