fix: infinite dev reloads when parallel route is treated a page entry

packages/next/src/build/webpack/loaders/next-app-loader.ts

@@ -302,6 +302,7 @@ async function createTreeCodeFromPath(
           )}), ${JSON.stringify(resolvedPagePath)}],
           ${createMetadataExportsCode(metadata)}
         }]`
+
         continue
       }
 
@@ -487,11 +488,15 @@ const nextAppLoader: AppLoader = async function nextAppLoader() {
         }
 
         const isParallelRoute = rest[0].startsWith('@')
-        if (isParallelRoute && rest.length === 2 && rest[1] === 'page') {
-          matched[rest[0]] = [PAGE_SEGMENT]
-          continue
-        }
         if (isParallelRoute) {
+          if (rest.length === 2 && rest[1] === 'page') {
+            // matched will be an empty object in case the parallel route is at a path with no existing page
+            // in which case, we need to mark it as a regular page segment
+            matched[rest[0]] = Object.keys(matched).length
+              ? [PAGE_SEGMENT]
+              : PAGE_SEGMENT
+            continue
+          }
           // we insert a special marker in order to also process layout/etc files at the slot level
           matched[rest[0]] = [PARALLEL_CHILDREN_SEGMENT, ...rest.slice(1)]
           continue

test/e2e/app-dir/parallel-routes-and-interception/app/parallel-no-page/foo/@parallel/page.tsx

@@ -0,0 +1,8 @@
+export default function ParallelPage() {
+  return (
+    <>
+      <p>Hello from parallel page!</p>
+      <div id="timestamp">{Date.now()}</div>
+    </>
+  )
+}

test/e2e/app-dir/parallel-routes-and-interception/app/parallel-no-page/foo/layout.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+
+export default function Layout({ parallel }: { parallel: React.ReactNode }) {
+  return (
+    <>
+      <h2>LAYOUT</h2>
+      {parallel}
+    </>
+  )
+}

test/e2e/app-dir/parallel-routes-and-interception/parallel-routes-and-interception.test.ts

@@ -6,7 +6,7 @@ createNextDescribe(
   {
     files: __dirname,
   },
-  ({ next }) => {
+  ({ next, isNextDev }) => {
     describe('parallel routes', () => {
       it('should support parallel route tab bars', async () => {
         const browser = await next.browser('/parallel-tab-bar')
@@ -338,6 +338,23 @@ createNextDescribe(
           `{"slug":"foo","id":"bar"}`
         )
       })
+
+      if (isNextDev) {
+        it('should support parallel routes with no page component', async () => {
+          const browser = await next.browser('/parallel-no-page/foo')
+          const timestamp = await browser.elementByCss('#timestamp').text()
+
+          await new Promise((resolve) => {
+            setTimeout(resolve, 3000)
+          })
+
+          await check(async () => {
+            // an invalid response triggers a fast refresh, so if the timestamp doesn't update, this behaved correctly
+            const newTimestamp = await browser.elementByCss('#timestamp').text()
+            return newTimestamp !== timestamp ? 'failure' : 'success'
+          }, 'success')
+        })
+      }
     })
 
     describe('route intercepting with dynamic routes', () => {