fix(vite): typecheck vue projects with vue-tsc #20242 (#26450)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

## Current Behavior
<!-- This is the behavior we have today -->
Typechecking of  Vue Projects with Vite is not functioning correctly

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
Typechecking of Vue projects should type check the .vue files and not
error in TS files importing .vue files

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #20242

packages/vite/src/executors/build/build.impl.ts

@@ -26,6 +26,7 @@ import {
   loadViteDynamicImport,
   validateTypes,
 } from '../../utils/executor-utils';
+import { type Plugin } from 'vite';
 
 export async function* viteBuildExecutor(
   options: Record<string, any> & ViteBuildExecutorOptions,
@@ -86,8 +87,13 @@ export async function* viteBuildExecutor(
   if (!options.skipTypeCheck) {
     await validateTypes({
       workspaceRoot: context.root,
-      projectRoot: projectRoot,
       tsconfig: tsConfigForBuild,
+      isVueProject: Boolean(
+        resolved.config.plugins?.find(
+          (plugin: Plugin) =>
+            typeof plugin === 'object' && plugin?.name === 'vite:vue'
+        )
+      ),
     });
   }
 

packages/vite/src/utils/executor-utils.ts

@@ -1,31 +1,43 @@
-import { printDiagnostics, runTypeCheck } from '@nx/js';
-import { join } from 'path';
 import { ViteBuildExecutorOptions } from '../executors/build/schema';
-import { ExecutorContext } from '@nx/devkit';
+import { ExecutorContext, getPackageManagerCommand } from '@nx/devkit';
 import { ViteDevServerExecutorOptions } from '../executors/dev-server/schema';
 import {
   calculateProjectBuildableDependencies,
   createTmpTsConfig,
 } from '@nx/js/src/utils/buildable-libs-utils';
 import { getProjectTsConfigPath } from './options-utils';
+import { execSync } from 'node:child_process';
+import { printDiagnostics, runTypeCheck } from '@nx/js';
+import { join } from 'path';
 
 export async function validateTypes(opts: {
   workspaceRoot: string;
-  projectRoot: string;
   tsconfig: string;
+  isVueProject?: boolean;
 }): Promise<void> {
-  const result = await runTypeCheck({
-    workspaceRoot: opts.workspaceRoot,
-    tsConfigPath: opts.tsconfig.startsWith(opts.workspaceRoot)
-      ? opts.tsconfig
-      : join(opts.workspaceRoot, opts.tsconfig),
-    mode: 'noEmit',
-  });
+  if (!opts.isVueProject) {
+    const result = await runTypeCheck({
+      workspaceRoot: opts.workspaceRoot,
+      tsConfigPath: opts.tsconfig.startsWith(opts.workspaceRoot)
+        ? opts.tsconfig
+        : join(opts.workspaceRoot, opts.tsconfig),
+      mode: 'noEmit',
+    });
 
-  await printDiagnostics(result.errors, result.warnings);
+    await printDiagnostics(result.errors, result.warnings);
 
-  if (result.errors.length > 0) {
-    throw new Error('Found type errors. See above.');
+    if (result.errors.length > 0) {
+      throw new Error('Found type errors. See above.');
+    }
+  } else {
+    const pm = getPackageManagerCommand();
+    const cp = execSync(
+      `${pm.exec} vue-tsc --noEmit -p ${opts.tsconfig} --composite false`,
+      {
+        cwd: opts.workspaceRoot,
+        stdio: 'inherit',
+      }
+    );
   }
 }