Fix next dev not working for server components in app (#37403)

## Bug

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

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)

packages/next/build/webpack-config.ts

@@ -1593,7 +1593,11 @@ export default async function getBaseWebpackConfig(
             const {
               NextJsRequireCacheHotReloader,
             } = require('./webpack/plugins/nextjs-require-cache-hot-reloader')
-            const devPlugins = [new NextJsRequireCacheHotReloader()]
+            const devPlugins = [
+              new NextJsRequireCacheHotReloader({
+                hasServerComponents: config.experimental.serverComponents,
+              }),
+            ]
 
             if (isClient || isEdgeServer) {
               devPlugins.push(new webpack.HotModuleReplacementPlugin())

packages/next/build/webpack/plugins/nextjs-require-cache-hot-reloader.ts

@@ -3,6 +3,7 @@ import { clearModuleContext } from '../../../server/web/sandbox'
 import { realpathSync } from 'fs'
 import path from 'path'
 import isError from '../../../lib/is-error'
+import { NEXT_CLIENT_SSR_ENTRY_SUFFIX } from '../../../shared/lib/constants'
 
 type Compiler = webpack5.Compiler
 type WebpackPluginInstance = webpack5.WebpackPluginInstance
@@ -34,25 +35,52 @@ function deleteCache(filePath: string) {
     for (const child of module.children) {
       child.parent = null
     }
+    delete require.cache[filePath]
+    return true
   }
-  delete require.cache[filePath]
+  return false
 }
 
 const PLUGIN_NAME = 'NextJsRequireCacheHotReloader'
 
 // This plugin flushes require.cache after emitting the files. Providing 'hot reloading' of server files.
 export class NextJsRequireCacheHotReloader implements WebpackPluginInstance {
   prevAssets: any = null
+  hasServerComponents: boolean
   previousOutputPathsWebpack5: Set<string> = new Set()
   currentOutputPathsWebpack5: Set<string> = new Set()
 
+  constructor(opts: { hasServerComponents: boolean }) {
+    this.hasServerComponents = opts.hasServerComponents
+  }
+
   apply(compiler: Compiler) {
     compiler.hooks.assetEmitted.tap(
       PLUGIN_NAME,
-      (_file, { targetPath, content }) => {
+      (file, { targetPath, content }) => {
         this.currentOutputPathsWebpack5.add(targetPath)
         deleteCache(targetPath)
         clearModuleContext(targetPath, content.toString('utf-8'))
+
+        if (
+          this.hasServerComponents &&
+          /^(app|pages)\//.test(file) &&
+          /\.js$/.test(targetPath)
+        ) {
+          // Also clear the potential __sc_client__ cache.
+          // @TODO: Investigate why the client ssr bundle isn't emitted as an asset here.
+          const clientComponentsSSRTarget = targetPath.replace(
+            /\.js$/,
+            NEXT_CLIENT_SSR_ENTRY_SUFFIX + '.js'
+          )
+          if (deleteCache(clientComponentsSSRTarget)) {
+            this.currentOutputPathsWebpack5.add(clientComponentsSSRTarget)
+            clearModuleContext(
+              clientComponentsSSRTarget,
+              content.toString('utf-8')
+            )
+          }
+        }
       }
     )
 

packages/next/server/dev/hot-reloader.ts

@@ -158,7 +158,6 @@ export default class HotReloader {
   private distDir: string
   private webpackHotMiddleware?: WebpackHotMiddleware
   private config: NextConfigComplete
-  private runtime?: 'nodejs' | 'edge'
   private hasServerComponents: boolean
   private hasReactRoot: boolean
   public clientStats: webpack5.Stats | null
@@ -209,7 +208,6 @@ export default class HotReloader {
     this.serverPrevDocumentHash = null
 
     this.config = config
-    this.runtime = config.experimental.runtime
     this.hasReactRoot = !!process.env.__NEXT_REACT_ROOT
     this.hasServerComponents =
       this.hasReactRoot && !!config.experimental.serverComponents