fix: pages not visible in dev when named children (#54007)

`getEntryKey` had some logic to remove `children` if it was part of the entry (originally it was intended to fix an issue with parallel slots that were used in place of a page, but wasn't working as intended). However, this breaks pages that are named `children`. Updating this again to implement what I think was the intended behavior in 4900fa2 which is to point to the correct entry when a parallel slot is used in place of a page component. - x-ref: #52362 Closes NEXT-1514 Fixes #53072
vercel · Aug 15, 2023 · e02397d · e02397d
1 parent 210053b
commit e02397d
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 1 deletion.
diff --git a/packages/next/src/server/dev/on-demand-entry-handler.ts b/packages/next/src/server/dev/on-demand-entry-handler.ts
@@ -100,7 +100,10 @@ export function getEntryKey(
 ) {
   // TODO: handle the /children slot better
   // this is a quick hack to handle when children is provided as children/page instead of /page
-  return `${compilerType}@${pageBundleType}@${page.replace(/\/children/g, '')}`
+  return `${compilerType}@${pageBundleType}@${page.replace(
+    /(@[^/]+)\/children/g,
+    '$1'
+  )}`
 }
 
 function getPageBundleType(pageBundlePath: string) {

diff --git a/test/e2e/children-page/app/children/page.js b/test/e2e/children-page/app/children/page.js
@@ -0,0 +1,3 @@
+export default function Page(props) {
+  return <p id="children-page">children - app</p>
+}
diff --git a/test/e2e/children-page/app/layout.js b/test/e2e/children-page/app/layout.js
@@ -0,0 +1,7 @@
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/children-page/index.test.ts b/test/e2e/children-page/index.test.ts
@@ -0,0 +1,41 @@
+import { createNextDescribe } from 'e2e-utils'
+
+createNextDescribe(
+  'children-page',
+  {
+    files: __dirname,
+  },
+  ({ next }) => {
+    describe('with app dir', () => {
+      it('should show the content if you have a page named children', async () => {
+        const browser = await next.browser('/children')
+
+        const text = await browser.waitForElementByCss('#children-page').text()
+
+        expect(text).toBe('children - app')
+
+        const currentDisplay = await browser.eval(
+          `window.getComputedStyle(document.querySelector('body')).display`
+        )
+
+        expect(currentDisplay).toBe('block')
+      })
+    })
+
+    describe('with pages dir', () => {
+      it('should show the content if you have a page named children', async () => {
+        const browser = await next.browser('/other/children')
+
+        const text = await browser.waitForElementByCss('#children-page').text()
+
+        expect(text).toBe('children - pages')
+
+        const currentDisplay = await browser.eval(
+          `window.getComputedStyle(document.querySelector('body')).display`
+        )
+
+        expect(currentDisplay).toBe('block')
+      })
+    })
+  }
+)
diff --git a/test/e2e/children-page/pages/other/children.js b/test/e2e/children-page/pages/other/children.js
@@ -0,0 +1,3 @@
+export default function Page(props) {
+  return <p id="children-page">children - pages</p>
+}