vercel · sokra · Dec 10, 2024 · Dec 10, 2024 · Dec 10, 2024 · Dec 10, 2024
diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
@@ -2091,8 +2091,28 @@ export default async function getBaseWebpackConfig(
   if (config.webpack && config.configFile) {
     cache.buildDependencies = {
       config: [config.configFile],
+      // We don't want to use the webpack default buildDependencies as we already include the next.js version
+      defaultWebpack: [],
+    }
+  } else {
+    cache.buildDependencies = {
+      // We don't want to use the webpack default buildDependencies as we already include the next.js version
+      defaultWebpack: [],
     }
   }
+  webpack5Config.plugins?.push((compiler) => {
+    compiler.hooks.done.tap('next-build-dependencies', (stats) => {
+      const buildDependencies = stats.compilation.buildDependencies
+      const nextPackage = path.dirname(require.resolve('next/package.json'))
+      // Remove all next.js build dependencies, they are already covered by the cacheVersion
+      // and next.js also imports the output files which leads to broken caching.
+      for (const dep of buildDependencies) {
+        if (dep.startsWith(nextPackage)) {
+          buildDependencies.delete(dep)
+        }
+      }
+    })
+  })
 
   webpack5Config.cache = cache
 

diff --git a/test/e2e/persistent-caching/app/layout.tsx b/test/e2e/persistent-caching/app/layout.tsx
@@ -0,0 +1,8 @@
+import { ReactNode } from 'react'
+export default function Root({ children }: { children: ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/persistent-caching/app/page.tsx b/test/e2e/persistent-caching/app/page.tsx
@@ -0,0 +1,8 @@
+export default function Page() {
+  return (
+    <>
+      <p>hello world</p>
+      <main suppressHydrationWarning>Timestamp</main>
+    </>
+  )
+}
diff --git a/test/e2e/persistent-caching/my-loader.js b/test/e2e/persistent-caching/my-loader.js
@@ -0,0 +1,5 @@
+module.exports = async function myLoader(source) {
+  // Make webpack consider the build as large change which makes it persistent cache it sooner
+  await new Promise((resolve) => setTimeout(resolve, 2000))
+  return source.replace(/Timestamp/g, `Timestamp = ${Date.now()}`)
+}
diff --git a/test/e2e/persistent-caching/next.config.js b/test/e2e/persistent-caching/next.config.js
@@ -0,0 +1,28 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  experimental: {
+    turbo: {
+      unstablePersistentCaching: true,
+      rules: {
+        'app/page.tsx': {
+          loaders: ['./my-loader.js'],
+        },
+        'pages/pages.tsx': {
+          loaders: ['./my-loader.js'],
+        },
+      },
+    },
+  },
+  webpack(config) {
+    config.module.rules.push({
+      test: /app\/page\.tsx|pages\/pages.tsx/,
+      use: ['./my-loader.js'],
+    })
+
+    return config
+  },
+}
+
+module.exports = nextConfig
diff --git a/test/e2e/persistent-caching/pages/pages.tsx b/test/e2e/persistent-caching/pages/pages.tsx
@@ -0,0 +1,8 @@
+export default function Page() {
+  return (
+    <>
+      <p>hello world</p>
+      <main suppressHydrationWarning>Timestamp</main>
+    </>
+  )
+}
diff --git a/test/e2e/persistent-caching/persistent-caching.test.ts b/test/e2e/persistent-caching/persistent-caching.test.ts
@@ -0,0 +1,110 @@
+import { nextTestSetup } from 'e2e-utils'
+import { waitFor } from 'next-test-utils'
+
+describe('persistent-caching', () => {
+  const { skipped, next, isNextDev } = nextTestSetup({
+    files: __dirname,
+    skipDeployment: true,
+  })
+
+  if (skipped) {
+    return
+  }
+
+  async function restartCycle() {
+    await stop()
+    await start()
+  }
+
+  async function stop() {
+    if (isNextDev) {
+      // Give Persistent Cache time to write to disk
+      await waitFor(10000)
+    }
+    await next.stop()
+  }
+
+  async function start() {
+    if (!isNextDev) {
+      await next.build()
+    }
+    await next.start()
+  }
+
+  it('should persistent cache loaders', async () => {
+    let appTimestamp, pagesTimestamp
+    {
+      const browser = await next.browser('/')
+      appTimestamp = await browser.elementByCss('main').text()
+      await browser.close()
+    }
+    {
+      const browser = await next.browser('/pages')
+      pagesTimestamp = await browser.elementByCss('main').text()
+      await browser.close()
+    }
+    await restartCycle()
+
+    {
+      const browser = await next.browser('/')
+      // TODO Persistent Caching for webpack dev server is broken
+      expect(await browser.elementByCss('main').text()).toBe(appTimestamp)
+      await browser.close()
+    }
+    {
+      const browser = await next.browser('/pages')
+      // TODO Persistent Caching for webpack dev server is broken
+      expect(await browser.elementByCss('main').text()).toBe(pagesTimestamp)
+      await browser.close()
+    }
+  })
+
+  it('should allow to change files while stopped', async () => {
+    {
+      const browser = await next.browser('/')
+      expect(await browser.elementByCss('p').text()).toBe('hello world')
+      await browser.close()
+    }
+    {
+      const browser = await next.browser('/pages')
+      expect(await browser.elementByCss('p').text()).toBe('hello world')
+      await browser.close()
+    }
+
+    await stop()
+
+    await next.patchFile(
+      'pages/pages.tsx',
+      (content) => {
+        return content.replace('hello world', 'hello persistent caching')
+      },
+      async () => {
+        await next.patchFile(
+          'app/page.tsx',
+          (content) => {
+            return content.replace('hello world', 'hello persistent caching')
+          },
+          async () => {
+            await start()
+            {
+              const browser = await next.browser('/')
+              expect(await browser.elementByCss('p').text()).toBe(
+                'hello persistent caching'
+              )
+              await browser.close()
+            }
+            {
+              const browser = await next.browser('/pages')
+              expect(await browser.elementByCss('p').text()).toBe(
+                'hello persistent caching'
+              )
+              await browser.close()
+            }
+            await stop()
+          }
+        )
+      }
+    )
+    await start()
+  })
+})