Fix "apply() is only allowed in ready status (state: idle)" HMR errors (

#43242)

This is a follow-up to #43145 that
fixes [this
issue](#43145 (comment)):

```
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works
Error: apply() is only allowed in ready status (state: idle)
    at https://app.airplane.so:5000/_next/static/chunks/webpack.js?ts=1669127927262:615:21
```

## Bug

- [X] Related issues linked using `fixes #number` - n/a
- [X] Integration tests added - n/a
- [X] Errors have a helpful link attached, see `contributing.md` - n/a

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

@@ -144,7 +144,7 @@ function tryApplyUpdates(
       return
     }
 
-    const hasUpdates = Boolean(updatedModules?.length)
+    const hasUpdates = Boolean(updatedModules.length)
     if (typeof onHotUpdateSuccess === 'function') {
       // Maybe we want to do something.
       onHotUpdateSuccess(hasUpdates)
@@ -176,16 +176,20 @@ function tryApplyUpdates(
   module.hot
     .check(/* autoApply */ false)
     .then((updatedModules: any[] | null) => {
-      const hasUpdates = Boolean(updatedModules?.length)
+      if (!updatedModules) {
+        return null
+      }
+
       if (typeof onBeforeUpdate === 'function') {
+        const hasUpdates = Boolean(updatedModules.length)
         onBeforeUpdate(hasUpdates)
       }
       // https://webpack.js.org/api/hot-module-replacement/#apply
       // @ts-expect-error module.hot exists
       return module.hot.apply()
     })
     .then(
-      (updatedModules: any) => {
+      (updatedModules: any[] | null) => {
         handleApplyUpdates(null, updatedModules)
       },
       (err: any) => {

packages/next/client/dev/error-overlay/hot-dev-client.js

@@ -337,7 +337,7 @@ function tryApplyUpdates(onBeforeHotUpdate, onHotUpdateSuccess) {
       return
     }
 
-    const hasUpdates = Boolean(updatedModules?.length)
+    const hasUpdates = Boolean(updatedModules.length)
     if (typeof onHotUpdateSuccess === 'function') {
       // Maybe we want to do something.
       onHotUpdateSuccess(hasUpdates)
@@ -367,8 +367,12 @@ function tryApplyUpdates(onBeforeHotUpdate, onHotUpdateSuccess) {
   module.hot
     .check(/* autoApply */ false)
     .then((updatedModules) => {
+      if (!updatedModules) {
+        return null
+      }
+
       if (typeof onBeforeHotUpdate === 'function') {
-        const hasUpdates = Boolean(updatedModules?.length)
+        const hasUpdates = Boolean(updatedModules.length)
         onBeforeHotUpdate(hasUpdates)
       }
       return module.hot.apply()