ensure default slots have valid file paths

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

@@ -436,9 +436,11 @@ async function createTreeCodeFromPath(
     for (const adjacentParallelSegment of adjacentParallelSegments) {
       if (!props[normalizeParallelKey(adjacentParallelSegment)]) {
         const actualSegment =
-          adjacentParallelSegment === 'children' ? '' : adjacentParallelSegment
+          adjacentParallelSegment === 'children'
+            ? ''
+            : `/${adjacentParallelSegment}`
         let defaultPath = await resolver(
-          `${appDirPrefix}${segmentPath}/${actualSegment}/default`
+          `${appDirPrefix}${segmentPath}${actualSegment}/default`
         )
 
         if (!defaultPath) {

test/e2e/app-dir/parallel-routes-and-interception/app/default-css/@slot/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}

test/e2e/app-dir/parallel-routes-and-interception/app/default-css/@slot/more/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>This is more</div>
+}

test/e2e/app-dir/parallel-routes-and-interception/app/default-css/default.tsx

@@ -0,0 +1 @@
+export { default } from './page'

test/e2e/app-dir/parallel-routes-and-interception/app/default-css/page.module.css

@@ -0,0 +1,3 @@
+.red {
+  color: red;
+}

test/e2e/app-dir/parallel-routes-and-interception/app/default-css/page.tsx

@@ -0,0 +1,16 @@
+import Link from 'next/link'
+import styles from './page.module.css'
+
+export default function Example() {
+  return (
+    <div>
+      <h1>Example</h1>
+      <p className={styles.red} id="red-text">
+        This is red
+      </p>
+      <p>
+        <Link href="/default-css/more">Show more</Link>
+      </p>
+    </div>
+  )
+}

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

@@ -408,6 +408,34 @@ createNextDescribe(
         )
       })
 
+      it('should load CSS for a default page that exports another page', async () => {
+        const browser = await next.browser('/default-css')
+
+        expect(
+          await browser.eval(
+            `window.getComputedStyle(document.getElementById("red-text")).color`
+          )
+        ).toBe('rgb(255, 0, 0)')
+
+        // the more page will now be using the page's `default.tsx` file, which re-exports the root page.
+        await browser.elementByCss('[href="/default-css/more"]').click()
+
+        expect(
+          await browser.eval(
+            `window.getComputedStyle(document.getElementById("red-text")).color`
+          )
+        ).toBe('rgb(255, 0, 0)')
+
+        // ensure that everything still works on a fresh load
+        await browser.refresh()
+
+        expect(
+          await browser.eval(
+            `window.getComputedStyle(document.getElementById("red-text")).color`
+          )
+        ).toBe('rgb(255, 0, 0)')
+      })
+
       if (isNextDev) {
         it('should support parallel routes with no page component', async () => {
           const browser = await next.browser('/parallel-no-page/foo')