fix(nuxt): display errors in client overlay with typeCheck (#21064)

packages/vite/src/client.ts

@@ -14,6 +14,7 @@ import { chunkErrorPlugin } from './plugins/chunk-error'
 import type { ViteBuildContext } from './vite'
 import { devStyleSSRPlugin } from './plugins/dev-ssr-css'
 import { runtimePathsPlugin } from './plugins/paths'
+import { typeCheckPlugin } from './plugins/type-check'
 import { pureAnnotationsPlugin } from './plugins/pure-annotations'
 import { viteNodePlugin } from './vite-node'
 import { createViteLogger } from './utils/logger'
@@ -127,6 +128,11 @@ export async function buildClient (ctx: ViteBuildContext) {
     clientConfig.plugins!.push(...await import('./plugins/analyze').then(r => r.analyzePlugin(ctx)))
   }
 
+  // Add type checking client panel
+  if (ctx.nuxt.options.typescript.typeCheck && ctx.nuxt.options.dev) {
+    clientConfig.plugins!.push(typeCheckPlugin({ sourcemap: ctx.nuxt.options.sourcemap.client }))
+  }
+
   await ctx.nuxt.callHook('vite:extendConfig', clientConfig, { isClient: true, isServer: false })
 
   clientConfig.plugins!.unshift(

packages/vite/src/plugins/type-check.ts

@@ -0,0 +1,27 @@
+import MagicString from 'magic-string'
+import type { Plugin } from 'vite'
+
+export function typeCheckPlugin (options: { sourcemap?: boolean } = {}): Plugin {
+  let entry: string
+  return {
+    name: 'nuxt:type-check',
+    configResolved (config) {
+      const input = config.build.rollupOptions.input
+      if (input && typeof input !== 'string' && !Array.isArray(input)) {
+        entry = input.entry
+      }
+    },
+    transform (code, id) {
+      if (id !== entry) { return }
+
+      const s = new MagicString(code)
+
+      s.prepend('import "/@vite-plugin-checker-runtime-entry";\n')
+
+      return {
+        code: s.toString(),
+        map: options.sourcemap ? s.generateMap({ hires: true }) : undefined
+      }
+    }
+  }
+}

packages/vite/src/vite.ts

@@ -123,8 +123,6 @@ export async function bundle (nuxt: Nuxt) {
     ctx.config.build!.watch = undefined
   }
 
-  await nuxt.callHook('vite:extend', ctx)
-
   // Add type-checking
   if (ctx.nuxt.options.typescript.typeCheck === true || (ctx.nuxt.options.typescript.typeCheck === 'build' && !ctx.nuxt.options.dev)) {
     const checker = await import('vite-plugin-checker').then(r => r.default)
@@ -132,9 +130,11 @@ export async function bundle (nuxt: Nuxt) {
       vueTsc: {
         tsconfigPath: await resolveTSConfig(ctx.nuxt.options.rootDir)
       }
-    }), { client: !nuxt.options.ssr, server: nuxt.options.ssr })
+    }), { server: nuxt.options.ssr })
   }
 
+  await nuxt.callHook('vite:extend', ctx)
+
   nuxt.hook('vite:serverCreated', (server: vite.ViteDevServer, env) => {
     // Invalidate virtual modules when templates are re-generated
     ctx.nuxt.hook('app:templatesGenerated', () => {