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

This commit is contained in:
Daniel Roe 2022-09-07 09:35:21 +01:00 committed by GitHub
parent 5a69f48244
commit 2bb898fa98
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 12 additions and 7 deletions

View File

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

View File

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

View File

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

View File

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

View File

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