diff --git a/packages/next/src/server/dev/on-demand-entry-handler.ts b/packages/next/src/server/dev/on-demand-entry-handler.ts index 23320e22138f4..ec4e31e8225c8 100644 --- 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 new file mode 100644 index 0000000000000..56868312085df --- /dev/null +++ b/test/e2e/children-page/app/children/page.js @@ -0,0 +1,3 @@ +export default function Page(props) { + return

children - app

+} diff --git a/test/e2e/children-page/app/layout.js b/test/e2e/children-page/app/layout.js new file mode 100644 index 0000000000000..803f17d863c8a --- /dev/null +++ b/test/e2e/children-page/app/layout.js @@ -0,0 +1,7 @@ +export default function RootLayout({ children }) { + return ( + + {children} + + ) +} diff --git a/test/e2e/children-page/index.test.ts b/test/e2e/children-page/index.test.ts new file mode 100644 index 0000000000000..9d6bdb551fdfe --- /dev/null +++ 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 new file mode 100644 index 0000000000000..27ac6b4101167 --- /dev/null +++ b/test/e2e/children-page/pages/other/children.js @@ -0,0 +1,3 @@ +export default function Page(props) { + return

children - pages

+}