chore(HMR clients): Fix a bunch of typescript errors by including the appropriate webpack type declarations

Author: bgw

packages/next/src/build/webpack/loaders/next-style-loader/runtime/injectStylesIntoLinkTag.ts

@@ -1,3 +1,5 @@
+/// <reference types="webpack/module.d.ts" />
+
 const getTarget = (() => {
   const memo: any = {}
 
@@ -27,8 +29,6 @@ const getTarget = (() => {
   }
 })()
 
-declare let __webpack_nonce__: string
-
 module.exports = (url: any, options: any) => {
   options = options || {}
   options.attributes =

packages/next/src/build/webpack/loaders/next-style-loader/runtime/injectStylesIntoStyleTag.ts

@@ -1,3 +1,5 @@
+/// <reference types="webpack/module.d.ts" />
+
 const isOldIE = (function isOldIE() {
   let memo: any
 

packages/next/src/client/components/react-dev-overlay/app/hot-reloader-client.tsx

@@ -1,3 +1,5 @@
+/// <reference types="webpack/module.d.ts" />
+
 import type { ReactNode } from 'react'
 import { useCallback, useEffect, startTransition, useMemo, useRef } from 'react'
 import stripAnsi from 'next/dist/compiled/strip-ansi'
@@ -120,7 +122,6 @@ function isUpdateAvailable() {
 
 // Webpack disallows updates in other states.
 function canApplyUpdates() {
-  // @ts-expect-error module.hot exists
   return module.hot.status() === 'idle'
 }
 function afterApplyUpdates(fn: any) {
@@ -129,12 +130,10 @@ function afterApplyUpdates(fn: any) {
   } else {
     function handler(status: any) {
       if (status === 'idle') {
-        // @ts-expect-error module.hot exists
         module.hot.removeStatusHandler(handler)
         fn()
       }
     }
-    // @ts-expect-error module.hot exists
     module.hot.addStatusHandler(handler)
   }
 }
@@ -213,7 +212,6 @@ function tryApplyUpdates(
   }
 
   // https://webpack.js.org/api/hot-module-replacement/#check
-  // @ts-expect-error module.hot exists
   module.hot
     .check(/* autoApply */ false)
     .then((updatedModules: any[] | null) => {
@@ -226,7 +224,6 @@ function tryApplyUpdates(
         onBeforeUpdate(hasUpdates)
       }
       // https://webpack.js.org/api/hot-module-replacement/#apply
-      // @ts-expect-error module.hot exists
       return module.hot.apply()
     })
     .then(

packages/next/src/client/components/react-dev-overlay/pages/hot-reloader-client.ts

@@ -28,6 +28,8 @@
 // can be found here:
 // https://github.com/facebook/create-react-app/blob/v3.4.1/packages/react-dev-utils/webpackHotDevClient.js
 
+/// <reference types="webpack/module.d.ts" />
+
 import {
   register,
   onBuildError,
@@ -67,7 +69,6 @@ import {
 // https://github.com/glenjamin/webpack-hot-middleware
 
 declare global {
-  const __webpack_hash__: string
   interface Window {
     __nextDevClientId: number
   }
@@ -406,7 +407,6 @@ function isUpdateAvailable() {
 
 // Webpack disallows updates in other states.
 function canApplyUpdates() {
-  // @ts-expect-error TODO: module.hot exists but type needs to be added. Can't use `as any` here as webpack parses for `module.hot` calls.
   return module.hot.status() === 'idle'
 }
 function afterApplyUpdates(fn: () => void) {
@@ -415,12 +415,10 @@ function afterApplyUpdates(fn: () => void) {
   } else {
     function handler(status: string) {
       if (status === 'idle') {
-        // @ts-expect-error TODO: module.hot exists but type needs to be added. Can't use `as any` here as webpack parses for `module.hot` calls.
         module.hot.removeStatusHandler(handler)
         fn()
       }
     }
-    // @ts-expect-error TODO: module.hot exists but type needs to be added. Can't use `as any` here as webpack parses for `module.hot` calls.
     module.hot.addStatusHandler(handler)
   }
 }
@@ -430,7 +428,6 @@ function tryApplyUpdates(
   onBeforeHotUpdate: ((updatedModules: string[]) => unknown) | undefined,
   onHotUpdateSuccess: (updatedModules: string[]) => unknown
 ) {
-  // @ts-expect-error TODO: module.hot exists but type needs to be added. Can't use `as any` here as webpack parses for `module.hot` calls.
   if (!module.hot) {
     // HotModuleReplacementPlugin is not in Webpack configuration.
     console.error('HotModuleReplacementPlugin is not in Webpack configuration.')
@@ -480,7 +477,6 @@ function tryApplyUpdates(
   }
 
   // https://webpack.js.org/api/hot-module-replacement/#check
-  // @ts-expect-error TODO: module.hot exists but type needs to be added. Can't use `as any` here as webpack parses for `module.hot` calls.
   module.hot
     .check(/* autoApply */ false)
     .then((updatedModules: any) => {
@@ -491,7 +487,6 @@ function tryApplyUpdates(
       if (typeof onBeforeHotUpdate === 'function') {
         onBeforeHotUpdate(updatedModules)
       }
-      // @ts-expect-error TODO: module.hot exists but type needs to be added. Can't use `as any` here as webpack parses for `module.hot` calls.
       return module.hot.apply()
     })
     .then(

packages/next/src/client/dev/amp-dev.ts

@@ -8,9 +8,7 @@ import {
 import { HMR_ACTIONS_SENT_TO_BROWSER } from '../../server/dev/hot-reloader-types'
 import { reportInvalidHmrMessage } from '../components/react-dev-overlay/shared'
 
-declare global {
-  const __webpack_runtime_id__: string
-}
+/// <reference types="webpack/module.d.ts" />
 
 const data = JSON.parse(
   (document.getElementById('__NEXT_DATA__') as any).textContent
@@ -35,7 +33,6 @@ function isUpdateAvailable() {
 
 // Webpack disallows updates in other states.
 function canApplyUpdates() {
-  // @ts-expect-error TODO: module.hot exists but type needs to be added. Can't use `as any` here as webpack parses for `module.hot` calls.
   return module.hot.status() === 'idle'
 }
 

packages/next/src/pages/_document.tsx

@@ -1,3 +1,5 @@
+/// <reference types="webpack/module.d.ts" />
+
 import React, { type JSX } from 'react'
 import { NEXT_BUILTIN_DOCUMENT } from '../shared/lib/constants'
 import type {
@@ -214,10 +216,10 @@ function getPreNextWorkerScripts(context: HtmlProps, props: OriginProps) {
   if (!nextScriptWorkers || process.env.NEXT_RUNTIME === 'edge') return null
 
   try {
-    let {
-      partytownSnippet,
-      // @ts-ignore: Prevent webpack from processing this require
-    } = __non_webpack_require__('@builder.io/partytown/integration'!)
+    // @ts-expect-error: Prevent webpack from processing this require
+    let { partytownSnippet } = __non_webpack_require__(
+      '@builder.io/partytown/integration'!
+    )
 
     const children = Array.isArray(props.children)
       ? props.children