fix(vite): add missing types for tsconfigs (#15260)

(cherry picked from commit 2e449da)

Author: barbados-clemens

e2e/react/src/react-package.test.ts

@@ -1,6 +1,7 @@
 import {
   checkFilesDoNotExist,
   checkFilesExist,
+  cleanupProject,
   getSize,
   killPorts,
   newProject,
@@ -107,7 +108,7 @@ describe('Build React libraries and apps', () => {
 
   afterEach(() => {
     killPorts();
-    // cleanupProject();
+    cleanupProject();
   });
 
   describe('Buildable libraries', () => {

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

@@ -44,6 +44,26 @@ describe('app', () => {
       expect(projects.get('my-app-e2e').root).toEqual('apps/my-app-e2e');
     });
 
+    it('should add vite types to tsconfigs', async () => {
+      await applicationGenerator(appTree, {
+        ...schema,
+        bundler: 'vite',
+        unitTestRunner: 'vitest',
+      });
+      const tsconfigApp = readJson(appTree, 'apps/my-app/tsconfig.app.json');
+      expect(tsconfigApp.compilerOptions.types).toEqual([
+        'node',
+        'vite/client',
+      ]);
+      const tsconfigSpec = readJson(appTree, 'apps/my-app/tsconfig.spec.json');
+      expect(tsconfigSpec.compilerOptions.types).toEqual([
+        'vitest/globals',
+        'vitest/importMeta',
+        'vite/client',
+        'node',
+      ]);
+    });
+
     it('should not overwrite default project if already set', async () => {
       const nxJson = readNxJson(appTree);
       nxJson.defaultProject = 'some-awesome-project';

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

@@ -61,6 +61,26 @@ describe('lib', () => {
       });
     });
 
+    it('should add vite types to tsconfigs', async () => {
+      await libraryGenerator(tree, {
+        ...defaultSchema,
+        bundler: 'vite',
+        unitTestRunner: 'vitest',
+      });
+      const tsconfigApp = readJson(tree, 'libs/my-lib/tsconfig.lib.json');
+      expect(tsconfigApp.compilerOptions.types).toEqual([
+        'node',
+        'vite/client',
+      ]);
+      const tsconfigSpec = readJson(tree, 'libs/my-lib/tsconfig.spec.json');
+      expect(tsconfigSpec.compilerOptions.types).toEqual([
+        'vitest/globals',
+        'vitest/importMeta',
+        'vite/client',
+        'node',
+      ]);
+    });
+
     it('should update tags', async () => {
       await libraryGenerator(tree, { ...defaultSchema, tags: 'one,two' });
       const project = readProjectConfiguration(tree, 'my-lib');

packages/react/src/utils/create-ts-config.ts

@@ -1,6 +1,6 @@
 import { Tree } from 'nx/src/generators/tree';
 import * as shared from '@nrwl/js/src/utils/typescript/create-ts-config';
-import { writeJson } from 'nx/src/generators/utils/json';
+import { updateJson, writeJson } from 'nx/src/generators/utils/json';
 
 export function createTsConfig(
   host: Tree,
@@ -56,6 +56,21 @@ export function createTsConfig(
   }
 
   writeJson(host, `${projectRoot}/tsconfig.json`, json);
+
+  const tsconfigProjectPath = `${projectRoot}/tsconfig.${type}.json`;
+  if (options.bundler === 'vite' && host.exists(tsconfigProjectPath)) {
+    updateJson(host, tsconfigProjectPath, (json) => {
+      json.compilerOptions ??= {};
+
+      const types = new Set(json.compilerOptions.types ?? []);
+      types.add('node');
+      types.add('vite/client');
+
+      json.compilerOptions.types = Array.from(types);
+
+      return json;
+    });
+  }
 }
 
 export function extractTsConfigBase(host: Tree) {

packages/vite/src/generators/vitest/files/tsconfig.spec.json__tmpl__

@@ -2,7 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": ["vitest/globals", "node"]
+    "types": ["vitest/globals", "vitest/importMeta", "vite/client", "node"]
   },
   "include": [
     "vite.config.ts",

packages/vite/src/generators/vitest/vitest.spec.ts

@@ -93,6 +93,8 @@ describe('vitest generator', () => {
             "outDir": "../../dist/out-tsc",
             "types": Array [
               "vitest/globals",
+              "vitest/importMeta",
+              "vite/client",
               "node",
             ],
           },