Fix manifest error when using route.js (#46102)

This ensures there is no client component entry created for route.js. @shuding is going to investigate further why this would break the manifest generation in development. Fixes #45956 Fixes NEXT-588  ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/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` - [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm build && pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
vercel · Feb 18, 2023 · 28eb15f · 28eb15f
1 parent be2d413
commit 28eb15f
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 1 deletion.
diff --git a/packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts b/packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts
@@ -31,6 +31,7 @@ import {
 } from '../loaders/utils'
 import { traverseModules } from '../utils'
 import { normalizePathSep } from '../../../shared/lib/page-path/normalize-path-sep'
+import { isAppRouteRoute } from '../../../lib/is-app-route-route'
 
 interface Options {
   dev: boolean
@@ -165,7 +166,13 @@ export class FlightClientEntryPlugin {
     ) {
       for (const [name, entry] of compilation.entries.entries()) {
         // Skip for entries under pages/
-        if (name.startsWith('pages/')) continue
+        if (
+          name.startsWith('pages/') ||
+          // Skip for route.js entries
+          (name.startsWith('app/') && isAppRouteRoute(name))
+        ) {
+          continue
+        }
 
         // Check if the page entry is a server component or not.
         const entryDependency: webpack.NormalModule | undefined =

diff --git a/test/e2e/app-dir/route-page-manifest-bug/app/abc/route.ts b/test/e2e/app-dir/route-page-manifest-bug/app/abc/route.ts
@@ -0,0 +1,5 @@
+import { NextResponse } from 'next/server'
+
+export async function GET() {
+  return NextResponse.json({ url: 'https://www.example.com' })
+}
diff --git a/test/e2e/app-dir/route-page-manifest-bug/app/layout.tsx b/test/e2e/app-dir/route-page-manifest-bug/app/layout.tsx
@@ -0,0 +1,8 @@
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <head />
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/route-page-manifest-bug/app/page.tsx b/test/e2e/app-dir/route-page-manifest-bug/app/page.tsx
@@ -0,0 +1,5 @@
+'use client'
+
+export default function Home() {
+  return <h1 id="page-title">Page that would break</h1>
+}
diff --git a/test/e2e/app-dir/route-page-manifest-bug/next.config.js b/test/e2e/app-dir/route-page-manifest-bug/next.config.js
@@ -0,0 +1,8 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  experimental: { appDir: true },
+}
+
+module.exports = nextConfig
diff --git a/test/e2e/app-dir/route-page-manifest-bug/route-page-manifest-bug.test.ts b/test/e2e/app-dir/route-page-manifest-bug/route-page-manifest-bug.test.ts
@@ -0,0 +1,51 @@
+import { createNextDescribe } from 'e2e-utils'
+import { check } from 'next-test-utils'
+
+createNextDescribe(
+  'route-page-manifest-bug',
+  {
+    files: __dirname,
+  },
+  ({ next }) => {
+    // Recommended for tests that check HTML. Cheerio is a HTML parser that has a jQuery like API.
+    it('should work when requesting route handler after page', async () => {
+      const browser = await next.browser('/')
+      expect(await browser.elementByCss('#page-title').text()).toBe(
+        'Page that would break'
+      )
+      await browser.eval('window.location.href = "/abc"')
+      await check(
+        () => browser.eval('document.body.textContent'),
+        '{"url":"https://www.example.com"}'
+      )
+      await browser.refresh()
+      await check(
+        () => browser.eval('document.body.textContent'),
+        '{"url":"https://www.example.com"}'
+      )
+      await browser.refresh()
+      await check(
+        () => browser.eval('document.body.textContent'),
+        '{"url":"https://www.example.com"}'
+      )
+      await browser.refresh()
+      await check(
+        () => browser.eval('document.body.textContent'),
+        '{"url":"https://www.example.com"}'
+      )
+
+      await browser.back()
+      expect(await browser.waitForElementByCss('#page-title').text()).toBe(
+        'Page that would break'
+      )
+      await browser.refresh()
+      expect(await browser.waitForElementByCss('#page-title').text()).toBe(
+        'Page that would break'
+      )
+      await browser.refresh()
+      expect(await browser.waitForElementByCss('#page-title').text()).toBe(
+        'Page that would break'
+      )
+    })
+  }
+)