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

devjiwonchoi · 2024-08-01T12:16:23Z

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).

next.js/packages/next/src/client/index.tsx

Lines 755 to 760 in 678b487

    
           // Finally, clean up server rendered stylesheets: 
        
           looseToArray<HTMLLinkElement>( 
        
             document.querySelectorAll('link[data-n-p]') 
        
           ).forEach((el) => { 
        
             el.parentNode!.removeChild(el) 
        
           })

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.

Previous Work

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"] }

Failing test suites

Commit: 370d8f9

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 · 2024-08-01T12:22:59Z

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: 370d8f9

test/production/pages-dir/next-dynamic-css-module/index.test.ts

[no ci]

This reverts commit 85c2565.

[no ci]

devjiwonchoi · 2024-11-19T14:08:11Z

Superseded by #72959

ijjk added created-by: Next.js team PRs by the Next.js team. tests labels Aug 1, 2024

devjiwonchoi changed the title ~~test: add current repro~~ fix(pages-dir): cannot load the same css module with both import and next/dynamic Aug 1, 2024

devjiwonchoi changed the title ~~fix(pages-dir): cannot load the same css module with both import and next/dynamic~~ fix(pages-dir): cannot load the same css module with both import and next/dynamic Aug 1, 2024

eps1lon reviewed Aug 1, 2024

View reviewed changes

test/production/pages-dir/next-dynamic-css-module/index.test.ts Outdated Show resolved Hide resolved

test/production/pages-dir/next-dynamic-css-module/index.test.ts Outdated Show resolved Hide resolved

ijjk added the type: next label Aug 3, 2024

samcx mentioned this pull request Aug 6, 2024

Next.js removes css modules causing unstyled pages in production #68328

Closed

joaogarin mentioned this pull request Aug 22, 2024

[v13] css modules not carried with dynamic imports #44994

Open

1 task

devjiwonchoi force-pushed the 08-01-test_add_current_repro branch 3 times, most recently from b68f4eb to 3820b2b Compare August 27, 2024 16:14

devjiwonchoi force-pushed the 08-01-test_add_current_repro branch from 3820b2b to a11a69f Compare August 27, 2024 17:32

devjiwonchoi marked this pull request as ready for review August 27, 2024 19:02

devjiwonchoi requested review from eps1lon and ijjk August 27, 2024 19:05

devjiwonchoi added 20 commits November 4, 2024 16:57

no build-manifest

86497b0

clean up mini css

7f861e9

remove data-n-p only if is in build manifest

99423fa

wip

a00eb34

nope, wrong

a87e689

separate dynamic import test

5dab6d1

[no ci]

fix

0b89b9e

Revert "infer types"

a0501de

This reverts commit 85c2565.

revert unnecessary change

bb15770

test: edge

957e6a3

pages only

bb1c11e

test

a499524

add repro for dynamic import

e0103d7

add route to react-loadable-manifest

9e66b9c

dynamic css

3357596

test

e2af950

[no ci]

revert

472c4f9

revert unnecessary changes

cb454cf

on demand

24017ac

on demand

0373d75

devjiwonchoi force-pushed the 08-01-test_add_current_repro branch from e1f6e13 to 0373d75 Compare November 4, 2024 08:03

devjiwonchoi added 4 commits November 4, 2024 17:04

uninteded during rebase

f3ae3db

test: move to dynamic-css-client-navigation

60e12e8

move test

a35dcfb

remove dynamic import for now

370d8f9

devjiwonchoi closed this Nov 19, 2024

devjiwonchoi deleted the 08-01-test_add_current_repro branch November 19, 2024 14:08

github-actions bot added the locked label Dec 4, 2024

github-actions bot locked as resolved and limited conversation to collaborators Dec 4, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

devjiwonchoi commented Aug 1, 2024 •

edited

Loading

devjiwonchoi commented Aug 1, 2024

ijjk commented Aug 1, 2024 •

edited

Loading

ijjk commented Aug 1, 2024 •

edited

Loading

devjiwonchoi commented Nov 19, 2024

	// Finally, clean up server rendered stylesheets:
	looseToArray<HTMLLinkElement>(
	document.querySelectorAll('link[data-n-p]')
	).forEach((el) => {
	el.parentNode!.removeChild(el)
	})

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

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

Conversation

devjiwonchoi commented Aug 1, 2024 • edited Loading

Issue

Summary

Deep Dive

Changes

How?

Before

After

Related Links

devjiwonchoi commented Aug 1, 2024

ijjk commented Aug 1, 2024 • edited Loading

Failing test suites

ijjk commented Aug 1, 2024 • edited Loading

Stats from current PR

devjiwonchoi commented Nov 19, 2024

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

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

devjiwonchoi commented Aug 1, 2024 •

edited

Loading

ijjk commented Aug 1, 2024 •

edited

Loading

ijjk commented Aug 1, 2024 •

edited

Loading