fix(vite): Update typings and fix when converting lib to vite (#18956)

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"]
+    "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"
+    ]
   },
-  "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"]
+    "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"
+    ]
   },
-  "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": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }

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

@@ -68,7 +68,12 @@ describe('lib', () => {
       unitTestRunner: 'vitest',
     });
     const tsconfigApp = readJson(tree, 'my-lib/tsconfig.lib.json');
-    expect(tsconfigApp.compilerOptions.types).toEqual(['node', 'vite/client']);
+    expect(tsconfigApp.compilerOptions.types).toEqual([
+      'node',
+      '@nx/react/typings/cssmodule.d.ts',
+      '@nx/react/typings/image.d.ts',
+      'vite/client',
+    ]);
     const tsconfigSpec = readJson(tree, 'my-lib/tsconfig.spec.json');
     expect(tsconfigSpec.compilerOptions.types).toEqual([
       'vitest/globals',

packages/vite/src/generators/configuration/configuration.ts

@@ -2,9 +2,11 @@ import {
   convertNxGenerator,
   formatFiles,
   GeneratorCallback,
+  joinPathFragments,
   readProjectConfiguration,
   runTasksInSerial,
   Tree,
+  updateJson,
 } from '@nx/devkit';
 
 import {
@@ -174,6 +176,22 @@ export async function viteConfigurationGenerator(
     }
   }
 
+  if (projectType === 'library') {
+    // update tsconfig.lib.json to include vite/client
+    updateJson(tree, joinPathFragments(root, 'tsconfig.lib.json'), (json) => {
+      if (!json.compilerOptions.types.includes('vite/client')) {
+        return {
+          ...json,
+          compilerOptions: {
+            ...json.compilerOptions,
+            types: [...json.compilerOptions.types, 'vite/client'],
+          },
+        };
+      }
+      return json;
+    });
+  }
+
   createOrEditViteConfig(tree, schema, false, projectAlreadyHasViteTargets);
 
   if (schema.includeVitest) {