fix(webpack): promisify webpack dev/hot handlers using h3.promisifyHandler (#7275)

Author: danielroe

packages/schema/build.config.ts

@@ -35,6 +35,7 @@ export default defineBuildConfig({
     'terser-webpack-plugin',
     'css-minimizer-webpack-plugin',
     'webpack-dev-middleware',
+    'h3',
     'webpack-hot-middleware',
     'postcss',
     'consola',

packages/schema/src/types/hooks.ts

@@ -4,6 +4,7 @@ import type { Compiler, Configuration, Stats } from 'webpack'
 import type { TSConfig } from 'pkg-types'
 import type { InlineConfig as ViteInlineConfig, ViteDevServer } from 'vite'
 import type { Manifest } from 'vue-bundle-renderer'
+import type { Middleware } from 'h3'
 import type { ModuleContainer } from './module'
 import type { NuxtTemplate, Nuxt, NuxtApp } from './nuxt'
 import type { Preset as ImportPreset, Import } from 'unimport'
@@ -159,7 +160,7 @@ export interface NuxtHooks {
   'build:compile': (options: { name: string, compiler: Compiler }) => HookResult
   'build:compiled': (options: { name: string, compiler: Compiler, stats: Stats }) => HookResult
   'build:resources': (mfs?: Compiler['outputFileSystem']) => HookResult
-  'server:devMiddleware': (middleware: (req: IncomingMessage, res: ServerResponse, next: (err?: any) => any) => any) => HookResult
+  'server:devMiddleware': (middleware: Middleware) => HookResult
   'bundler:change': (shortPath: string) => void
   'bundler:error': () => void
   'bundler:done': () => void

packages/webpack/build.config.ts

@@ -19,6 +19,7 @@ export default defineBuildConfig({
     'vue'
   ],
   externals: [
-    '@nuxt/schema'
+    '@nuxt/schema',
+    'h3'
   ]
 })

packages/webpack/src/configs/client.ts

@@ -64,8 +64,8 @@ function clientHMR (ctx: WebpackConfigContext) {
   // Add HMR support
   const app = (config.entry as any).app as any
   app.unshift(
-      // https://github.com/glenjamin/webpack-hot-middleware#config
-      `webpack-hot-middleware/client?${hotMiddlewareClientOptionsStr}`
+    // https://github.com/glenjamin/webpack-hot-middleware#config
+    `webpack-hot-middleware/client?${hotMiddlewareClientOptionsStr}`
   )
 
   config.plugins = config.plugins || []

packages/webpack/src/webpack.ts

@@ -1,6 +1,7 @@
 import type { IncomingMessage, ServerResponse } from 'node:http'
 import pify from 'pify'
 import webpack from 'webpack'
+import { promisifyHandler } from 'h3'
 import webpackDevMiddleware, { API, OutputFileSystem } from 'webpack-dev-middleware'
 import webpackHotMiddleware from 'webpack-hot-middleware'
 import type { Compiler, Watching } from 'webpack'
@@ -97,9 +98,10 @@ async function createDevMiddleware (compiler: Compiler) {
   await nuxt.callHook('webpack:hotMiddleware', hotMiddleware)
 
   // Register devMiddleware on server
-  await nuxt.callHook('server:devMiddleware', async (req: IncomingMessage, res: ServerResponse, next: (error?: any) => void) => {
-    for (const mw of [devMiddleware, hotMiddleware]) {
-      await mw?.(req, res, next)
+  const handlers = [promisifyHandler(devMiddleware), promisifyHandler(hotMiddleware)]
+  await nuxt.callHook('server:devMiddleware', async (req, res, next) => {
+    for (const mw of handlers) {
+      await mw?.(req, res)
     }
     next()
   })