From 9229e95d72176ad68d4cba60d3b1901486f2cae0 Mon Sep 17 00:00:00 2001
From: Zack Tanner <zacktanner@gmail.com>
Date: Tue, 30 Jan 2024 20:48:08 -0800
Subject: [PATCH] ensure default slots have valid file paths

---
 .../build/webpack/loaders/next-app-loader.ts  |  6 ++--
 .../app/default-css/@slot/default.tsx         |  3 ++
 .../app/default-css/@slot/more/page.tsx       |  3 ++
 .../app/default-css/default.tsx               |  1 +
 .../app/default-css/page.module.css           |  3 ++
 .../app/default-css/page.tsx                  | 16 +++++++++++
 .../parallel-routes-and-interception.test.ts  | 28 +++++++++++++++++++
 7 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 test/e2e/app-dir/parallel-routes-and-interception/app/default-css/@slot/default.tsx
 create mode 100644 test/e2e/app-dir/parallel-routes-and-interception/app/default-css/@slot/more/page.tsx
 create mode 100644 test/e2e/app-dir/parallel-routes-and-interception/app/default-css/default.tsx
 create mode 100644 test/e2e/app-dir/parallel-routes-and-interception/app/default-css/page.module.css
 create mode 100644 test/e2e/app-dir/parallel-routes-and-interception/app/default-css/page.tsx

diff --git a/packages/next/src/build/webpack/loaders/next-app-loader.ts b/packages/next/src/build/webpack/loaders/next-app-loader.ts
index d64fc97ad91ed..c5fd9c6251a67 100644
--- a/packages/next/src/build/webpack/loaders/next-app-loader.ts
+++ b/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) {
diff --git a/test/e2e/app-dir/parallel-routes-and-interception/app/default-css/@slot/default.tsx b/test/e2e/app-dir/parallel-routes-and-interception/app/default-css/@slot/default.tsx
new file mode 100644
index 0000000000000..86b9e9a388129
--- /dev/null
+++ b/test/e2e/app-dir/parallel-routes-and-interception/app/default-css/@slot/default.tsx
@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}
diff --git a/test/e2e/app-dir/parallel-routes-and-interception/app/default-css/@slot/more/page.tsx b/test/e2e/app-dir/parallel-routes-and-interception/app/default-css/@slot/more/page.tsx
new file mode 100644
index 0000000000000..f9ff5e6c4428e
--- /dev/null
+++ b/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>
+}
diff --git a/test/e2e/app-dir/parallel-routes-and-interception/app/default-css/default.tsx b/test/e2e/app-dir/parallel-routes-and-interception/app/default-css/default.tsx
new file mode 100644
index 0000000000000..6d0e200113160
--- /dev/null
+++ b/test/e2e/app-dir/parallel-routes-and-interception/app/default-css/default.tsx
@@ -0,0 +1 @@
+export { default } from './page'
diff --git a/test/e2e/app-dir/parallel-routes-and-interception/app/default-css/page.module.css b/test/e2e/app-dir/parallel-routes-and-interception/app/default-css/page.module.css
new file mode 100644
index 0000000000000..c6dd2c88fabe3
--- /dev/null
+++ b/test/e2e/app-dir/parallel-routes-and-interception/app/default-css/page.module.css
@@ -0,0 +1,3 @@
+.red {
+  color: red;
+}
diff --git a/test/e2e/app-dir/parallel-routes-and-interception/app/default-css/page.tsx b/test/e2e/app-dir/parallel-routes-and-interception/app/default-css/page.tsx
new file mode 100644
index 0000000000000..6f52e4ed53afe
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/test/e2e/app-dir/parallel-routes-and-interception/parallel-routes-and-interception.test.ts b/test/e2e/app-dir/parallel-routes-and-interception/parallel-routes-and-interception.test.ts
index 88db74d5f59c1..7a2ee1de67b8e 100644
--- a/test/e2e/app-dir/parallel-routes-and-interception/parallel-routes-and-interception.test.ts
+++ b/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')