fix(next@15): use the asset prefix when loading a CSS in App Router (#…

…72095) # What This PR fixes a bug when using next@15, next/dynamic and assetPrefix config in App Router. # Why The current behavior loads the CSS with only the pathname and so, it results with a 404. # How The new behavior uses the full url of the asset. Fixes #72470  --------- Co-authored-by: Tobias Koppers <[email protected]> Co-authored-by: JJ Kasper <[email protected]>
vercel · Dec 12, 2024 · cfe66e7 · cfe66e7
1 parent 2de9722
commit cfe66e7
Show file tree

Hide file tree

Showing 17 changed files with 1,490 additions and 2 deletions.
diff --git a/packages/next/src/build/webpack/config/blocks/css/index.ts b/packages/next/src/build/webpack/config/blocks/css/index.ts
@@ -619,7 +619,11 @@ export const css = curry(async function css(
           insert: function (linkTag: HTMLLinkElement) {
             if (typeof _N_E_STYLE_LOAD === 'function') {
               const { href, onload, onerror } = linkTag
-              _N_E_STYLE_LOAD(new URL(href).pathname).then(
+              _N_E_STYLE_LOAD(
+                href.indexOf(window.location.origin) === 0
+                  ? new URL(href).pathname
+                  : href
+              ).then(
                 () => onload?.call(linkTag, { type: 'load' } as Event),
                 () => onerror?.call(linkTag, {} as Event)
               )

diff --git a/test/integration/next-dynamic-css-asset-prefix/next.config.js b/test/integration/next-dynamic-css-asset-prefix/next.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  assetPrefix: 'http://localhost:__CDN_PORT__/path-prefix',
+}
diff --git a/test/integration/next-dynamic-css-asset-prefix/src/Component2.jsx b/test/integration/next-dynamic-css-asset-prefix/src/Component2.jsx
@@ -0,0 +1,27 @@
+import styles from './Component2.module.scss'
+
+export default function Content2() {
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.header}>Where does it come from?</h1>
+      <div className={styles.textContent}>
+        Contrary to popular belief, Lorem Ipsum is not simply random text. It
+        has roots in a piece of classical Latin literature from 45 BC, making it
+        over 2000 years old. Richard McClintock, a Latin professor at
+        Hampden-Sydney College in Virginia, looked up one of the more obscure
+        Latin words, consectetur, from a Lorem Ipsum passage, and going through
+        the cites of the word in classical literature, discovered the
+        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
+        of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
+        Cicero, written in 45 BC. This book is a treatise on the theory of
+        ethics, very popular during the Renaissance. The first line of Lorem
+        Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
+        1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is
+        reproduced below for those interested. Sections 1.10.32 and 1.10.33 from
+        "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their
+        exact original form, accompanied by English versions from the 1914
+        translation by H. Rackham.
+      </div>
+    </div>
+  )
+}
diff --git a/test/integration/next-dynamic-css-asset-prefix/src/Component2.module.scss b/test/integration/next-dynamic-css-asset-prefix/src/Component2.module.scss
@@ -0,0 +1,13 @@
+.header {
+  font-style: italic;
+}
+
+.container {
+  background-color: #dddddd;
+  padding: 1rem;
+}
+
+.textContent {
+  color: #666;
+  letter-spacing: -1px;
+}
diff --git a/test/integration/next-dynamic-css-asset-prefix/src/Content.jsx b/test/integration/next-dynamic-css-asset-prefix/src/Content.jsx
@@ -0,0 +1,29 @@
+import styles from './Content.module.css'
+import Content2 from './Component2'
+
+export default function Content() {
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.header}>Where does it come from?</h1>
+      <div className={styles.textContent}>
+        Contrary to popular belief, Lorem Ipsum is not simply random text. It
+        has roots in a piece of classical Latin literature from 45 BC, making it
+        over 2000 years old. Richard McClintock, a Latin professor at
+        Hampden-Sydney College in Virginia, looked up one of the more obscure
+        Latin words, consectetur, from a Lorem Ipsum passage, and going through
+        the cites of the word in classical literature, discovered the
+        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
+        of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
+        Cicero, written in 45 BC. This book is a treatise on the theory of
+        ethics, very popular during the Renaissance. The first line of Lorem
+        Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
+        1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is
+        reproduced below for those interested. Sections 1.10.32 and 1.10.33 from
+        "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their
+        exact original form, accompanied by English versions from the 1914
+        translation by H. Rackham.
+      </div>
+      <Content2 />
+    </div>
+  )
+}
diff --git a/test/integration/next-dynamic-css-asset-prefix/src/Content.module.css b/test/integration/next-dynamic-css-asset-prefix/src/Content.module.css
@@ -0,0 +1,13 @@
+.header {
+  font-style: italic;
+}
+
+.container {
+  background-color: #dddddd;
+  padding: 1rem;
+}
+
+.textContent {
+  color: #666;
+  letter-spacing: -1px;
+}