fix(pages-dir): cannot load the same css module with both `import` and `next/dynamic`

[devjiwonchoi]

Issue

[!NOTE] This issue is Pages Router next start specific.

Summary

When a CSS file was loaded statically from path / and dynamically from path /foo, and the user navigates from / to /foo, the CSS file is not loaded in /foo.

Deep Dive

When a CSS file is server-rendered, it is cleaned up during the client render (e.g. Link navigation).

https://github.com/vercel/next.js/blob/678b487916039963323e8ea7898744036093545e/packages/next/src/client/index.tsx#L755-L760

If the target route /foo dynamically imports the same CSS file, the client will skip loading it (as it was already loaded statically). But the client will still clean it up the server-rendered CSS file as above, which will result in missing the expected styles.

Changes

Since we pass the list of required CSS files of the module to the client through the build manifest, included the dynamic-loaded CSS files to the corresponding paths of the build manifest.

How?

During the build, gather the dynamic CSS files from the dependency chunks, and append to the existing manifest entrypoint values.

Before

{ "/": ["baz.css"], "/foo": [] }

After

{ "/": ["baz.css"], "/foo": ["baz.css"] }

Related Links

Fixes #33286 Fixes #47655 Fixes #68328 Closes NDX-145

[devjiwonchoi]

• #68396 👈
• canary

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @devjiwonchoi and the rest of your teammates on Graphite

[ijjk]

Failing test suites

Commit: 370d8f92b0da981a1d212775781b4456199ae45a

pnpm test-dev test/e2e/dynamic-css-client-navigation/next-dynamic.test.ts

• dynamic-css-client-navigation next/dynamic > should not remove style when navigating from static imported component to next/dynamic
• dynamic-css-client-navigation next/dynamic > should not remove style when navigating from static imported component to next/dynamic with ssr: false

Expand output

● dynamic-css-client-navigation next/dynamic › should not remove style when navigating from static imported component to next/dynamic

expect(received).toBe(expected) // Object.is equality

Expected: "My background should be red!"
Received: "Red Button"

  14 |         .waitForElementByCss('#red-button')
  15 |         .text()
> 16 |     ).toBe('My background should be red!')
     |       ^
  17 |
  18 |     const buttonBgColor = await browser.eval(
  19 |       `window.getComputedStyle(document.querySelector('button')).backgroundColor`

  at Object.toBe (e2e/dynamic-css-client-navigation/next-dynamic.test.ts:16:7)

● dynamic-css-client-navigation next/dynamic › should not remove style when navigating from static imported component to next/dynamic with ssr: false

expect(received).toBe(expected) // Object.is equality

Expected: "My background should be red!"
Received: "Red Button"

  33 |         .waitForElementByCss('#red-button')
  34 |         .text()
> 35 |     ).toBe('My background should be red!')
     |       ^
  36 |
  37 |     const buttonBgColor = await browser.eval(
  38 |       `window.getComputedStyle(document.querySelector('button')).backgroundColor`

  at Object.toBe (e2e/dynamic-css-client-navigation/next-dynamic.test.ts:35:7)

Read more about building and testing Next.js in contributing.md.

pnpm test-dev test/e2e/dynamic-css-client-navigation/react-lazy.test.ts

• dynamic-css-client-navigation react lazy > should not remove style when navigating from static imported component to react lazy

Expand output

● dynamic-css-client-navigation react lazy › should not remove style when navigating from static imported component to react lazy

expect(received).toBe(expected) // Object.is equality

Expected: "My background should be red!"
Received: "Red Button"

  14 |         .waitForElementByCss('#red-button')
  15 |         .text()
> 16 |     ).toBe('My background should be red!')
     |       ^
  17 |
  18 |     const buttonBgColor = await browser.eval(
  19 |       `window.getComputedStyle(document.querySelector('button')).backgroundColor`

  at Object.toBe (e2e/dynamic-css-client-navigation/react-lazy.test.ts:16:7)

Read more about building and testing Next.js in contributing.md.

pnpm test test/integration/404-page/test/index.test.js (turbopack)

• 404 Page Support > production mode > should not cache for custom 404 page with gssp and revalidate disabled
• 404 Page Support > production mode > should not cache for custom 404 page with gssp and revalidate enabled
• 404 Page Support > production mode > should not cache for custom 404 page without gssp
• 404 Page Support > production mode > shows error with getInitialProps in pages/404 build
• 404 Page Support > production mode > does not show error with getStaticProps in pages/404 build
• 404 Page Support > production mode > shows error with getServerSideProps in pages/404 build

Expand output

● 404 Page Support › production mode › should not cache for custom 404 page with gssp and revalidate disabled

command failed with code 1 signal null
 ⚠ Linting is disabled.
   ▲ Next.js 15.0.4-canary.19 (Turbopack)

   Checking validity of types ...
   Creating an optimized production build ...
   Building (0/4) ...
   Building (1/4) 
   Building (2/4) 
   Building (3/4) 

> Build error occurred
[Error: ENOENT: no such file or directory, open '/root/actions-runner/_work/next.js/next.js/test/integration/404-page/.next/server/pages/_app/build-manifest.json'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/root/actions-runner/_work/next.js/next.js/test/integration/404-page/.next/server/pages/_app/build-manifest.json'
}

  308 |       ) {
  309 |         return reject(
> 310 |           new Error(
      |           ^
  311 |             `command failed with code ${code} signal ${signal}\n${mergedStdio}`
  312 |           )
  313 |         )

  at ChildProcess.<anonymous> (lib/next-test-utils.ts:310:11)

● 404 Page Support › production mode › should not cache for custom 404 page with gssp and revalidate enabled

dest already exists.

  at ../node_modules/.pnpm/[email protected]/node_modules/fs-extra/lib/move/move.js:41:31
  at ../node_modules/.pnpm/[email protected]/node_modules/universalify/index.js:21:54

● 404 Page Support › production mode › should not cache for custom 404 page without gssp

expect(received).toBe(expected) // Object.is equality

Expected: null
Received: "private, no-cache, no-store, max-age=0, must-revalidate"

  262 |         await killApp(app)
  263 |
> 264 |         expect(cache404).toBe(null)
      |                          ^
  265 |         expect(cacheNext).toBe(
  266 |           'private, no-cache, no-store, max-age=0, must-revalidate'
  267 |         )

  at Object.toBe (integration/404-page/test/index.test.js:264:26)

● 404 Page Support › production mode › shows error with getInitialProps in pages/404 build

dest already exists.

  at ../node_modules/.pnpm/[email protected]/node_modules/fs-extra/lib/move/move.js:41:31
  at ../node_modules/.pnpm/[email protected]/node_modules/universalify/index.js:21:54

● 404 Page Support › production mode › does not show error with getStaticProps in pages/404 build

dest already exists.

  at ../node_modules/.pnpm/[email protected]/node_modules/fs-extra/lib/move/move.js:41:31
  at ../node_modules/.pnpm/[email protected]/node_modules/universalify/index.js:21:54

● 404 Page Support › production mode › shows error with getServerSideProps in pages/404 build

dest already exists.

  at ../node_modules/.pnpm/[email protected]/node_modules/fs-extra/lib/move/move.js:41:31
  at ../node_modules/.pnpm/[email protected]/node_modules/universalify/index.js:21:54

Read more about building and testing Next.js in contributing.md.

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General

	vercel/next.js canary	vercel/next.js 08-01-test_add_current_repro	Change
buildDuration	19.6s	20.8s	⚠️ +1.2s
buildDurationCached	14.8s	14.7s	N/A
nodeModulesSize	404 MB	403 MB	N/A
nextStartRea..uration (ms)	471ms	468ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js 08-01-test_add_current_repro	Change
3073-HASH.js gzip	46.5 kB	45.4 kB	N/A
3898-HASH.js gzip	5.27 kB	5.27 kB	N/A
7183.HASH.js gzip	169 B	169 B	✓
b5cfd723-HASH.js gzip	52.6 kB	52.5 kB	N/A
framework-HASH.js gzip	57.3 kB	57.3 kB	N/A
main-app-HASH.js gzip	235 B	231 B	N/A
main-HASH.js gzip	33.2 kB	33.1 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	N/A
Overall change	169 B	169 B	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 08-01-test_add_current_repro	Change
polyfills-HASH.js gzip	39.4 kB	39.4 kB	✓
Overall change	39.4 kB	39.4 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js 08-01-test_add_current_repro	Change
_app-HASH.js gzip	193 B	193 B	✓
_error-HASH.js gzip	192 B	192 B	✓
amp-HASH.js gzip	513 B	508 B	N/A
css-HASH.js gzip	343 B	343 B	✓
dynamic-HASH.js gzip	1.85 kB	1.84 kB	N/A
edge-ssr-HASH.js gzip	265 B	264 B	N/A
head-HASH.js gzip	363 B	365 B	N/A
hooks-HASH.js gzip	392 B	391 B	N/A
image-HASH.js gzip	4.41 kB	4.41 kB	✓
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.77 kB	2.77 kB	N/A
routerDirect..HASH.js gzip	327 B	327 B	✓
script-HASH.js gzip	396 B	394 B	N/A
withRouter-HASH.js gzip	324 B	322 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	5.84 kB	5.84 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js 08-01-test_add_current_repro	Change
_buildManifest.js gzip	748 B	750 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 08-01-test_add_current_repro	Change
index.html gzip	525 B	524 B	N/A
link.html gzip	539 B	539 B	✓
withRouter.html gzip	520 B	519 B	N/A
Overall change	539 B	539 B	✓

Edge SSR bundle Size Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 08-01-test_add_current_repro	Change
edge-ssr.js gzip	128 kB	128 kB	⚠️ +109 B
page.js gzip	199 kB	189 kB	N/A
Overall change	128 kB	128 kB	⚠️ +109 B

Middleware size

	vercel/next.js canary	vercel/next.js 08-01-test_add_current_repro	Change
middleware-b..fest.js gzip	671 B	666 B	N/A
middleware-r..fest.js gzip	156 B	155 B	N/A
middleware.js gzip	31 kB	31 kB	N/A
edge-runtime..pack.js gzip	844 B	844 B	✓
Overall change	844 B	844 B	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js 08-01-test_add_current_repro	Change
196-experime...dev.js gzip	322 B	322 B	✓
196.runtime.dev.js gzip	314 B	314 B	✓
app-page-exp...dev.js gzip	320 kB	318 kB	N/A
app-page-exp..prod.js gzip	123 kB	122 kB	N/A
app-page-tur..prod.js gzip	136 kB	135 kB	N/A
app-page-tur..prod.js gzip	131 kB	130 kB	N/A
app-page.run...dev.js gzip	311 kB	309 kB	N/A
app-page.run..prod.js gzip	119 kB	118 kB	N/A
app-route-ex...dev.js gzip	36.1 kB	35.9 kB	N/A
app-route-ex..prod.js gzip	24.4 kB	24.3 kB	N/A
app-route-tu..prod.js gzip	24.4 kB	24.4 kB	N/A
app-route-tu..prod.js gzip	24.2 kB	24.1 kB	N/A
app-route.ru...dev.js gzip	37.7 kB	37.5 kB	N/A
app-route.ru..prod.js gzip	24.2 kB	24.1 kB	N/A
pages-api-tu..prod.js gzip	9.59 kB	9.59 kB	✓
pages-api.ru...dev.js gzip	11.4 kB	11.4 kB	✓
pages-api.ru..prod.js gzip	9.58 kB	9.58 kB	✓
pages-turbo...prod.js gzip	20.9 kB	20.9 kB	N/A
pages.runtim...dev.js gzip	26.5 kB	26.5 kB	N/A
pages.runtim..prod.js gzip	20.9 kB	20.9 kB	N/A
server.runti..prod.js gzip	916 kB	914 kB	N/A
Overall change	31.2 kB	31.2 kB	✓

build cache

	vercel/next.js canary	vercel/next.js 08-01-test_add_current_repro	Change
0.pack gzip	2.02 MB	1.86 MB	N/A
index.pack gzip	147 kB	143 kB	N/A
Overall change	0 B	0 B	✓

Diff details

Diff for page.js

Diff too large to display

Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for image-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
-  [2983],
+  [8358],
   {
-    /***/ 8916: /***/ (
+    /***/ 8942: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(4209);
+          return __webpack_require__(2864);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 9265: /***/ (module, exports, __webpack_require__) => {
+    /***/ 1673: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -30,27 +30,27 @@
           return Image;
         },
       });
-      const _interop_require_default = __webpack_require__(1739);
-      const _interop_require_wildcard = __webpack_require__(1474);
-      const _jsxruntime = __webpack_require__(7515);
+      const _interop_require_default = __webpack_require__(9608);
+      const _interop_require_wildcard = __webpack_require__(4856);
+      const _jsxruntime = __webpack_require__(2073);
       const _react = /*#__PURE__*/ _interop_require_wildcard._(
-        __webpack_require__(7611)
+        __webpack_require__(102)
       );
       const _reactdom = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(9577)
+        __webpack_require__(8693)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1436)
+        __webpack_require__(5838)
       );
-      const _getimgprops = __webpack_require__(8517);
-      const _imageconfig = __webpack_require__(2168);
-      const _imageconfigcontextsharedruntime = __webpack_require__(9202);
-      const _warnonce = __webpack_require__(6992);
-      const _routercontextsharedruntime = __webpack_require__(8155);
+      const _getimgprops = __webpack_require__(5726);
+      const _imageconfig = __webpack_require__(187);
+      const _imageconfigcontextsharedruntime = __webpack_require__(5786);
+      const _warnonce = __webpack_require__(3673);
+      const _routercontextsharedruntime = __webpack_require__(759);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(345)
+        __webpack_require__(2182)
       );
-      const _usemergedref = __webpack_require__(2806);
+      const _usemergedref = __webpack_require__(9363);
       // This is replaced by webpack define plugin
       const configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -371,7 +371,7 @@
       /***/
     },
 
-    /***/ 2806: /***/ (module, exports, __webpack_require__) => {
+    /***/ 9363: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -383,7 +383,7 @@
           return useMergedRef;
         },
       });
-      const _react = __webpack_require__(7611);
+      const _react = __webpack_require__(102);
       function useMergedRef(refA, refB) {
         const cleanupA = (0, _react.useRef)(() => {});
         const cleanupB = (0, _react.useRef)(() => {});
@@ -432,7 +432,7 @@
       /***/
     },
 
-    /***/ 8517: /***/ (
+    /***/ 5726: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -448,9 +448,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(6992);
-      const _imageblursvg = __webpack_require__(1692);
-      const _imageconfig = __webpack_require__(2168);
+      const _warnonce = __webpack_require__(3673);
+      const _imageblursvg = __webpack_require__(5499);
+      const _imageconfig = __webpack_require__(187);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -824,7 +824,7 @@
       /***/
     },
 
-    /***/ 1692: /***/ (__unused_webpack_module, exports) => {
+    /***/ 5499: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -879,7 +879,7 @@
       /***/
     },
 
-    /***/ 4673: /***/ (
+    /***/ 6157: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -905,11 +905,11 @@
           return getImageProps;
         },
       });
-      const _interop_require_default = __webpack_require__(1739);
-      const _getimgprops = __webpack_require__(8517);
-      const _imagecomponent = __webpack_require__(9265);
+      const _interop_require_default = __webpack_require__(9608);
+      const _getimgprops = __webpack_require__(5726);
+      const _imagecomponent = __webpack_require__(1673);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(345)
+        __webpack_require__(2182)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -941,7 +941,7 @@
       /***/
     },
 
-    /***/ 345: /***/ (__unused_webpack_module, exports) => {
+    /***/ 2182: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -976,7 +976,7 @@
       /***/
     },
 
-    /***/ 4209: /***/ (
+    /***/ 2864: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -992,10 +992,10 @@
       });
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/[email protected]/node_modules/react/jsx-runtime.js
-      var jsx_runtime = __webpack_require__(7515);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-7c8e5e7a-20241101_re_ngsqfltlxii45umrwe6rktuauy/node_modules/next/image.js
-      var next_image = __webpack_require__(7265);
-      var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // ./pages/nextjs.png
+      var jsx_runtime = __webpack_require__(2073);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-7c8e5e7a-20241101_re_ay5jspqvpcpk5357qiimbatlya/node_modules/next/image.js
+      var next_image = __webpack_require__(9915);
+      var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ const nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
         height: 1347,
@@ -1004,7 +1004,7 @@
           "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAMAAAACh/xsAAAAD1BMVEX////x8fH6+vrb29vo6Oh8o70bAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAH0lEQVR4nGNgwARMjIyMjCAGCzMzMwsTRISJCcRABwAEcAAkLCQfgAAAAABJRU5ErkJggg==",
         blurWidth: 8,
         blurHeight: 7,
-      }; // ./pages/image.js
+      }; // CONCATENATED MODULE: ./pages/image.js
       function ImagePage(props) {
         return /*#__PURE__*/ (0, jsx_runtime.jsxs)(jsx_runtime.Fragment, {
           children: [
@@ -1024,12 +1024,12 @@
       /***/
     },
 
-    /***/ 7265: /***/ (
+    /***/ 9915: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(4673);
+      module.exports = __webpack_require__(6157);
 
       /***/
     },
@@ -1038,8 +1038,8 @@
     // webpackRuntimeModules
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
-    /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(8916)
+    /******/ __webpack_require__.O(0, [2888, 9774, 179], () =>
+      __webpack_exec__(8942)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for 3073-HASH.js

Diff too large to display

Diff for b5cfd723-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

failed to diff

Diff for app-page-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js

failed to diff

Diff for app-page.runtime.prod.js

Diff too large to display

Diff for app-route-ex..ntime.dev.js

Diff too large to display

Diff for app-route-ex..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route.runtime.dev.js

Diff too large to display

Diff for app-route.ru..time.prod.js

Diff too large to display

Diff for pages-turbo...time.prod.js

Diff too large to display

Diff for pages.runtime.dev.js

Diff too large to display

Diff for pages.runtime.prod.js

Diff too large to display

Diff for server.runtime.prod.js

failed to diff

Commit: 370d8f92b0da981a1d212775781b4456199ae45a

[jantimon]

@devjiwonchoi I noticed that your solution was removed from the PR but the new tests remain - would you mind sharing your thoughts on this change?

[devjiwonchoi]

@jantimon Hi, I'm investigating relevant issues and trying to cover more edge cases, preventing similar cases. We'll find what's the best approach for you and the community's issue. Thank you for your patience!

[jantimon]

Thanks for your quick response :)

[devjiwonchoi]

Superseded by #72959