Hot Reloading

Copycompilers[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)
compilers[2].hooks.done.tap('webpack-hot-middleware', this.onEdgeServerDone)
compilers[2].hooks.invalid.tap('webpack-hot-middleware', this.onEdgeServerInvalid)

Copyfunction getStatsForSyncEvent(
  clientStats: { ts: number; stats: webpack.Stats } | null,
  serverStats: { ts: number; stats: webpack.Stats } | null
) {
  if (!clientStats) return serverStats?.stats
  if (!serverStats) return clientStats?.stats
 
  if (serverStats.stats.hasErrors()) {
    return serverStats.stats
  }
 
  return serverStats.ts > clientStats.ts ? serverStats.stats : clientStats.ts
}

CopyonHMR(req, socket: Socket, head, onUpgrade) {
  wsServer.handleUpgrade(req, socket, head, (client) => {
    const clientIssues: EntryIssuesMap = new Map()
    const subscriptions: Map<string, AsyncIterator<any>> = new Map()
 
    const htmlRequestId = req.url
      ? new URL(req.url, 'http://n').searchParams.get('id')
      : null
 
    // Clients with a request ID are inferred App Router clients. If Cache
    // Components is not enabled, we consider those legacy clients. Pages
    // Router clients are also considered legacy clients. TODO: Maybe mark
    // clients as App Router / Pages Router clients explicitly, instead of
    // inferring it from the presence of a request ID.
    if (htmlRequestId) {
      clientsByHtmlRequestId.set(htmlRequestId, client)
      const enableCacheComponents = nextConfig.cacheComponents
      if (enableCacheComponents) {
        onUpgrade(client, { isLegacyClient: false })
        const cacheStatus = cacheStatusesByHtmlRequestId.get(htmlRequestId)
        if (cacheStatus !== undefined) {
          sendToClient(client, {
            type: HMR_MESSAGE_SENT_TO_BROWSER.CACHE_INDICATOR,
            state: cacheStatus,
          })
          cacheStatusesByHtmlRequestId.delete(htmlRequestId)
        }
      } else {
        onUpgrade(client, { isLegacyClient: true })
      }
 
      connectReactDebugChannelForHtmlRequest(
        htmlRequestId,
        sendToClient.bind(null, client)
      )
 
      sendSerializedErrorsToClientForHtmlRequest(
        htmlRequestId,
        sendToClient.bind(null, client)
      )
    } else {
      clientsWithoutHtmlRequestId.add(client)
      onUpgrade(client, { isLegacyClient: true })
    }

Copyfunction parseBinaryMessage(data: ArrayBuffer): HmrMessageSentToBrowser {
  assertByteLength(data, 1)
  const view = new DataView(data)
  const messageType = view.getUint8(0)
 
  switch (messageType) {
    case HMR_MESSAGE_SENT_TO_BROWSER.ERRORS_TO_SHOW_IN_BROWSER: {
      const serializedErrors = new Uint8Array(data, 1)
 
      return {
        type: HMR_MESSAGE_SENT_TO_BROWSER.ERRORS_TO_SHOW_IN_BROWSER,
        serializedErrors,
      }
    }
    case HMR_MESSAGE_SENT_TO_BROWSER.REACT_DEBUG_CHUNK: {
      assertByteLength(data, 2)
      const requestIdLength = view.getUint8(1)
      assertByteLength(data, 2 + requestIdLength)
 
      const requestId = textDecoder.decode(
        new Uint8Array(data, 2, requestIdLength)
      )
 
      const chunk =
        data.byteLength > 2 + requestIdLength
          ? new Uint8Array(data, 2 + requestIdLength)
          : null
 
      return {
        type: HMR_MESSAGE_SENT_TO_BROWSER.REACT_DEBUG_CHUNK,
        requestId,
        chunk,
      }
    }
    default: {
      throw new InvariantError(
        `Invalid binary HMR message of type ${messageType}`
      )
    }
  }
}

Copyif (!self.__next_r) {
  throw new InvariantError(
    `Expected a request ID to be defined for the document via self.__next_r.`
  )
}

Copyexport function useWebSocketPing(webSocket: WebSocket | undefined) {
  const { tree } = useContext(GlobalLayoutRouterContext)
 
  useEffect(() => {
    if (!webSocket) {
      throw new InvariantError('Expected webSocket to be defined in dev mode.')
    }
 
    // Never send pings when using Turbopack as it's not used.
    // Pings were originally used to keep track of active routes in on-demand-entries with webpack.
    if (process.env.TURBOPACK) {
      return
    }
 
    // Taken from on-demand-entries-client.js
    const interval = setInterval(() => {
      if (webSocket.readyState === webSocket.OPEN) {
        webSocket.send(
          JSON.stringify({
            event: 'ping',
            tree,
            appDirRoute: true,
          })
        )
      }
    }, 2500)
    return () => clearInterval(interval)
  }, [tree, webSocket])
}

Copyexport function processMessage(
  message: HmrMessageSentToBrowser,
  sendMessage: (message: string) => void,
  processTurbopackMessage: (msg: TurbopackMessageSentToBrowser) => void,
  staticIndicatorState: StaticIndicatorState
) {
  function handleErrors(errors: ReadonlyArray<unknown>) {
    // "Massage" webpack messages.
    const formatted = formatWebpackMessages({
      errors: errors,
      warnings: [],
    })
 
    // Only show the first error.
    dispatcher.onBuildError(formatted.errors[0])
 
    // Also log them to the console.
    for (let i = 0; i < formatted.errors.length; i++) {
      console.error(stripAnsi(formatted.errors[i]))
    }
 
    // Do not attempt to reload now.
    // We will reload on next success instead.
    if (process.env.__NEXT_TEST_MODE) {
      if (self.__NEXT_HMR_CB) {
        self.__NEXT_HMR_CB(formatted.errors[0])
        self.__NEXT_HMR_CB = null
      }
    }
  }
 
  function handleHotUpdate() {
    if (process.env.TURBOPACK) {
      const hmrUpdate = turbopackHmr!.onBuilt()
      if (hmrUpdate != null) {
        reportHmrLatency(
          sendMessage,
          [...hmrUpdate.updatedModules],
          hmrUpdate.startMsSinceEpoch,
          hmrUpdate.endMsSinceEpoch,
          // suppress the `client-hmr-latency` event if the update was a no-op:
          hmrUpdate.hasUpdates
        )
      }
      dispatcher.onBuildOk()
 
      // A successful build can be a no-op after recovering from an error, so
      // there may be no server component change to resolve the test callback.
      if (process.env.__NEXT_TEST_MODE && self.__NEXT_HMR_CB) {
        self.__NEXT_HMR_CB()
        self.__NEXT_HMR_CB = null
      }
    } else {
      tryApplyUpdatesWebpack(sendMessage)
    }
  }

Copyfunction handleErrors(errors: ReadonlyArray<unknown>) {
  // "Massage" webpack messages.
  const formatted = formatWebpackMessages({
    errors: errors,
    warnings: [],
  })
 
  // Only show the first error.
  dispatcher.onBuildError(formatted.errors[0])
 
  // Also log them to the console.
  for (let i = 0; i < formatted.errors.length; i++) {
    console.error(stripAnsi(formatted.errors[i]))
  }
 
  // Do not attempt to reload now.
  // We will reload on next success instead.
  if (process.env.__NEXT_TEST_MODE) {
    if (self.__NEXT_HMR_CB) {
      self.__NEXT_HMR_CB(formatted.errors[0])
      self.__NEXT_HMR_CB = null
    }
  }
}

Copyexport default () => {
  const devClient = connect()
 
  devClient.subscribeToHmrEvent((message) => {
    if (reloading) return
 
    // Retrieve the router if it's available
    const router = window.next?.router
 
    // Determine if we're on an error page or the router is not initialized
    const isOnErrorPage =
      !router || router.pathname === '/404' || router.pathname === '/_error'
 
    switch (message.type) {
      case HMR_MESSAGE_SENT_TO_BROWSER.RELOAD_PAGE: {
        sendMessage(
          JSON.stringify({
            event: 'client-reload-page',
            clientId: window.__nextDevClientId,
          })
        )
        reloading = true
        return window.location.reload()
      }
      case HMR_MESSAGE_SENT_TO_BROWSER.REMOVED_PAGE: {
        const [page] = message.data
 
        // Check if the removed page is the current page
        const isCurrentPage = page === router?.pathname
 
        // We enter here if the removed page is currently being viewed
        // or if we happen to be on an error page.
        if (isCurrentPage || isOnErrorPage) {
          sendMessage(
            JSON.stringify({
              event: 'client-removed-page',
              clientId: window.__nextDevClientId,
              page,
            })
          )
          return window.location.reload()
        }
        return
      }
      case HMR_MESSAGE_SENT_TO_BROWSER.ADDED_PAGE: {
        const [page] = message.data
 
        // Check if the added page is the current page
        const isCurrentPage = page === router?.pathname
 
        // Check if the page component is not yet loaded
        const isPageNotLoaded =
          page !== null && typeof router?.components?.[page] === 'undefined'
 
        // We enter this block if the newly added page is the one currently being viewed
        // but hasn't been loaded yet, or if we're on an error page.
        if ((isCurrentPage && isPageNotLoaded) || isOnErrorPage) {
          sendMessage(
            JSON.stringify({
              event: 'client-added-page',
              clientId: window.__nextDevClientId,
              page,
            })
          )
          return window.location.reload()
        }
        return
      }
      case HMR_MESSAGE_SENT_TO_BROWSER.DEV_PAGES_MANIFEST_UPDATE: {
        return
      }
      default: {
        message satisfies never
      }
    }
  })

Copyfunction handleSuccess() {
  clearOutdatedErrors()
  hasCompileErrors = false
 
  if (process.env.TURBOPACK) {
    const hmrUpdate = turbopackHmr!.onBuilt()
    if (hmrUpdate != null) {
      reportHmrLatency(
        sendMessage,
        [...hmrUpdate.updatedModules],
        hmrUpdate.startMsSinceEpoch,
        hmrUpdate.endMsSinceEpoch,
        hmrUpdate.hasUpdates
      )
    }
    dispatcher.onBuildOk()
  } else {
    const isHotUpdate =
      !isFirstCompilation ||
      (window.__NEXT_DATA__.page !== '/_error' && isUpdateAvailable())
 
    // Attempt to apply hot updates or reload.
    if (isHotUpdate) {
      tryApplyUpdatesWebpack()
    }
  }
 
  isFirstCompilation = false
}

Copyfunction handleWarnings(warnings: any) {
  clearOutdatedErrors()
 
  const isHotUpdate = !isFirstCompilation
  isFirstCompilation = false
  hasCompileErrors = false
 
  function printWarnings() {
    // Print warnings to the console.
    const formatted = formatWebpackMessages({
      warnings: warnings,
      errors: [],
    })
 
    if (typeof console !== 'undefined' && typeof console.warn === 'function') {
      for (let i = 0; i < formatted.warnings?.length; i++) {
        if (i === 5) {
          console.warn(
            'There were more warnings in other files.\n' +
              'You can find a complete log in the terminal.'
          )
          break
        }
        console.warn(stripAnsi(formatted.warnings[i]))
      }
    }
  }
 
  printWarnings()
 
  // Attempt to apply hot updates or reload.
  if (isHotUpdate) {
    tryApplyUpdatesWebpack()
  }
}
 
// Compilation with errors (e.g. syntax error or missing modules).
function handleErrors(errors: any) {
  clearOutdatedErrors()
 
  isFirstCompilation = false
  hasCompileErrors = true
 
  // "Massage" webpack messages.
  var formatted = formatWebpackMessages({
    errors: errors,
    warnings: [],
  })
 
  // Only show the first error.
 
  dispatcher.onBuildError(formatted.errors[0])
 
  // Also log them to the console.
  if (typeof console !== 'undefined' && typeof console.error === 'function') {
    for (var i = 0; i < formatted.errors.length; i++) {
      console.error(stripAnsi(formatted.errors[i]))
    }
  }
 
  // Do not attempt to reload now.
  // We will reload on next success instead.
  if (process.env.__NEXT_TEST_MODE) {
    if (self.__NEXT_HMR_CB) {
      self.__NEXT_HMR_CB(formatted.errors[0])
      self.__NEXT_HMR_CB = null
    }
  }
}

Copy// status
var registeredStatusHandlers = [];
var currentStatus = "idle";
 
// while downloading
var blockingPromises = 0;
var blockingPromisesWaiting = [];
 
// The update info
var currentUpdateApplyHandlers;
var queuedInvalidatedModules;
 
$hmrModuleData$ = currentModuleData;
 
$interceptModuleExecution$.push(function (options) {
	var module = options.module;
	var require = createRequire(options.require, options.id);
	module.hot = createModuleHotObject(options.id, module);
	module.parents = currentParents;
	module.children = [];
	currentParents = [];
	options.require = require;
});
 
$hmrDownloadUpdateHandlers$ = {};
$hmrInvalidateModuleHandlers$ = {};
 
function createRequire(require, moduleId) {
	var me = installedModules[moduleId];
	if (!me) return require;
	var fn = function (request) {
		if (me.hot.active) {
			if (installedModules[request]) {
				var parents = installedModules[request].parents;
				if (parents.indexOf(moduleId) === -1) {
					parents.push(moduleId);
				}
			} else {
				currentParents = [moduleId];
				currentChildModule = request;
			}
			if (me.children.indexOf(request) === -1) {
				me.children.push(request);
			}
		} else {
			console.warn(
				"[HMR] unexpected require(" +
					request +
					") from disposed module " +
					moduleId
			);
			currentParents = [];
		}
		return require(request);
	};
	var createPropertyDescriptor = function (name) {
		return {
			configurable: true,
			enumerable: true,
			get: function () {
				return require[name];
			},
			set: function (value) {
				require[name] = value;
			}
		};
	};
	for (var name in require) {
		if (Object.prototype.hasOwnProperty.call(require, name) && name !== "e") {
			Object.defineProperty(fn, name, createPropertyDescriptor(name));
		}
	}
	fn.e = function (chunkId, fetchPriority) {
		return trackBlockingPromise(require.e(chunkId, fetchPriority));
	};
	return fn;
}
 
function createModuleHotObject(moduleId, me) {
	var _main = currentChildModule !== moduleId;