85d87a3795
This expands on https://github.com/vercel/next.js/issues/24070 and ensures we show the dev overlay for additional cases like where `_app` or `_document` have syntax errors causing compilation to not be able to complete. This achieves showing the dev overlay even when compilation fails from a syntax error by doing a third minimal compilation in development with the needed client-side assets to render the dev overlay. ## Bug - [x] Related issues linked using `fixes #number` - [x] Integration tests added x-ref: https://github.com/vercel/next.js/issues/24070
194 lines
5.8 KiB
TypeScript
194 lines
5.8 KiB
TypeScript
// Based on https://github.com/webpack-contrib/webpack-hot-middleware/blob/9708d781ae0e46179cf8ea1a94719de4679aaf53/middleware.js
|
|
// Included License below
|
|
|
|
// Copyright JS Foundation and other contributors
|
|
|
|
// Permission is hereby granted, free of charge, to any person obtaining
|
|
// a copy of this software and associated documentation files (the
|
|
// 'Software'), to deal in the Software without restriction, including
|
|
// without limitation the rights to use, copy, modify, merge, publish,
|
|
// distribute, sublicense, and/or sell copies of the Software, and to
|
|
// permit persons to whom the Software is furnished to do so, subject to
|
|
// the following conditions:
|
|
|
|
// The above copyright notice and this permission notice shall be
|
|
// included in all copies or substantial portions of the Software.
|
|
|
|
// THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
|
|
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
|
// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
|
// CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
|
// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
|
// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
import { webpack } from 'next/dist/compiled/webpack/webpack'
|
|
import http from 'http'
|
|
|
|
export class WebpackHotMiddleware {
|
|
eventStream: EventStream
|
|
latestStats: webpack.Stats | null
|
|
clientLatestStats: webpack.Stats | null
|
|
closed: boolean
|
|
serverError: boolean
|
|
|
|
constructor(compilers: webpack.Compiler[]) {
|
|
this.eventStream = new EventStream()
|
|
this.latestStats = null
|
|
this.clientLatestStats = null
|
|
this.serverError = false
|
|
this.closed = false
|
|
|
|
compilers[0].hooks.invalid.tap(
|
|
'webpack-hot-middleware',
|
|
this.onClientInvalid
|
|
)
|
|
compilers[0].hooks.done.tap('webpack-hot-middleware', this.onClientDone)
|
|
|
|
compilers[1].hooks.invalid.tap(
|
|
'webpack-hot-middleware',
|
|
this.onServerInvalid
|
|
)
|
|
compilers[1].hooks.done.tap('webpack-hot-middleware', this.onServerDone)
|
|
}
|
|
|
|
onServerInvalid = () => {
|
|
if (!this.serverError) return
|
|
|
|
this.serverError = false
|
|
|
|
if (this.clientLatestStats) {
|
|
this.latestStats = this.clientLatestStats
|
|
this.publishStats('built', this.latestStats)
|
|
}
|
|
}
|
|
onClientInvalid = () => {
|
|
if (this.closed || this.serverError) return
|
|
this.latestStats = null
|
|
this.eventStream.publish({ action: 'building' })
|
|
}
|
|
onServerDone = (statsResult: webpack.Stats) => {
|
|
if (this.closed) return
|
|
// Keep hold of latest stats so they can be propagated to new clients
|
|
// this.latestStats = statsResult
|
|
// this.publishStats('built', this.latestStats)
|
|
this.serverError = statsResult.hasErrors()
|
|
|
|
if (this.serverError) {
|
|
this.latestStats = statsResult
|
|
this.publishStats('built', this.latestStats)
|
|
}
|
|
}
|
|
onClientDone = (statsResult: webpack.Stats) => {
|
|
this.clientLatestStats = statsResult
|
|
|
|
if (this.closed || this.serverError) return
|
|
// Keep hold of latest stats so they can be propagated to new clients
|
|
this.latestStats = statsResult
|
|
this.publishStats('built', this.latestStats)
|
|
}
|
|
middleware = (
|
|
req: http.IncomingMessage,
|
|
res: http.ServerResponse,
|
|
next: () => void
|
|
) => {
|
|
if (this.closed) return next()
|
|
if (!req.url?.startsWith('/_next/webpack-hmr')) return next()
|
|
this.eventStream.handler(req, res)
|
|
if (this.latestStats) {
|
|
// Explicitly not passing in `log` fn as we don't want to log again on
|
|
// the server
|
|
this.publishStats('sync', this.latestStats)
|
|
}
|
|
}
|
|
|
|
publishStats = (action: string, statsResult: webpack.Stats) => {
|
|
const stats = statsResult.toJson({
|
|
all: false,
|
|
hash: true,
|
|
warnings: true,
|
|
errors: true,
|
|
})
|
|
|
|
this.eventStream.publish({
|
|
action: action,
|
|
hash: stats.hash,
|
|
warnings: stats.warnings || [],
|
|
errors: stats.errors || [],
|
|
})
|
|
}
|
|
|
|
publish = (payload: any) => {
|
|
if (this.closed) return
|
|
this.eventStream.publish(payload)
|
|
}
|
|
close = () => {
|
|
if (this.closed) return
|
|
// Can't remove compiler plugins, so we just set a flag and noop if closed
|
|
// https://github.com/webpack/tapable/issues/32#issuecomment-350644466
|
|
this.closed = true
|
|
this.eventStream.close()
|
|
}
|
|
}
|
|
|
|
class EventStream {
|
|
clients: Set<http.ServerResponse>
|
|
interval: NodeJS.Timeout
|
|
constructor() {
|
|
this.clients = new Set()
|
|
|
|
this.interval = setInterval(this.heartbeatTick, 2500).unref()
|
|
}
|
|
|
|
heartbeatTick = () => {
|
|
this.everyClient((client) => {
|
|
client.write('data: \uD83D\uDC93\n\n')
|
|
})
|
|
}
|
|
|
|
everyClient(fn: (client: http.ServerResponse) => void) {
|
|
for (const client of this.clients) {
|
|
fn(client)
|
|
}
|
|
}
|
|
|
|
close() {
|
|
clearInterval(this.interval)
|
|
this.everyClient((client) => {
|
|
if (!client.finished) client.end()
|
|
})
|
|
this.clients.clear()
|
|
}
|
|
|
|
handler(req: http.IncomingMessage, res: http.ServerResponse) {
|
|
const headers = {
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Content-Type': 'text/event-stream;charset=utf-8',
|
|
'Cache-Control': 'no-cache, no-transform',
|
|
// While behind nginx, event stream should not be buffered:
|
|
// http://nginx.org/docs/http/ngx_http_proxy_module.html#proxy_buffering
|
|
'X-Accel-Buffering': 'no',
|
|
}
|
|
|
|
const isHttp1 = !(parseInt(req.httpVersion) >= 2)
|
|
if (isHttp1) {
|
|
req.socket.setKeepAlive(true)
|
|
Object.assign(headers, {
|
|
Connection: 'keep-alive',
|
|
})
|
|
}
|
|
|
|
res.writeHead(200, headers)
|
|
res.write('\n')
|
|
this.clients.add(res)
|
|
req.on('close', () => {
|
|
if (!res.finished) res.end()
|
|
this.clients.delete(res)
|
|
})
|
|
}
|
|
|
|
publish(payload: any) {
|
|
this.everyClient((client) => {
|
|
client.write('data: ' + JSON.stringify(payload) + '\n\n')
|
|
})
|
|
}
|
|
}
|