2020-05-20 07:00:50 +02:00
|
|
|
|
import { getOverlayMiddleware } from '@next/react-dev-overlay/lib/middleware'
|
2020-02-12 02:16:42 +01:00
|
|
|
|
import { NextHandleFunction } from 'connect'
|
2019-10-04 18:11:39 +02:00
|
|
|
|
import { IncomingMessage, ServerResponse } from 'http'
|
2020-04-18 00:40:00 +02:00
|
|
|
|
import WebpackDevMiddleware from 'next/dist/compiled/webpack-dev-middleware'
|
|
|
|
|
import WebpackHotMiddleware from 'next/dist/compiled/webpack-hot-middleware'
|
2019-10-04 18:11:39 +02:00
|
|
|
|
import { join, normalize, relative as relativePath, sep } from 'path'
|
2020-02-12 02:16:42 +01:00
|
|
|
|
import { UrlObject } from 'url'
|
2019-10-04 18:11:39 +02:00
|
|
|
|
import webpack from 'webpack'
|
|
|
|
|
import { createEntrypoints, createPagesMapping } from '../build/entries'
|
|
|
|
|
import { watchCompilers } from '../build/output'
|
2018-12-03 14:18:52 +01:00
|
|
|
|
import getBaseWebpackConfig from '../build/webpack-config'
|
2020-05-20 07:00:50 +02:00
|
|
|
|
import { API_ROUTE, NEXT_PROJECT_ROOT_DIST_CLIENT } from '../lib/constants'
|
2019-10-04 18:11:39 +02:00
|
|
|
|
import { recursiveDelete } from '../lib/recursive-delete'
|
2019-05-29 13:57:26 +02:00
|
|
|
|
import {
|
2019-10-04 18:11:39 +02:00
|
|
|
|
BLOCKED_PAGES,
|
|
|
|
|
CLIENT_STATIC_FILES_RUNTIME_AMP,
|
2020-04-19 19:58:31 +02:00
|
|
|
|
CLIENT_STATIC_FILES_RUNTIME_REACT_REFRESH,
|
2019-09-04 16:00:54 +02:00
|
|
|
|
} from '../next-server/lib/constants'
|
2020-02-12 02:16:42 +01:00
|
|
|
|
import { __ApiPreviewProps } from '../next-server/server/api-utils'
|
2019-09-04 16:00:54 +02:00
|
|
|
|
import { route } from '../next-server/server/router'
|
2019-10-04 18:11:39 +02:00
|
|
|
|
import errorOverlayMiddleware from './lib/error-overlay-middleware'
|
2019-02-24 22:08:35 +01:00
|
|
|
|
import { findPageFile } from './lib/find-page-file'
|
2020-06-04 19:32:45 +02:00
|
|
|
|
import onDemandEntryHandler from './on-demand-entry-handler'
|
|
|
|
|
import {
|
|
|
|
|
denormalizePagePath,
|
|
|
|
|
normalizePathSep,
|
|
|
|
|
} from '../next-server/server/normalize-page-path'
|
|
|
|
|
import getRouteFromEntrypoint from '../next-server/server/get-route-from-entrypoint'
|
2019-04-28 20:08:38 +02:00
|
|
|
|
|
2019-10-04 18:11:39 +02:00
|
|
|
|
export async function renderScriptError(res: ServerResponse, error: Error) {
|
2018-12-06 16:47:10 +01:00
|
|
|
|
// Asks CDNs and others to not to cache the errored page
|
2019-05-29 13:57:26 +02:00
|
|
|
|
res.setHeader(
|
|
|
|
|
'Cache-Control',
|
|
|
|
|
'no-cache, no-store, max-age=0, must-revalidate'
|
|
|
|
|
)
|
2018-12-06 16:47:10 +01:00
|
|
|
|
|
2019-10-04 18:11:39 +02:00
|
|
|
|
if (
|
|
|
|
|
(error as any).code === 'ENOENT' ||
|
|
|
|
|
error.message === 'INVALID_BUILD_ID'
|
|
|
|
|
) {
|
2018-12-06 16:47:10 +01:00
|
|
|
|
res.statusCode = 404
|
|
|
|
|
res.end('404 - Not Found')
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
console.error(error.stack)
|
|
|
|
|
res.statusCode = 500
|
|
|
|
|
res.end('500 - Internal Error')
|
|
|
|
|
}
|
2018-10-02 00:55:31 +02:00
|
|
|
|
|
2019-10-04 18:11:39 +02:00
|
|
|
|
function addCorsSupport(req: IncomingMessage, res: ServerResponse) {
|
2020-05-16 23:15:12 +02:00
|
|
|
|
const isApiRoute = req.url!.match(API_ROUTE)
|
|
|
|
|
// API routes handle their own CORS headers
|
|
|
|
|
if (isApiRoute) {
|
|
|
|
|
return { preflight: false }
|
|
|
|
|
}
|
|
|
|
|
|
2018-10-02 00:55:31 +02:00
|
|
|
|
if (!req.headers.origin) {
|
|
|
|
|
return { preflight: false }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
res.setHeader('Access-Control-Allow-Origin', req.headers.origin)
|
|
|
|
|
res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET')
|
|
|
|
|
// Based on https://github.com/primus/access-control/blob/4cf1bc0e54b086c91e6aa44fb14966fa5ef7549c/index.js#L158
|
|
|
|
|
if (req.headers['access-control-request-headers']) {
|
2019-11-11 04:24:53 +01:00
|
|
|
|
res.setHeader(
|
|
|
|
|
'Access-Control-Allow-Headers',
|
|
|
|
|
req.headers['access-control-request-headers'] as string
|
|
|
|
|
)
|
2018-10-02 00:55:31 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (req.method === 'OPTIONS') {
|
|
|
|
|
res.writeHead(200)
|
|
|
|
|
res.end()
|
|
|
|
|
return { preflight: true }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return { preflight: false }
|
|
|
|
|
}
|
|
|
|
|
|
2019-05-29 13:57:26 +02:00
|
|
|
|
const matchNextPageBundleRequest = route(
|
2020-06-20 21:59:47 +02:00
|
|
|
|
'/_next/static/pages/:path*.js(\\.map|)'
|
2019-05-29 13:57:26 +02:00
|
|
|
|
)
|
2018-07-24 11:24:40 +02:00
|
|
|
|
|
|
|
|
|
// Recursively look up the issuer till it ends up at the root
|
2019-10-04 18:11:39 +02:00
|
|
|
|
function findEntryModule(issuer: any): any {
|
2018-07-24 11:24:40 +02:00
|
|
|
|
if (issuer.issuer) {
|
|
|
|
|
return findEntryModule(issuer.issuer)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return issuer
|
|
|
|
|
}
|
|
|
|
|
|
2019-10-04 18:11:39 +02:00
|
|
|
|
function erroredPages(
|
|
|
|
|
compilation: webpack.compilation.Compilation,
|
|
|
|
|
options = { enhanceName: (name: string) => name }
|
|
|
|
|
) {
|
|
|
|
|
const failedPages: { [page: string]: any[] } = {}
|
2018-07-24 11:24:40 +02:00
|
|
|
|
for (const error of compilation.errors) {
|
2019-05-08 03:11:56 +02:00
|
|
|
|
if (!error.origin) {
|
|
|
|
|
continue
|
|
|
|
|
}
|
|
|
|
|
|
2018-07-24 11:24:40 +02:00
|
|
|
|
const entryModule = findEntryModule(error.origin)
|
2019-02-19 22:45:07 +01:00
|
|
|
|
const { name } = entryModule
|
2018-07-24 11:24:40 +02:00
|
|
|
|
if (!name) {
|
|
|
|
|
continue
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Only pages have to be reloaded
|
2020-06-20 21:59:47 +02:00
|
|
|
|
if (!getRouteFromEntrypoint(name)) {
|
2018-07-24 11:24:40 +02:00
|
|
|
|
continue
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const enhancedName = options.enhanceName(name)
|
|
|
|
|
|
|
|
|
|
if (!failedPages[enhancedName]) {
|
|
|
|
|
failedPages[enhancedName] = []
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
failedPages[enhancedName].push(error)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return failedPages
|
|
|
|
|
}
|
2017-06-05 17:07:20 +02:00
|
|
|
|
|
2016-10-14 17:05:08 +02:00
|
|
|
|
export default class HotReloader {
|
2019-10-04 18:11:39 +02:00
|
|
|
|
private dir: string
|
|
|
|
|
private buildId: string
|
|
|
|
|
private middlewares: any[]
|
|
|
|
|
private pagesDir: string
|
|
|
|
|
private webpackDevMiddleware: WebpackDevMiddleware.WebpackDevMiddleware | null
|
|
|
|
|
private webpackHotMiddleware:
|
|
|
|
|
| (NextHandleFunction & WebpackHotMiddleware.EventStream)
|
|
|
|
|
| null
|
|
|
|
|
private initialized: boolean
|
|
|
|
|
private config: any
|
|
|
|
|
private stats: any
|
2020-05-20 07:00:50 +02:00
|
|
|
|
private serverStats: any
|
2019-10-04 18:11:39 +02:00
|
|
|
|
private serverPrevDocumentHash: string | null
|
|
|
|
|
private prevChunkNames?: Set<any>
|
|
|
|
|
private onDemandEntries: any
|
2020-02-12 02:16:42 +01:00
|
|
|
|
private previewProps: __ApiPreviewProps
|
2019-10-04 18:11:39 +02:00
|
|
|
|
|
|
|
|
|
constructor(
|
|
|
|
|
dir: string,
|
|
|
|
|
{
|
|
|
|
|
config,
|
|
|
|
|
pagesDir,
|
|
|
|
|
buildId,
|
2020-02-12 02:16:42 +01:00
|
|
|
|
previewProps,
|
|
|
|
|
}: {
|
|
|
|
|
config: object
|
|
|
|
|
pagesDir: string
|
|
|
|
|
buildId: string
|
|
|
|
|
previewProps: __ApiPreviewProps
|
|
|
|
|
}
|
2019-10-04 18:11:39 +02:00
|
|
|
|
) {
|
2018-06-25 23:06:46 +02:00
|
|
|
|
this.buildId = buildId
|
2016-10-17 09:05:46 +02:00
|
|
|
|
this.dir = dir
|
2016-11-23 19:32:49 +01:00
|
|
|
|
this.middlewares = []
|
2019-09-24 17:15:14 +02:00
|
|
|
|
this.pagesDir = pagesDir
|
2016-11-23 19:32:49 +01:00
|
|
|
|
this.webpackDevMiddleware = null
|
|
|
|
|
this.webpackHotMiddleware = null
|
2016-10-31 11:51:03 +01:00
|
|
|
|
this.initialized = false
|
2016-10-19 14:41:45 +02:00
|
|
|
|
this.stats = null
|
2020-05-20 07:00:50 +02:00
|
|
|
|
this.serverStats = null
|
2018-07-24 11:24:40 +02:00
|
|
|
|
this.serverPrevDocumentHash = null
|
2017-02-26 20:45:16 +01:00
|
|
|
|
|
2018-02-14 16:17:41 +01:00
|
|
|
|
this.config = config
|
2020-02-12 02:16:42 +01:00
|
|
|
|
this.previewProps = previewProps
|
2016-10-17 09:05:46 +02:00
|
|
|
|
}
|
|
|
|
|
|
2020-05-31 23:28:23 +02:00
|
|
|
|
public async run(
|
|
|
|
|
req: IncomingMessage,
|
|
|
|
|
res: ServerResponse,
|
|
|
|
|
parsedUrl: UrlObject
|
|
|
|
|
) {
|
2018-01-30 16:40:52 +01:00
|
|
|
|
// Usually CORS support is not needed for the hot-reloader (this is dev only feature)
|
|
|
|
|
// With when the app runs for multi-zones support behind a proxy,
|
|
|
|
|
// the current page is trying to access this URL via assetPrefix.
|
|
|
|
|
// That's when the CORS support is needed.
|
|
|
|
|
const { preflight } = addCorsSupport(req, res)
|
|
|
|
|
if (preflight) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
2018-07-25 13:45:42 +02:00
|
|
|
|
// When a request comes in that is a page bundle, e.g. /_next/static/<buildid>/pages/index.js
|
|
|
|
|
// we have to compile the page using on-demand-entries, this middleware will handle doing that
|
|
|
|
|
// by adding the page to on-demand-entries, waiting till it's done
|
|
|
|
|
// and then the bundle will be served like usual by the actual route in server/index.js
|
2019-10-04 18:11:39 +02:00
|
|
|
|
const handlePageBundleRequest = async (
|
2020-06-01 23:00:22 +02:00
|
|
|
|
pageBundleRes: ServerResponse,
|
|
|
|
|
parsedPageBundleUrl: UrlObject
|
2020-05-24 14:38:27 +02:00
|
|
|
|
): Promise<{ finished?: true }> => {
|
2020-06-01 23:00:22 +02:00
|
|
|
|
const { pathname } = parsedPageBundleUrl
|
2020-06-20 21:59:47 +02:00
|
|
|
|
const params: { path: string[] } | null = matchNextPageBundleRequest(
|
|
|
|
|
pathname
|
|
|
|
|
)
|
2018-07-25 13:45:42 +02:00
|
|
|
|
if (!params) {
|
|
|
|
|
return {}
|
|
|
|
|
}
|
|
|
|
|
|
2020-06-04 19:32:45 +02:00
|
|
|
|
const page = denormalizePagePath(`/${params.path.join('/')}`)
|
2019-02-03 15:34:28 +01:00
|
|
|
|
if (page === '/_error' || BLOCKED_PAGES.indexOf(page) === -1) {
|
2018-07-25 13:45:42 +02:00
|
|
|
|
try {
|
|
|
|
|
await this.ensurePage(page)
|
|
|
|
|
} catch (error) {
|
2020-06-01 23:00:22 +02:00
|
|
|
|
await renderScriptError(pageBundleRes, error)
|
2019-02-19 22:45:07 +01:00
|
|
|
|
return { finished: true }
|
2018-07-25 13:45:42 +02:00
|
|
|
|
}
|
|
|
|
|
|
2019-04-28 20:08:38 +02:00
|
|
|
|
const bundlePath = join(
|
|
|
|
|
this.dir,
|
|
|
|
|
this.config.distDir,
|
2019-12-16 18:45:48 +01:00
|
|
|
|
'server/static/development/pages',
|
2019-05-29 13:57:26 +02:00
|
|
|
|
page + '.js'
|
2019-04-28 20:08:38 +02:00
|
|
|
|
)
|
|
|
|
|
|
2019-12-16 18:45:48 +01:00
|
|
|
|
// Make sure to 404 for AMP first pages
|
2019-04-28 20:08:38 +02:00
|
|
|
|
try {
|
2019-12-16 18:45:48 +01:00
|
|
|
|
const mod = require(bundlePath)
|
2020-01-08 17:30:53 +01:00
|
|
|
|
if (mod?.config?.amp === true) {
|
2020-06-01 23:00:22 +02:00
|
|
|
|
pageBundleRes.statusCode = 404
|
|
|
|
|
pageBundleRes.end()
|
2019-04-28 20:08:38 +02:00
|
|
|
|
return { finished: true }
|
|
|
|
|
}
|
|
|
|
|
} catch (_) {}
|
|
|
|
|
|
2018-07-25 13:45:42 +02:00
|
|
|
|
const errors = await this.getCompilationErrors(page)
|
|
|
|
|
if (errors.length > 0) {
|
2020-06-01 23:00:22 +02:00
|
|
|
|
await renderScriptError(pageBundleRes, errors[0])
|
2019-02-19 22:45:07 +01:00
|
|
|
|
return { finished: true }
|
2018-07-25 13:45:42 +02:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {}
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-24 14:38:27 +02:00
|
|
|
|
const { finished } = await handlePageBundleRequest(res, parsedUrl)
|
2018-07-25 13:45:42 +02:00
|
|
|
|
|
2016-11-23 19:32:49 +01:00
|
|
|
|
for (const fn of this.middlewares) {
|
|
|
|
|
await new Promise((resolve, reject) => {
|
2019-10-04 18:11:39 +02:00
|
|
|
|
fn(req, res, (err: Error) => {
|
2017-01-08 03:02:29 +01:00
|
|
|
|
if (err) return reject(err)
|
2016-11-23 19:32:49 +01:00
|
|
|
|
resolve()
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
2018-07-25 13:45:42 +02:00
|
|
|
|
|
2019-02-19 22:45:07 +01:00
|
|
|
|
return { finished }
|
2016-10-17 09:05:46 +02:00
|
|
|
|
}
|
|
|
|
|
|
2020-05-31 23:28:23 +02:00
|
|
|
|
private async clean(): Promise<void> {
|
2019-11-19 17:40:13 +01:00
|
|
|
|
return recursiveDelete(join(this.dir, this.config.distDir), /^cache/)
|
2018-02-14 16:17:41 +01:00
|
|
|
|
}
|
|
|
|
|
|
2020-05-31 23:28:23 +02:00
|
|
|
|
private async getWebpackConfig() {
|
2019-02-24 22:08:35 +01:00
|
|
|
|
const pagePaths = await Promise.all([
|
2019-09-24 17:15:14 +02:00
|
|
|
|
findPageFile(this.pagesDir, '/_app', this.config.pageExtensions),
|
2019-10-04 18:11:39 +02:00
|
|
|
|
findPageFile(this.pagesDir, '/_document', this.config.pageExtensions),
|
2019-02-24 22:08:35 +01:00
|
|
|
|
])
|
|
|
|
|
|
2019-05-29 13:57:26 +02:00
|
|
|
|
const pages = createPagesMapping(
|
2020-05-18 21:24:37 +02:00
|
|
|
|
pagePaths.filter((i) => i !== null) as string[],
|
2019-05-29 13:57:26 +02:00
|
|
|
|
this.config.pageExtensions
|
|
|
|
|
)
|
|
|
|
|
const entrypoints = createEntrypoints(
|
|
|
|
|
pages,
|
|
|
|
|
'server',
|
|
|
|
|
this.buildId,
|
2020-02-12 02:16:42 +01:00
|
|
|
|
this.previewProps,
|
2020-05-26 21:01:57 +02:00
|
|
|
|
this.config,
|
|
|
|
|
[]
|
2019-05-29 13:57:26 +02:00
|
|
|
|
)
|
2019-02-25 23:00:14 +01:00
|
|
|
|
|
2019-10-04 18:11:39 +02:00
|
|
|
|
let additionalClientEntrypoints: { [file: string]: string } = {}
|
2019-05-29 13:57:26 +02:00
|
|
|
|
additionalClientEntrypoints[CLIENT_STATIC_FILES_RUNTIME_AMP] =
|
|
|
|
|
`.${sep}` +
|
2019-06-05 20:15:42 +02:00
|
|
|
|
relativePath(
|
|
|
|
|
this.dir,
|
|
|
|
|
join(NEXT_PROJECT_ROOT_DIST_CLIENT, 'dev', 'amp-dev')
|
|
|
|
|
)
|
2019-02-25 23:00:14 +01:00
|
|
|
|
|
2020-04-19 19:58:31 +02:00
|
|
|
|
additionalClientEntrypoints[
|
|
|
|
|
CLIENT_STATIC_FILES_RUNTIME_REACT_REFRESH
|
|
|
|
|
] = require.resolve(`@next/react-refresh-utils/runtime`)
|
|
|
|
|
|
2019-04-22 20:57:02 +02:00
|
|
|
|
return Promise.all([
|
2019-05-29 13:57:26 +02:00
|
|
|
|
getBaseWebpackConfig(this.dir, {
|
|
|
|
|
dev: true,
|
|
|
|
|
isServer: false,
|
|
|
|
|
config: this.config,
|
|
|
|
|
buildId: this.buildId,
|
2019-09-24 17:15:14 +02:00
|
|
|
|
pagesDir: this.pagesDir,
|
2019-10-04 18:11:39 +02:00
|
|
|
|
entrypoints: { ...entrypoints.client, ...additionalClientEntrypoints },
|
2019-05-29 13:57:26 +02:00
|
|
|
|
}),
|
|
|
|
|
getBaseWebpackConfig(this.dir, {
|
|
|
|
|
dev: true,
|
|
|
|
|
isServer: true,
|
|
|
|
|
config: this.config,
|
|
|
|
|
buildId: this.buildId,
|
2019-09-24 17:15:14 +02:00
|
|
|
|
pagesDir: this.pagesDir,
|
2019-10-04 18:11:39 +02:00
|
|
|
|
entrypoints: entrypoints.server,
|
|
|
|
|
}),
|
2019-04-22 20:57:02 +02:00
|
|
|
|
])
|
2019-01-08 23:10:32 +01:00
|
|
|
|
}
|
|
|
|
|
|
2020-05-31 23:28:23 +02:00
|
|
|
|
public async start(): Promise<void> {
|
2018-02-14 16:17:41 +01:00
|
|
|
|
await this.clean()
|
2018-01-30 16:40:52 +01:00
|
|
|
|
|
2019-01-08 23:10:32 +01:00
|
|
|
|
const configs = await this.getWebpackConfig()
|
2016-12-16 21:33:08 +01:00
|
|
|
|
|
2018-07-24 11:24:40 +02:00
|
|
|
|
const multiCompiler = webpack(configs)
|
2018-01-30 16:40:52 +01:00
|
|
|
|
|
2018-07-24 11:24:40 +02:00
|
|
|
|
const buildTools = await this.prepareBuildTools(multiCompiler)
|
2017-06-07 00:32:02 +02:00
|
|
|
|
this.assignBuildTools(buildTools)
|
|
|
|
|
|
2020-05-20 07:00:50 +02:00
|
|
|
|
// [Client, Server]
|
|
|
|
|
;[
|
|
|
|
|
this.stats,
|
|
|
|
|
this.serverStats,
|
|
|
|
|
] = ((await this.waitUntilValid()) as any).stats
|
2016-10-17 09:05:46 +02:00
|
|
|
|
}
|
|
|
|
|
|
2020-05-31 23:28:23 +02:00
|
|
|
|
public async stop(
|
2020-05-18 19:31:06 +02:00
|
|
|
|
webpackDevMiddleware?: WebpackDevMiddleware.WebpackDevMiddleware
|
|
|
|
|
): Promise<void> {
|
2017-06-07 00:32:02 +02:00
|
|
|
|
const middleware = webpackDevMiddleware || this.webpackDevMiddleware
|
|
|
|
|
if (middleware) {
|
2016-12-17 05:04:40 +01:00
|
|
|
|
return new Promise((resolve, reject) => {
|
2019-10-04 18:11:39 +02:00
|
|
|
|
;(middleware.close as any)((err: any) => {
|
2017-01-08 03:02:29 +01:00
|
|
|
|
if (err) return reject(err)
|
2016-12-17 05:04:40 +01:00
|
|
|
|
resolve()
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-31 23:28:23 +02:00
|
|
|
|
private assignBuildTools({
|
2019-05-29 13:57:26 +02:00
|
|
|
|
webpackDevMiddleware,
|
|
|
|
|
webpackHotMiddleware,
|
2019-10-04 18:11:39 +02:00
|
|
|
|
onDemandEntries,
|
|
|
|
|
}: {
|
|
|
|
|
webpackDevMiddleware: WebpackDevMiddleware.WebpackDevMiddleware
|
|
|
|
|
webpackHotMiddleware: NextHandleFunction & WebpackHotMiddleware.EventStream
|
|
|
|
|
onDemandEntries: any
|
2020-05-18 19:31:06 +02:00
|
|
|
|
}): void {
|
2017-06-07 00:32:02 +02:00
|
|
|
|
this.webpackDevMiddleware = webpackDevMiddleware
|
|
|
|
|
this.webpackHotMiddleware = webpackHotMiddleware
|
|
|
|
|
this.onDemandEntries = onDemandEntries
|
|
|
|
|
this.middlewares = [
|
|
|
|
|
webpackDevMiddleware,
|
2019-04-21 22:51:09 +02:00
|
|
|
|
// must come before hotMiddleware
|
|
|
|
|
onDemandEntries.middleware(),
|
2017-06-07 00:32:02 +02:00
|
|
|
|
webpackHotMiddleware,
|
2019-10-04 18:11:39 +02:00
|
|
|
|
errorOverlayMiddleware({ dir: this.dir }),
|
2020-05-20 07:00:50 +02:00
|
|
|
|
getOverlayMiddleware({
|
2020-04-30 16:50:25 +02:00
|
|
|
|
rootDirectory: this.dir,
|
|
|
|
|
stats: () => this.stats,
|
2020-05-20 07:00:50 +02:00
|
|
|
|
serverStats: () => this.serverStats,
|
2020-04-30 16:50:25 +02:00
|
|
|
|
}),
|
2017-06-07 00:32:02 +02:00
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-31 23:28:23 +02:00
|
|
|
|
private async prepareBuildTools(multiCompiler: webpack.MultiCompiler) {
|
2020-05-15 19:30:01 +02:00
|
|
|
|
watchCompilers(multiCompiler.compilers[0], multiCompiler.compilers[1])
|
2019-05-08 03:11:56 +02:00
|
|
|
|
|
2018-07-24 11:24:40 +02:00
|
|
|
|
// This plugin watches for changes to _document.js and notifies the client side that it should reload the page
|
2019-05-29 13:57:26 +02:00
|
|
|
|
multiCompiler.compilers[1].hooks.done.tap(
|
|
|
|
|
'NextjsHotReloaderForServer',
|
2020-05-18 21:24:37 +02:00
|
|
|
|
(stats) => {
|
2020-05-20 07:00:50 +02:00
|
|
|
|
this.serverStats = stats
|
2019-05-29 13:57:26 +02:00
|
|
|
|
if (!this.initialized) {
|
|
|
|
|
return
|
|
|
|
|
}
|
2016-10-24 09:22:15 +02:00
|
|
|
|
|
2019-05-29 13:57:26 +02:00
|
|
|
|
const { compilation } = stats
|
2018-07-24 11:24:40 +02:00
|
|
|
|
|
2019-05-29 13:57:26 +02:00
|
|
|
|
// We only watch `_document` for changes on the server compilation
|
|
|
|
|
// the rest of the files will be triggered by the client compilation
|
|
|
|
|
const documentChunk = compilation.chunks.find(
|
2020-06-22 23:12:36 +02:00
|
|
|
|
(c) => c.name === normalize(`pages/_document`)
|
2019-05-29 13:57:26 +02:00
|
|
|
|
)
|
|
|
|
|
// If the document chunk can't be found we do nothing
|
|
|
|
|
if (!documentChunk) {
|
|
|
|
|
console.warn('_document.js chunk not found')
|
|
|
|
|
return
|
|
|
|
|
}
|
2018-07-24 11:24:40 +02:00
|
|
|
|
|
2019-05-29 13:57:26 +02:00
|
|
|
|
// Initial value
|
|
|
|
|
if (this.serverPrevDocumentHash === null) {
|
|
|
|
|
this.serverPrevDocumentHash = documentChunk.hash
|
|
|
|
|
return
|
|
|
|
|
}
|
2018-07-24 11:24:40 +02:00
|
|
|
|
|
2019-05-29 13:57:26 +02:00
|
|
|
|
// If _document.js didn't change we don't trigger a reload
|
|
|
|
|
if (documentChunk.hash === this.serverPrevDocumentHash) {
|
|
|
|
|
return
|
|
|
|
|
}
|
2018-07-24 11:24:40 +02:00
|
|
|
|
|
2019-05-29 13:57:26 +02:00
|
|
|
|
// Notify reload to reload the page, as _document.js was changed (different hash)
|
|
|
|
|
this.send('reloadPage')
|
|
|
|
|
this.serverPrevDocumentHash = documentChunk.hash
|
|
|
|
|
}
|
|
|
|
|
)
|
2016-10-14 17:05:08 +02:00
|
|
|
|
|
2019-05-29 13:57:26 +02:00
|
|
|
|
multiCompiler.compilers[0].hooks.done.tap(
|
|
|
|
|
'NextjsHotReloaderForClient',
|
2020-05-18 21:24:37 +02:00
|
|
|
|
(stats) => {
|
2019-05-29 13:57:26 +02:00
|
|
|
|
const { compilation } = stats
|
|
|
|
|
const chunkNames = new Set(
|
|
|
|
|
compilation.chunks
|
2020-05-18 21:24:37 +02:00
|
|
|
|
.map((c) => c.name)
|
2020-06-20 21:59:47 +02:00
|
|
|
|
.filter((name) => !!getRouteFromEntrypoint(name))
|
2019-05-29 13:57:26 +02:00
|
|
|
|
)
|
2017-06-05 17:07:20 +02:00
|
|
|
|
|
2019-05-29 13:57:26 +02:00
|
|
|
|
if (this.initialized) {
|
|
|
|
|
// detect chunks which have to be replaced with a new template
|
|
|
|
|
// e.g, pages/index.js <-> pages/_error.js
|
2019-10-04 18:11:39 +02:00
|
|
|
|
const addedPages = diff(chunkNames, this.prevChunkNames!)
|
|
|
|
|
const removedPages = diff(this.prevChunkNames!, chunkNames)
|
2019-05-29 13:57:26 +02:00
|
|
|
|
|
|
|
|
|
if (addedPages.size > 0) {
|
|
|
|
|
for (const addedPage of addedPages) {
|
2020-06-04 19:32:45 +02:00
|
|
|
|
const page = getRouteFromEntrypoint(addedPage)
|
2019-05-29 13:57:26 +02:00
|
|
|
|
this.send('addedPage', page)
|
|
|
|
|
}
|
2019-01-08 23:10:32 +01:00
|
|
|
|
}
|
2016-11-24 15:03:16 +01:00
|
|
|
|
|
2019-05-29 13:57:26 +02:00
|
|
|
|
if (removedPages.size > 0) {
|
|
|
|
|
for (const removedPage of removedPages) {
|
2020-06-04 19:32:45 +02:00
|
|
|
|
const page = getRouteFromEntrypoint(removedPage)
|
2019-05-29 13:57:26 +02:00
|
|
|
|
this.send('removedPage', page)
|
|
|
|
|
}
|
2019-01-08 23:10:32 +01:00
|
|
|
|
}
|
2016-11-24 15:03:16 +01:00
|
|
|
|
}
|
2016-10-24 17:20:50 +02:00
|
|
|
|
|
2019-05-29 13:57:26 +02:00
|
|
|
|
this.initialized = true
|
|
|
|
|
this.stats = stats
|
|
|
|
|
this.prevChunkNames = chunkNames
|
|
|
|
|
}
|
|
|
|
|
)
|
2016-10-19 14:41:45 +02:00
|
|
|
|
|
2018-10-28 23:01:45 +01:00
|
|
|
|
// We don’t watch .git/ .next/ and node_modules for changes
|
2017-01-19 08:09:40 +01:00
|
|
|
|
const ignored = [
|
2018-10-28 23:01:45 +01:00
|
|
|
|
/[\\/]\.git[\\/]/,
|
|
|
|
|
/[\\/]\.next[\\/]/,
|
2019-10-04 18:11:39 +02:00
|
|
|
|
/[\\/]node_modules[\\/]/,
|
2017-01-19 08:09:40 +01:00
|
|
|
|
]
|
2016-11-28 15:04:59 +01:00
|
|
|
|
|
2017-05-14 01:44:21 +02:00
|
|
|
|
let webpackDevMiddlewareConfig = {
|
2018-07-24 11:24:40 +02:00
|
|
|
|
publicPath: `/_next/static/webpack`,
|
2016-10-17 09:05:46 +02:00
|
|
|
|
noInfo: true,
|
2018-07-24 11:24:40 +02:00
|
|
|
|
logLevel: 'silent',
|
2018-11-02 19:47:56 +01:00
|
|
|
|
watchOptions: { ignored },
|
2019-10-04 18:11:39 +02:00
|
|
|
|
writeToDisk: true,
|
2017-05-14 01:44:21 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (this.config.webpackDevMiddleware) {
|
2019-05-29 13:57:26 +02:00
|
|
|
|
console.log(
|
2019-11-11 04:24:53 +01:00
|
|
|
|
`> Using "webpackDevMiddleware" config function defined in ${this.config.configOrigin}.`
|
2019-05-29 13:57:26 +02:00
|
|
|
|
)
|
|
|
|
|
webpackDevMiddlewareConfig = this.config.webpackDevMiddleware(
|
|
|
|
|
webpackDevMiddlewareConfig
|
|
|
|
|
)
|
2017-05-14 01:44:21 +02:00
|
|
|
|
}
|
|
|
|
|
|
2019-05-29 13:57:26 +02:00
|
|
|
|
const webpackDevMiddleware = WebpackDevMiddleware(
|
|
|
|
|
multiCompiler,
|
|
|
|
|
webpackDevMiddlewareConfig
|
|
|
|
|
)
|
2016-11-23 19:32:49 +01:00
|
|
|
|
|
2019-05-29 13:57:26 +02:00
|
|
|
|
const webpackHotMiddleware = WebpackHotMiddleware(
|
|
|
|
|
multiCompiler.compilers[0],
|
|
|
|
|
{
|
|
|
|
|
path: '/_next/webpack-hmr',
|
|
|
|
|
log: false,
|
2019-10-04 18:11:39 +02:00
|
|
|
|
heartbeat: 2500,
|
2019-05-29 13:57:26 +02:00
|
|
|
|
}
|
|
|
|
|
)
|
2018-01-30 16:40:52 +01:00
|
|
|
|
|
2019-05-29 13:57:26 +02:00
|
|
|
|
const onDemandEntries = onDemandEntryHandler(
|
|
|
|
|
webpackDevMiddleware,
|
|
|
|
|
multiCompiler,
|
|
|
|
|
{
|
2019-09-24 17:15:14 +02:00
|
|
|
|
pagesDir: this.pagesDir,
|
2019-05-29 13:57:26 +02:00
|
|
|
|
pageExtensions: this.config.pageExtensions,
|
2020-04-18 00:40:00 +02:00
|
|
|
|
...(this.config.onDemandEntries as {
|
|
|
|
|
maxInactiveAge: number
|
|
|
|
|
pagesBufferLength: number
|
|
|
|
|
}),
|
2019-05-29 13:57:26 +02:00
|
|
|
|
}
|
|
|
|
|
)
|
2016-11-23 19:32:49 +01:00
|
|
|
|
|
2017-06-07 00:32:02 +02:00
|
|
|
|
return {
|
|
|
|
|
webpackDevMiddleware,
|
|
|
|
|
webpackHotMiddleware,
|
2019-10-04 18:11:39 +02:00
|
|
|
|
onDemandEntries,
|
2017-06-07 00:32:02 +02:00
|
|
|
|
}
|
2016-10-14 17:05:08 +02:00
|
|
|
|
}
|
|
|
|
|
|
2020-05-31 23:28:23 +02:00
|
|
|
|
private waitUntilValid(): Promise<webpack.Stats> {
|
2020-05-18 21:24:37 +02:00
|
|
|
|
return new Promise((resolve) => {
|
2020-05-31 23:28:23 +02:00
|
|
|
|
this.webpackDevMiddleware!.waitUntilValid(resolve)
|
2016-10-14 17:05:08 +02:00
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-31 23:28:23 +02:00
|
|
|
|
public async getCompilationErrors(page: string) {
|
2020-06-04 19:32:45 +02:00
|
|
|
|
const normalizedPage = normalizePathSep(page)
|
2017-06-07 00:32:02 +02:00
|
|
|
|
|
2018-07-24 11:24:40 +02:00
|
|
|
|
if (this.stats.hasErrors()) {
|
2019-02-19 22:45:07 +01:00
|
|
|
|
const { compilation } = this.stats
|
2018-07-24 11:24:40 +02:00
|
|
|
|
const failedPages = erroredPages(compilation, {
|
2019-10-04 18:11:39 +02:00
|
|
|
|
enhanceName(name) {
|
2020-06-04 19:32:45 +02:00
|
|
|
|
return getRouteFromEntrypoint(name) as string
|
2019-10-04 18:11:39 +02:00
|
|
|
|
},
|
2018-07-24 11:24:40 +02:00
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// If there is an error related to the requesting page we display it instead of the first error
|
2019-05-29 13:57:26 +02:00
|
|
|
|
if (
|
|
|
|
|
failedPages[normalizedPage] &&
|
|
|
|
|
failedPages[normalizedPage].length > 0
|
|
|
|
|
) {
|
2018-07-24 11:24:40 +02:00
|
|
|
|
return failedPages[normalizedPage]
|
2016-10-19 14:41:45 +02:00
|
|
|
|
}
|
2018-07-24 11:24:40 +02:00
|
|
|
|
|
|
|
|
|
// If none were found we still have to show the other errors
|
|
|
|
|
return this.stats.compilation.errors
|
2016-10-19 14:41:45 +02:00
|
|
|
|
}
|
|
|
|
|
|
2018-07-24 11:24:40 +02:00
|
|
|
|
return []
|
2016-10-19 14:41:45 +02:00
|
|
|
|
}
|
|
|
|
|
|
2020-05-31 23:28:23 +02:00
|
|
|
|
private send(action: string, ...args: any[]): void {
|
2019-10-04 18:11:39 +02:00
|
|
|
|
this.webpackHotMiddleware!.publish({ action, data: args })
|
2016-10-24 09:22:15 +02:00
|
|
|
|
}
|
2017-02-26 20:45:16 +01:00
|
|
|
|
|
2020-05-31 23:28:23 +02:00
|
|
|
|
public async ensurePage(page: string) {
|
2018-05-16 00:36:24 +02:00
|
|
|
|
// Make sure we don't re-build or dispose prebuilt pages
|
2019-02-03 15:34:28 +01:00
|
|
|
|
if (page !== '/_error' && BLOCKED_PAGES.indexOf(page) !== -1) {
|
2018-05-16 00:36:24 +02:00
|
|
|
|
return
|
|
|
|
|
}
|
2019-04-11 20:59:26 +02:00
|
|
|
|
return this.onDemandEntries.ensurePage(page)
|
2017-02-26 20:45:16 +01:00
|
|
|
|
}
|
2016-10-14 17:05:08 +02:00
|
|
|
|
}
|
2016-10-19 14:41:45 +02:00
|
|
|
|
|
2019-10-04 18:11:39 +02:00
|
|
|
|
function diff(a: Set<any>, b: Set<any>) {
|
2020-05-18 21:24:37 +02:00
|
|
|
|
return new Set([...a].filter((v) => !b.has(v)))
|
2016-10-24 09:22:15 +02:00
|
|
|
|
}
|