Ensure all entries are cleared from cache on runtime change (#20652)

.github/workflows/build_test_deploy.yml

@@ -153,7 +153,7 @@ jobs:
       - run: cat package.json | jq '.resolutions."react-dom" = "^17.0.1"' > package.json.tmp && mv package.json.tmp package.json
       - run: yarn install --check-files
       - run: yarn list webpack react react-dom
-      - run: xvfb-run node run-tests.js test/integration/link-ref/test/index.test.js test/integration/production/test/index.test.js test/integration/basic/test/index.test.js test/integration/async-modules/test/index.test.js test/integration/font-optimization/test/index.test.js test/acceptance/*.test.js
+      - run: xvfb-run node run-tests.js test/integration/{link-ref,production,basic,async-modules,font-optimization,ssr-ctx}/test/index.test.js test/acceptance/*.test.js
 
   testFirefox:
     name: Test Firefox (production)

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

@@ -38,20 +38,28 @@ export class NextJsRequireCacheHotReloader implements Plugin {
           compilation.outputOptions.path,
           'webpack-runtime.js'
         )
-
         deleteCache(runtimeChunkPath)
 
-        for (const outputPath of this.previousOutputPathsWebpack5) {
-          if (!this.currentOutputPathsWebpack5.has(outputPath)) {
-            deleteCache(outputPath)
-          }
-        }
-
-        this.previousOutputPathsWebpack5 = new Set(
-          this.currentOutputPathsWebpack5
+        // we need to make sure to clear all server entries from cache
+        // since they can have a stale webpack-runtime cache
+        // which needs to always be in-sync
+        const entries = [...compilation.entries.keys()].filter((entry) =>
+          entry.toString().startsWith('pages/')
         )
-        this.currentOutputPathsWebpack5.clear()
+
+        entries.forEach((page) => {
+          const outputPath = path.join(
+            compilation.outputOptions.path,
+            page + '.js'
+          )
+          deleteCache(outputPath)
+        })
       })
+
+      this.previousOutputPathsWebpack5 = new Set(
+        this.currentOutputPathsWebpack5
+      )
+      this.currentOutputPathsWebpack5.clear()
       return
     }
 

test/integration/ssr-ctx/context.js

+import React from 'react'
+
+export const Idk = React.createContext(null)
+
+export const useIdk = () => React.useContext(Idk)

test/integration/ssr-ctx/pages/_app.js

+import { Idk } from '../context'
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <Idk.Provider value="hello world">
+      <Component {...pageProps} />
+    </Idk.Provider>
+  )
+}

test/integration/ssr-ctx/pages/index.js

 import React from 'react'
-
-const Idk = React.createContext(null)
+import { useIdk } from '../context'
 
 const Page = () => {
+  const idk = useIdk()
+
+  console.log(idk)
+
   return (
-    <div>
-      <Idk.Provider value="hello world">
-        <Idk.Consumer>{(idk) => <p>Value: {idk}</p>}</Idk.Consumer>
-      </Idk.Provider>
-    </div>
+    <>
+      <p>Value: {idk}</p>
+    </>
   )
 }
 

test/integration/ssr-ctx/test/index.test.js

@@ -2,29 +2,66 @@
 
 import { join } from 'path'
 import {
+  File,
   killApp,
   findPort,
   nextStart,
   nextBuild,
   renderViaHTTP,
+  check,
+  launchApp,
 } from 'next-test-utils'
 
 jest.setTimeout(1000 * 30)
 
 const appDir = join(__dirname, '../')
+const appPg = new File(join(appDir, 'pages/_app.js'))
+
 let appPort
 let app
 
-describe('Production Usage', () => {
-  beforeAll(async () => {
-    await nextBuild(appDir)
-    appPort = await findPort()
-    app = await nextStart(appDir, appPort)
-  })
-  afterAll(() => killApp(app))
-
+const runTests = (isDev) => {
   it('should render a page with context', async () => {
     const html = await renderViaHTTP(appPort, '/')
     expect(html).toMatch(/Value: .*?hello world/)
   })
+
+  if (isDev) {
+    it('should render with context after change', async () => {
+      appPg.replace('hello world', 'new value')
+
+      try {
+        await check(() => renderViaHTTP(appPort, '/'), /Value: .*?new value/)
+      } finally {
+        appPg.restore()
+      }
+      await check(() => renderViaHTTP(appPort, '/'), /Value: .*?hello world/)
+    })
+  }
+}
+
+describe('React Context', () => {
+  describe('dev mode', () => {
+    beforeAll(async () => {
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort)
+    })
+    afterAll(async () => {
+      await killApp(app)
+      appPg.restore()
+    })
+
+    runTests(true)
+  })
+
+  describe('production mode', () => {
+    beforeAll(async () => {
+      await nextBuild(appDir)
+      appPort = await findPort()
+      app = await nextStart(appDir, appPort)
+    })
+    afterAll(() => killApp(app))
+
+    runTests()
+  })
 })