/** * MIT License * * Copyright (c) 2013-present, Facebook, Inc. * * 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. */ // This file is a modified version of the Create React App HMR dev client that // can be found here: // https://github.com/facebook/create-react-app/blob/v3.4.1/packages/react-dev-utils/webpackHotDevClient.js import * as DevOverlay from '@next/react-dev-overlay/lib/client' import stripAnsi from 'next/dist/compiled/strip-ansi' import { getEventSourceWrapper } from './eventsource' import formatWebpackMessages from './format-webpack-messages' // This alternative WebpackDevServer combines the functionality of: // https://github.com/webpack/webpack-dev-server/blob/webpack-1/client/index.js // https://github.com/webpack/webpack/blob/webpack-1/hot/dev-server.js // It only supports their simplest configuration (hot updates on same server). // It makes some opinionated choices on top, like adding a syntax error overlay // that looks similar to our console output. The error overlay is inspired by: // https://github.com/glenjamin/webpack-hot-middleware let hadRuntimeError = false let customHmrEventHandler export default function connect(options) { DevOverlay.register() getEventSourceWrapper(options).addMessageListener((event) => { // This is the heartbeat event if (event.data === '\uD83D\uDC93') { return } try { processMessage(event) } catch (ex) { console.warn('Invalid HMR message: ' + event.data + '\n' + ex) } }) return { subscribeToHmrEvent(handler) { customHmrEventHandler = handler }, onUnrecoverableError() { hadRuntimeError = true }, } } // Remember some state related to hot module replacement. var isFirstCompilation = true var mostRecentCompilationHash = null var hasCompileErrors = false function clearOutdatedErrors() { // Clean up outdated compile errors, if any. if (typeof console !== 'undefined' && typeof console.clear === 'function') { if (hasCompileErrors) { console.clear() } } } // Successful compilation. function handleSuccess() { clearOutdatedErrors() const isHotUpdate = !isFirstCompilation isFirstCompilation = false hasCompileErrors = false // Attempt to apply hot updates or reload. if (isHotUpdate) { tryApplyUpdates(function onSuccessfulHotUpdate(hasUpdates) { // Only dismiss it when we're sure it's a hot update. // Otherwise it would flicker right before the reload. onFastRefresh(hasUpdates) }) } } // Compilation with warnings (e.g. ESLint). function handleWarnings(warnings) { 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) { tryApplyUpdates(function onSuccessfulHotUpdate(hasUpdates) { // Only dismiss it when we're sure it's a hot update. // Otherwise it would flicker right before the reload. onFastRefresh(hasUpdates) }) } } // Compilation with errors (e.g. syntax error or missing modules). function handleErrors(errors) { clearOutdatedErrors() isFirstCompilation = false hasCompileErrors = true // "Massage" webpack messages. var formatted = formatWebpackMessages({ errors: errors, warnings: [], }) // Only show the first error. DevOverlay.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 } } } function onFastRefresh(hasUpdates) { DevOverlay.onBuildOk() if (hasUpdates) { DevOverlay.onRefresh() } console.log('[Fast Refresh] done') } // There is a newer version of the code available. function handleAvailableHash(hash) { // Update last known compilation hash. mostRecentCompilationHash = hash } // Handle messages from the server. function processMessage(e) { const obj = JSON.parse(e.data) switch (obj.action) { case 'building': { console.log('[Fast Refresh] rebuilding') break } case 'built': case 'sync': { if (obj.hash) { handleAvailableHash(obj.hash) } const { errors, warnings } = obj const hasErrors = Boolean(errors && errors.length) if (hasErrors) { return handleErrors(errors) } const hasWarnings = Boolean(warnings && warnings.length) if (hasWarnings) { return handleWarnings(warnings) } return handleSuccess() } default: { if (customHmrEventHandler) { customHmrEventHandler(obj) break } break } } } // Is there a newer version of this code available? function isUpdateAvailable() { /* globals __webpack_hash__ */ // __webpack_hash__ is the hash of the current compilation. // It's a global variable injected by Webpack. return mostRecentCompilationHash !== __webpack_hash__ } // Webpack disallows updates in other states. function canApplyUpdates() { return module.hot.status() === 'idle' } function afterApplyUpdates(fn) { if (canApplyUpdates()) { fn() } else { function handler(status) { if (status === 'idle') { module.hot.removeStatusHandler(handler) fn() } } module.hot.addStatusHandler(handler) } } // Attempt to update code on the fly, fall back to a hard reload. function tryApplyUpdates(onHotUpdateSuccess) { if (!module.hot) { // HotModuleReplacementPlugin is not in Webpack configuration. console.error('HotModuleReplacementPlugin is not in Webpack configuration.') // window.location.reload(); return } if (!isUpdateAvailable() || !canApplyUpdates()) { return } function handleApplyUpdates(err, updatedModules) { if (err || hadRuntimeError || !updatedModules) { if (err) { console.warn( '[Fast Refresh] performing full reload\n\n' + "Fast Refresh will perform a full reload when you edit a file that's imported by modules outside of the React tree.\n" + 'You might have a file which renders a React component but also exports a value that is imported by a non-React component.\n' + 'Consider migrating the non-React component export to a separate file and importing it into both files.\n\n' + 'It is also possible you are using class components at the top-level of your application, which disables Fast Refresh.\n' + 'Fast Refresh requires at least one function component in your React tree.' ) } else if (hadRuntimeError) { console.warn( '[Fast Refresh] performing full reload because your application had an unrecoverable error' ) } window.location.reload() return } const hasUpdates = Boolean(updatedModules.length) if (typeof onHotUpdateSuccess === 'function') { // Maybe we want to do something. onHotUpdateSuccess(hasUpdates) } if (isUpdateAvailable()) { // While we were updating, there was a new update! Do it again. tryApplyUpdates(hasUpdates ? undefined : onHotUpdateSuccess) } else { if (process.env.__NEXT_TEST_MODE) { afterApplyUpdates(() => { if (self.__NEXT_HMR_CB) { self.__NEXT_HMR_CB() self.__NEXT_HMR_CB = null } }) } } } // https://webpack.js.org/api/hot-module-replacement/#check module.hot.check(/* autoApply */ true).then( (updatedModules) => { handleApplyUpdates(null, updatedModules) }, (err) => { handleApplyUpdates(err, null) } ) }