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: e1f6e13

pnpm test-dev test/e2e/pages-dir/css-module/next-dynamic.test.ts

pages-dir-css-module-next-dynamic-client-navigation > edge > should not remove style when navigating from static imported component with on demand next/dynamic to on demand next/dynamic
pages-dir-css-module-next-dynamic-client-navigation > nodejs > should not remove style when navigating from static imported component with on demand next/dynamic to on demand next/dynamic

Expand output

● pages-dir-css-module-next-dynamic-client-navigation › nodejs › should not remove style when navigating from static imported component with on demand next/dynamic to on demand next/dynamic

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

Expected: "rgb(255, 0, 0)"
Received: "rgb(239, 239, 239)"

  72 |       )
  73 |       // red
> 74 |       expect(buttonBgColor).toBe('rgb(255, 0, 0)')
     |                             ^
  75 |     })
  76 |   })
  77 |

  at Object.toBe (e2e/pages-dir/css-module/next-dynamic.test.ts:74:29)

● pages-dir-css-module-next-dynamic-client-navigation › edge › should not remove style when navigating from static imported component with on demand next/dynamic to on demand next/dynamic

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

Expected: "rgb(255, 0, 0)"
Received: "rgb(239, 239, 239)"

  142 |       )
  143 |       // red
> 144 |       expect(buttonBgColor).toBe('rgb(255, 0, 0)')
      |                             ^
  145 |     })
  146 |   })
  147 | })

  at Object.toBe (e2e/pages-dir/css-module/next-dynamic.test.ts:144:29)

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

pnpm test-start test/e2e/pages-dir/css-module/dynamic-import.test.ts

pages-dir-css-module-next-dynamic-client-navigation > edge > should not remove style when navigating from static imported component to dynamic import
pages-dir-css-module-next-dynamic-client-navigation > nodejs > should not remove style when navigating from static imported component to dynamic import

Expand output

● pages-dir-css-module-next-dynamic-client-navigation › nodejs › should not remove style when navigating from static imported component to dynamic import

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

Expected: not "rgb(239, 239, 239)"

  21 |       )
  22 |       // not gray
> 23 |       expect(buttonBgColor).not.toBe('rgb(239, 239, 239)')
     |                                 ^
  24 |       // but red
  25 |       expect(buttonBgColor).toBe('rgb(255, 0, 0)')
  26 |     })

  at Object.toBe (e2e/pages-dir/css-module/dynamic-import.test.ts:23:33)

● pages-dir-css-module-next-dynamic-client-navigation › edge › should not remove style when navigating from static imported component to dynamic import

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

Expected: not "rgb(239, 239, 239)"

  42 |       )
  43 |       // not gray
> 44 |       expect(buttonBgColor).not.toBe('rgb(239, 239, 239)')
     |                                 ^
  45 |       // but red
  46 |       expect(buttonBgColor).toBe('rgb(255, 0, 0)')
  47 |     })

  at Object.toBe (e2e/pages-dir/css-module/dynamic-import.test.ts:44:33)

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

TURBOPACK=1 pnpm test-dev test/development/acceptance/ReactRefreshLogBox-builtins.test.ts (turbopack)

ReactRefreshLogBox turbo > Module not found (missing global CSS)

Expand output

● ReactRefreshLogBox turbo › Module not found (missing global CSS)

Expected no Redbox but found one
header: Build Error
Next.js (15.0.0-canary.152) (turbo)

Failed to compile
description: Failed to compile
source: ./pages/_app.js:1:1
Module not found: Can't resolve './non-existent.css'
> 1 | export default function App({ Component, pageProps }) {
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  2 |   return <Component {...pageProps} />
  3 | }

https://nextjs.org/docs/messages/module-not-found

  239 |       `
  240 |     )
> 241 |     await session.assertNoRedbox()
      |     ^
  242 |     expect(
  243 |       await session.evaluate(() => document.documentElement.innerHTML)
  244 |     ).toContain('index page')

  at Object.<anonymous> (development/acceptance/ReactRefreshLogBox-builtins.test.ts:241:5)

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	17.5s	18.3s	⚠️ +806ms
buildDurationCached	8.5s	7.5s	N/A
nodeModulesSize	358 MB	357 MB	N/A
nextStartRea..uration (ms)	429ms	431ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js 08-01-test_add_current_repro	Change
1062.HASH.js gzip	169 B	168 B	N/A
2cd9da90-HASH.js gzip	52 kB	52 kB	N/A
5867-HASH.js gzip	42.5 kB	42.4 kB	N/A
8503-HASH.js gzip	5.25 kB	5.25 kB	N/A
framework-HASH.js gzip	56.9 kB	56.9 kB	N/A
main-app-HASH.js gzip	223 B	224 B	N/A
main-HASH.js gzip	32.6 kB	32.5 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	N/A
Overall change	0 B	0 B	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 08-01-test_add_current_repro	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 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	191 B	191 B	✓
amp-HASH.js gzip	511 B	510 B	N/A
css-HASH.js gzip	342 B	343 B	N/A
dynamic-HASH.js gzip	1.84 kB	1.84 kB	N/A
edge-ssr-HASH.js gzip	265 B	266 B	N/A
head-HASH.js gzip	362 B	364 B	N/A
hooks-HASH.js gzip	392 B	392 B	✓
image-HASH.js gzip	4.4 kB	4.4 kB	✓
index-HASH.js gzip	268 B	267 B	N/A
link-HASH.js gzip	2.81 kB	2.81 kB	N/A
routerDirect..HASH.js gzip	329 B	327 B	N/A
script-HASH.js gzip	398 B	396 B	N/A
withRouter-HASH.js gzip	325 B	324 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	5.28 kB	5.28 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js 08-01-test_add_current_repro	Change
_buildManifest.js gzip	749 B	749 B	✓
Overall change	749 B	749 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 08-01-test_add_current_repro	Change
index.html gzip	522 B	523 B	N/A
link.html gzip	536 B	537 B	N/A
withRouter.html gzip	518 B	519 B	N/A
Overall change	0 B	0 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js 08-01-test_add_current_repro	Change
edge-ssr.js gzip	128 kB	128 kB	N/A
page.js gzip	180 kB	179 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js 08-01-test_add_current_repro	Change
middleware-b..fest.js gzip	672 B	666 B	N/A
middleware-r..fest.js gzip	156 B	157 B	N/A
middleware.js gzip	29.9 kB	29.9 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
973-experime...dev.js gzip	322 B	322 B	✓
973.runtime.dev.js gzip	314 B	314 B	✓
app-page-exp...dev.js gzip	317 kB	317 kB	N/A
app-page-exp..prod.js gzip	125 kB	125 kB	N/A
app-page-tur..prod.js gzip	139 kB	139 kB	N/A
app-page-tur..prod.js gzip	134 kB	134 kB	N/A
app-page.run...dev.js gzip	305 kB	305 kB	N/A
app-page.run..prod.js gzip	121 kB	121 kB	N/A
app-route-ex...dev.js gzip	31.2 kB	31.2 kB	✓
app-route-ex..prod.js gzip	21.1 kB	21.1 kB	✓
app-route-tu..prod.js gzip	21.1 kB	21.1 kB	✓
app-route-tu..prod.js gzip	20.9 kB	20.9 kB	✓
app-route.ru...dev.js gzip	32.9 kB	32.9 kB	✓
app-route.ru..prod.js gzip	20.9 kB	20.9 kB	✓
pages-api-tu..prod.js gzip	9.62 kB	9.62 kB	✓
pages-api.ru...dev.js gzip	11.5 kB	11.5 kB	✓
pages-api.ru..prod.js gzip	9.61 kB	9.61 kB	✓
pages-turbo...prod.js gzip	20.8 kB	20.8 kB	N/A
pages.runtim...dev.js gzip	26.4 kB	26.4 kB	N/A
pages.runtim..prod.js gzip	20.8 kB	20.8 kB	N/A
server.runti..prod.js gzip	57.7 kB	57.7 kB	N/A
Overall change	180 kB	180 kB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 08-01-test_add_current_repro	Change
0.pack gzip	1.65 MB	1.6 MB	N/A
index.pack gzip	130 kB	131 kB	⚠️ +450 B
Overall change	130 kB	131 kB	⚠️ +450 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([
   [8358],
   {
-    /***/ 8908: /***/ (
+    /***/ 8176: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(2111);
+          return __webpack_require__(934);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 6308: /***/ (module, exports, __webpack_require__) => {
+    /***/ 5057: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,17 +40,17 @@
         __webpack_require__(1955)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(2383)
+        __webpack_require__(7163)
       );
-      const _getimgprops = __webpack_require__(5640);
-      const _imageconfig = __webpack_require__(2758);
-      const _imageconfigcontextsharedruntime = __webpack_require__(899);
-      const _warnonce = __webpack_require__(3878);
-      const _routercontextsharedruntime = __webpack_require__(869);
+      const _getimgprops = __webpack_require__(5447);
+      const _imageconfig = __webpack_require__(1650);
+      const _imageconfigcontextsharedruntime = __webpack_require__(1953);
+      const _warnonce = __webpack_require__(5054);
+      const _routercontextsharedruntime = __webpack_require__(4445);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6501)
+        __webpack_require__(7406)
       );
-      const _usemergedref = __webpack_require__(3994);
+      const _usemergedref = __webpack_require__(3303);
       // This is replaced by webpack define plugin
       const configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -371,7 +371,7 @@
       /***/
     },
 
-    /***/ 3994: /***/ (module, exports, __webpack_require__) => {
+    /***/ 3303: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -440,7 +440,7 @@
       /***/
     },
 
-    /***/ 5640: /***/ (
+    /***/ 5447: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -456,9 +456,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(3878);
-      const _imageblursvg = __webpack_require__(4317);
-      const _imageconfig = __webpack_require__(2758);
+      const _warnonce = __webpack_require__(5054);
+      const _imageblursvg = __webpack_require__(1731);
+      const _imageconfig = __webpack_require__(1650);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -830,7 +830,7 @@
       /***/
     },
 
-    /***/ 4317: /***/ (__unused_webpack_module, exports) => {
+    /***/ 1731: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -885,7 +885,7 @@
       /***/
     },
 
-    /***/ 8580: /***/ (
+    /***/ 9833: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -912,10 +912,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(9608);
-      const _getimgprops = __webpack_require__(5640);
-      const _imagecomponent = __webpack_require__(6308);
+      const _getimgprops = __webpack_require__(5447);
+      const _imagecomponent = __webpack_require__(5057);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6501)
+        __webpack_require__(7406)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -947,7 +947,7 @@
       /***/
     },
 
-    /***/ 6501: /***/ (__unused_webpack_module, exports) => {
+    /***/ 7406: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -982,7 +982,7 @@
       /***/
     },
 
-    /***/ 2111: /***/ (
+    /***/ 934: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -999,8 +999,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@19.0.0-rc-7771d3a7-20240827/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(5815);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-7771d3a7-20240827_re_h4bgdqagqtli4q7bnw2ajnn4vm/node_modules/next/image.js
-      var next_image = __webpack_require__(1878);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-7771d3a7-20240827_re_qz7eh3ruj3cscolfxbcb265hza/node_modules/next/image.js
+      var next_image = __webpack_require__(7649);
       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",
@@ -1030,12 +1030,12 @@
       /***/
     },
 
-    /***/ 1878: /***/ (
+    /***/ 7649: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(8580);
+      module.exports = __webpack_require__(9833);
 
       /***/
     },
@@ -1045,7 +1045,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [2888, 9774, 179], () =>
-      __webpack_exec__(8908)
+      __webpack_exec__(8176)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for 5867-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

Diff too large to display

Diff for app-page.runtime.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

@@ -30,8 +30,8 @@ To never revalidate, you can set revalidate to \`false\` (only ran once at build
 To revalidate as soon as possible, you can set the value to \`1\`.`);data.revalidate>31536e3&&console.warn(`Warning: A page's revalidate option was set to more than a year for ${req.url}. This may have been done in error.
 To only run getStaticProps at build-time and not revalidate at runtime, you can set \`revalidate\` to \`false\`!`),revalidate=data.revalidate}else throw Error(`A page's revalidate option must be seconds expressed as a natural number for ${req.url}. Mixed numbers, such as '${data.revalidate}', cannot be used.
 Try changing the value to '${Math.ceil(data.revalidate)}' or using \`Math.ceil()\` if you're computing the value.`)}else if(!0===data.revalidate)revalidate=1;else if(!1===data.revalidate||void 0===data.revalidate)revalidate=!1;else throw Error(`A page's revalidate option must be seconds expressed as a natural number. Mixed numbers and strings cannot be used. Received '${JSON.stringify(data.revalidate)}' for ${req.url}`)}else revalidate=!1;if(props.pageProps=Object.assign({},props.pageProps,"props"in data?data.props:void 0),metadata.revalidate=revalidate,metadata.pageData=props,metadata.isNotFound)return new RenderResult(null,{metadata})}if(getServerSideProps&&(props.__N_SSP=!0),getServerSideProps&&!isFallback){let data;let canAccessRes=!0,resOrProxy=res,deferredContent=!1;resOrProxy=new Proxy(res,{get:function(obj,prop){if(!canAccessRes){let message=`You should not access 'res' after getServerSideProps resolves.
-Read more: https://nextjs.org/docs/messages/gssp-no-mutating-res`;if(deferredContent)throw Error(message);warn(message)}return reflect.g.get(obj,prop,res)}});try{data=await (0,tracer_.getTracer)().trace(trace_constants.xj.getServerSideProps,{spanName:`getServerSideProps ${pathname}`,attributes:{"next.route":pathname}},async()=>getServerSideProps({req:req,res:resOrProxy,query,resolvedUrl:renderOpts.resolvedUrl,...pageIsDynamic?{params:params}:void 0,...!1!==previewData?{draftMode:!0,preview:!0,previewData:previewData}:void 0,locales:renderOpts.locales,locale:renderOpts.locale,defaultLocale:renderOpts.defaultLocale})),canAccessRes=!1,metadata.revalidate=0}catch(serverSidePropsError){throw"object"==typeof serverSidePropsError&&null!==serverSidePropsError&&"name"in serverSidePropsError&&"message"in serverSidePropsError&&"ENOENT"===serverSidePropsError.code&&delete serverSidePropsError.code,serverSidePropsError}if(null==data)throw Error(constants.Lx);data.props instanceof Promise&&(deferredContent=!0);let invalidKeys=Object.keys(data).filter(key=>"props"!==key&&"redirect"!==key&&"notFound"!==key);if(data.unstable_notFound)throw Error(`unstable_notFound has been renamed to notFound, please update the field to continue. Page: ${pathname}`);if(data.unstable_redirect)throw Error(`unstable_redirect has been renamed to redirect, please update the field to continue. Page: ${pathname}`);if(invalidKeys.length)throw Error(invalidKeysMsg("getServerSideProps",invalidKeys));if("notFound"in data&&data.notFound){if("/404"===pathname)throw Error('The /404 page can not return notFound in "getStaticProps", please remove it to continue!');return metadata.isNotFound=!0,new RenderResult(null,{metadata})}if("redirect"in data&&"object"==typeof data.redirect&&(checkRedirectValues(data.redirect,req,"getServerSideProps"),data.props={__N_REDIRECT:data.redirect.destination,__N_REDIRECT_STATUS:getRedirectStatus(data.redirect)},void 0!==data.redirect.basePath&&(data.props.__N_REDIRECT_BASE_PATH=data.redirect.basePath),metadata.isRedirect=!0),deferredContent&&(data.props=await data.props),(dev||isBuildTimeSSG)&&!isSerializableProps(pathname,"getServerSideProps",data.props))throw Error("invariant: getServerSideProps did not return valid props. Please report this.");props.pageProps=Object.assign({},props.pageProps,data.props),metadata.pageData=props}if(!isSSG&&!getServerSideProps&&Object.keys((null==props?void 0:props.pageProps)||{}).includes("url")&&console.warn(`The prop \`url\` is a reserved prop in Next.js for legacy reasons and will be overridden on page ${pathname}
-See more info here: https://nextjs.org/docs/messages/reserved-page-prop`),isNextDataRequest&&!isSSG||metadata.isRedirect)return new RenderResult(JSON.stringify(props),{metadata});if(isFallback&&(props.pageProps={}),isResSent(res)&&!isSSG)return new RenderResult(null,{metadata});let filteredBuildManifest=buildManifest;if(isAutoExport&&pageIsDynamic){let _page;let page=(_page=(function(page){let normalized=/^\/index(\/|$)/.test(page)&&!isDynamicRoute(page)?"/index"+page:"/"===page?"/index":ensureLeadingSlash(page);{let{posix}=__webpack_require__("path"),resolvedPage=posix.normalize(normalized);if(resolvedPage!==normalized)throw new NormalizeError("Requested and resolved page mismatch: "+normalized+" "+resolvedPage)}return normalized})(pathname).replace(/\\/g,"/")).startsWith("/index/")&&!isDynamicRoute(_page)?_page.slice(6):"/index"!==_page?_page:"/";page in filteredBuildManifest.pages&&(filteredBuildManifest={...filteredBuildManifest,pages:{...filteredBuildManifest.pages,[page]:[...filteredBuildManifest.pages[page],...filteredBuildManifest.lowPriorityFiles.filter(f=>f.includes("_buildManifest"))]},lowPriorityFiles:filteredBuildManifest.lowPriorityFiles.filter(f=>!f.includes("_buildManifest"))})}let Body=({children})=>inAmpMode?children:(0,jsx_runtime_namespaceObject.jsx)("div",{id:"__next",children:children}),renderDocument=async()=>{let documentInitialPropsRes,styles;async function loadDocumentInitialProps(renderShell){let renderPage=async(options={})=>{if(ctx.err&&ErrorDebug)return renderShell&&renderShell(App,Component),{html:await renderToString((0,jsx_runtime_namespaceObject.jsx)(Body,{children:(0,jsx_runtime_namespaceObject.jsx)(ErrorDebug,{error:ctx.err})})),head};if(dev&&(props.router||props.Component))throw Error("'router' and 'Component' can not be returned in getInitialProps from _app.js https://nextjs.org/docs/messages/cant-override-next-props");let{App:EnhancedApp,Component:EnhancedComponent}="function"==typeof options?{App:App,Component:options(Component)}:{App:options.enhanceApp?options.enhanceApp(App):App,Component:options.enhanceComponent?options.enhanceComponent(Component):Component},stream=await renderShell(EnhancedApp,EnhancedComponent);return await stream.allReady,{html:await streamToString(stream),head}},documentCtx={...ctx,renderPage},docProps=await loadGetInitialProps(Document,documentCtx);if(isResSent(res)&&!isSSG)return null;if(!docProps||"string"!=typeof docProps.html)throw Error(`"${getDisplayName(Document)}.getInitialProps()" should resolve to an object with a "html" prop set with a valid html string`);return{docProps,documentCtx}}Document.__NEXT_BUILTIN_DOCUMENT__;let renderContent=(_App,_Component)=>{let EnhancedApp=_App||App,EnhancedComponent=_Component||Component;return ctx.err&&ErrorDebug?(0,jsx_runtime_namespaceObject.jsx)(Body,{children:(0,jsx_runtime_namespaceObject.jsx)(ErrorDebug,{error:ctx.err})}):(0,jsx_runtime_namespaceObject.jsx)(Body,{children:(0,jsx_runtime_namespaceObject.jsx)(AppContainerWithIsomorphicFiberStructure,{children:renderPageTree(EnhancedApp,EnhancedComponent,{...props,router})})})},renderShell=async(EnhancedApp,EnhancedComponent)=>{let content=renderContent(EnhancedApp,EnhancedComponent);return await function({ReactDOMServer,element,streamOptions}){return(0,tracer_.getTracer)().trace(trace_constants.k0.renderToReadableStream,async()=>ReactDOMServer.renderToReadableStream(element,streamOptions))}({ReactDOMServer:server_edge_default(),element:content})},hasDocumentGetInitialProps=!!Document.getInitialProps,[rawStyledJsxInsertedHTML,content]=await Promise.all([renderToString(styledJsxInsertedHTML()),(async()=>{if(hasDocumentGetInitialProps){if(null===(documentInitialPropsRes=await loadDocumentInitialProps(renderShell)))return null;let{docProps}=documentInitialPropsRes;return docProps.html}{documentInitialPropsRes={};let stream=await renderShell(App,Component);return await stream.allReady,streamToString(stream)}})()]);if(null===content)return null;let{docProps}=documentInitialPropsRes||{};return hasDocumentGetInitialProps?(styles=docProps.styles,head=docProps.head):(styles=jsxStyleRegistry.styles(),jsxStyleRegistry.flush()),{contentHTML:rawStyledJsxInsertedHTML+content,documentElement:htmlProps=>(0,jsx_runtime_namespaceObject.jsx)(Document,{...htmlProps,...docProps}),head,headTags:[],styles}};null==(_getTracer_getRootSpanAttributes=(0,tracer_.getTracer)().getRootSpanAttributes())||_getTracer_getRootSpanAttributes.set("next.route",renderOpts.page);let documentResult=await (0,tracer_.getTracer)().trace(trace_constants.xj.renderDocument,{spanName:`render route (pages) ${renderOpts.page}`,attributes:{"next.route":renderOpts.page}},async()=>renderDocument());if(!documentResult)return new RenderResult(null,{metadata});let dynamicImportsIds=new Set,dynamicImports=new Set;for(let mod of reactLoadableModules){let manifestItem=reactLoadableManifest[mod];manifestItem&&(dynamicImportsIds.add(manifestItem.id),manifestItem.files.forEach(item=>{dynamicImports.add(item)}))}let hybridAmp=ampState.hybrid,docComponentsRendered={},{assetPrefix,buildId,customServer,defaultLocale,disableOptimizedLoading,domainLocales,locale,locales,runtimeConfig}=renderOpts,htmlProps={__NEXT_DATA__:{props,page:pathname,query,buildId,assetPrefix:""===assetPrefix?void 0:assetPrefix,runtimeConfig,nextExport:!0===nextExport||void 0,autoExport:!0===isAutoExport||void 0,isFallback,isExperimentalCompile,dynamicIds:0===dynamicImportsIds.size?void 0:Array.from(dynamicImportsIds),err:renderOpts.err?(err=renderOpts.err,dev?(source="server",source=err[symbolError]||"server",{name:err.name,source,message:strip_ansi_default()(err.message),stack:err.stack,digest:err.digest}):{name:"Internal Server Error.",message:"500 - Internal Server Error.",statusCode:500}):void 0,gsp:!!getStaticProps||void 0,gssp:!!getServerSideProps||void 0,customServer,gip:!!hasPageGetInitialProps||void 0,appGip:!defaultAppGetInitialProps||void 0,locale,locales,defaultLocale,domainLocales,isPreview:!0===isPreview||void 0,notFoundSrcPage:notFoundSrcPage&&dev?notFoundSrcPage:void 0},strictNextHead:renderOpts.strictNextHead,buildManifest:filteredBuildManifest,docComponentsRendered,dangerousAsPath:router.asPath,canonicalBase:!renderOpts.ampPath&&request_meta_getRequestMeta(req,"didStripLocale")?`${renderOpts.canonicalBase||""}/${renderOpts.locale}`:renderOpts.canonicalBase,ampPath,inAmpMode,isDevelopment:!!dev,hybridAmp,dynamicImports:Array.from(dynamicImports),assetPrefix,unstable_runtimeJS:void 0,unstable_JsPreload:pageConfig.unstable_JsPreload,assetQueryString,scriptLoader,locale,disableOptimizedLoading,head:documentResult.head,headTags:documentResult.headTags,styles:documentResult.styles,crossOrigin:renderOpts.crossOrigin,optimizeCss:renderOpts.optimizeCss,nextConfigOutput:renderOpts.nextConfigOutput,nextScriptWorkers:renderOpts.nextScriptWorkers,runtime:globalRuntime,largePageDataBytes:renderOpts.largePageDataBytes,nextFontManifest:renderOpts.nextFontManifest,experimentalClientTraceMetadata:renderOpts.experimental.clientTraceMetadata},document=(0,jsx_runtime_namespaceObject.jsx)(amp_context_shared_runtime_AmpStateContext.Provider,{value:ampState,children:(0,jsx_runtime_namespaceObject.jsx)(HtmlContext.Provider,{value:htmlProps,children:documentResult.documentElement(htmlProps)})}),documentHTML=await (0,tracer_.getTracer)().trace(trace_constants.xj.renderToString,async()=>renderToString(document));{let nonRenderedComponents=[];for(let comp of["Main","Head","NextScript","Html"])docComponentsRendered[comp]||nonRenderedComponents.push(comp);if(nonRenderedComponents.length){let missingComponentList=nonRenderedComponents.map(e=>`<${e} />`).join(", "),plural=1!==nonRenderedComponents.length?"s":"";console.warn(`Your custom Document (pages/_document) did not render all the required subcomponent${plural}.
+Read more: https://nextjs.org/docs/messages/gssp-no-mutating-res`;if(deferredContent)throw Error(message);warn(message)}return reflect.g.get(obj,prop,res)}});try{data=await (0,tracer_.getTracer)().trace(trace_constants.xj.getServerSideProps,{spanName:`getServerSideProps ${pathname}`,attributes:{"next.route":pathname}},async()=>getServerSideProps({req:req,res:resOrProxy,query,resolvedUrl:renderOpts.resolvedUrl,...pageIsDynamic?{params:params}:void 0,...!1!==previewData?{draftMode:!0,preview:!0,previewData:previewData}:void 0,locales:renderOpts.locales,locale:renderOpts.locale,defaultLocale:renderOpts.defaultLocale})),canAccessRes=!1}catch(serverSidePropsError){throw"object"==typeof serverSidePropsError&&null!==serverSidePropsError&&"name"in serverSidePropsError&&"message"in serverSidePropsError&&"ENOENT"===serverSidePropsError.code&&delete serverSidePropsError.code,serverSidePropsError}if(null==data)throw Error(constants.Lx);data.props instanceof Promise&&(deferredContent=!0);let invalidKeys=Object.keys(data).filter(key=>"props"!==key&&"redirect"!==key&&"notFound"!==key);if(data.unstable_notFound)throw Error(`unstable_notFound has been renamed to notFound, please update the field to continue. Page: ${pathname}`);if(data.unstable_redirect)throw Error(`unstable_redirect has been renamed to redirect, please update the field to continue. Page: ${pathname}`);if(invalidKeys.length)throw Error(invalidKeysMsg("getServerSideProps",invalidKeys));if("notFound"in data&&data.notFound){if("/404"===pathname)throw Error('The /404 page can not return notFound in "getStaticProps", please remove it to continue!');return metadata.isNotFound=!0,new RenderResult(null,{metadata})}if("redirect"in data&&"object"==typeof data.redirect&&(checkRedirectValues(data.redirect,req,"getServerSideProps"),data.props={__N_REDIRECT:data.redirect.destination,__N_REDIRECT_STATUS:getRedirectStatus(data.redirect)},void 0!==data.redirect.basePath&&(data.props.__N_REDIRECT_BASE_PATH=data.redirect.basePath),metadata.isRedirect=!0),deferredContent&&(data.props=await data.props),(dev||isBuildTimeSSG)&&!isSerializableProps(pathname,"getServerSideProps",data.props))throw Error("invariant: getServerSideProps did not return valid props. Please report this.");props.pageProps=Object.assign({},props.pageProps,data.props),metadata.pageData=props}if(!isSSG&&!getServerSideProps&&Object.keys((null==props?void 0:props.pageProps)||{}).includes("url")&&console.warn(`The prop \`url\` is a reserved prop in Next.js for legacy reasons and will be overridden on page ${pathname}
+See more info here: https://nextjs.org/docs/messages/reserved-page-prop`),isNextDataRequest&&!isSSG||metadata.isRedirect)return new RenderResult(JSON.stringify(props),{metadata});if(isFallback&&(props.pageProps={}),isResSent(res)&&!isSSG)return new RenderResult(null,{metadata});let filteredBuildManifest=buildManifest;if(isAutoExport&&pageIsDynamic){let _page;let page=(_page=(function(page){let normalized=/^\/index(\/|$)/.test(page)&&!isDynamicRoute(page)?"/index"+page:"/"===page?"/index":ensureLeadingSlash(page);{let{posix}=__webpack_require__("path"),resolvedPage=posix.normalize(normalized);if(resolvedPage!==normalized)throw new NormalizeError("Requested and resolved page mismatch: "+normalized+" "+resolvedPage)}return normalized})(pathname).replace(/\\/g,"/")).startsWith("/index/")&&!isDynamicRoute(_page)?_page.slice(6):"/index"!==_page?_page:"/";page in filteredBuildManifest.pages&&(filteredBuildManifest={...filteredBuildManifest,pages:{...filteredBuildManifest.pages,[page]:[...filteredBuildManifest.pages[page],...filteredBuildManifest.lowPriorityFiles.filter(f=>f.includes("_buildManifest"))]},lowPriorityFiles:filteredBuildManifest.lowPriorityFiles.filter(f=>!f.includes("_buildManifest"))})}let Body=({children})=>inAmpMode?children:(0,jsx_runtime_namespaceObject.jsx)("div",{id:"__next",children:children}),renderDocument=async()=>{let documentInitialPropsRes,styles;async function loadDocumentInitialProps(renderShell){let renderPage=async(options={})=>{if(ctx.err&&ErrorDebug)return renderShell&&renderShell(App,Component),{html:await renderToString((0,jsx_runtime_namespaceObject.jsx)(Body,{children:(0,jsx_runtime_namespaceObject.jsx)(ErrorDebug,{error:ctx.err})})),head};if(dev&&(props.router||props.Component))throw Error("'router' and 'Component' can not be returned in getInitialProps from _app.js https://nextjs.org/docs/messages/cant-override-next-props");let{App:EnhancedApp,Component:EnhancedComponent}="function"==typeof options?{App:App,Component:options(Component)}:{App:options.enhanceApp?options.enhanceApp(App):App,Component:options.enhanceComponent?options.enhanceComponent(Component):Component},stream=await renderShell(EnhancedApp,EnhancedComponent);return await stream.allReady,{html:await streamToString(stream),head}},documentCtx={...ctx,renderPage},docProps=await loadGetInitialProps(Document,documentCtx);if(isResSent(res)&&!isSSG)return null;if(!docProps||"string"!=typeof docProps.html)throw Error(`"${getDisplayName(Document)}.getInitialProps()" should resolve to an object with a "html" prop set with a valid html string`);return{docProps,documentCtx}}Document.__NEXT_BUILTIN_DOCUMENT__;let renderContent=(_App,_Component)=>{let EnhancedApp=_App||App,EnhancedComponent=_Component||Component;return ctx.err&&ErrorDebug?(0,jsx_runtime_namespaceObject.jsx)(Body,{children:(0,jsx_runtime_namespaceObject.jsx)(ErrorDebug,{error:ctx.err})}):(0,jsx_runtime_namespaceObject.jsx)(Body,{children:(0,jsx_runtime_namespaceObject.jsx)(AppContainerWithIsomorphicFiberStructure,{children:renderPageTree(EnhancedApp,EnhancedComponent,{...props,router})})})},renderShell=async(EnhancedApp,EnhancedComponent)=>{let content=renderContent(EnhancedApp,EnhancedComponent);return await function({ReactDOMServer,element,streamOptions}){return(0,tracer_.getTracer)().trace(trace_constants.k0.renderToReadableStream,async()=>ReactDOMServer.renderToReadableStream(element,streamOptions))}({ReactDOMServer:server_edge_default(),element:content})},hasDocumentGetInitialProps=!!Document.getInitialProps,[rawStyledJsxInsertedHTML,content]=await Promise.all([renderToString(styledJsxInsertedHTML()),(async()=>{if(hasDocumentGetInitialProps){if(null===(documentInitialPropsRes=await loadDocumentInitialProps(renderShell)))return null;let{docProps}=documentInitialPropsRes;return docProps.html}{documentInitialPropsRes={};let stream=await renderShell(App,Component);return await stream.allReady,streamToString(stream)}})()]);if(null===content)return null;let{docProps}=documentInitialPropsRes||{};return hasDocumentGetInitialProps?(styles=docProps.styles,head=docProps.head):(styles=jsxStyleRegistry.styles(),jsxStyleRegistry.flush()),{contentHTML:rawStyledJsxInsertedHTML+content,documentElement:htmlProps=>(0,jsx_runtime_namespaceObject.jsx)(Document,{...htmlProps,...docProps}),head,headTags:[],styles}};null==(_getTracer_getRootSpanAttributes=(0,tracer_.getTracer)().getRootSpanAttributes())||_getTracer_getRootSpanAttributes.set("next.route",renderOpts.page);let documentResult=await (0,tracer_.getTracer)().trace(trace_constants.xj.renderDocument,{spanName:`render route (pages) ${renderOpts.page}`,attributes:{"next.route":renderOpts.page}},async()=>renderDocument());if(!documentResult)return new RenderResult(null,{metadata});let dynamicImportsIds=new Set,dynamicImports=new Set;for(let mod of reactLoadableModules){let manifestItem=reactLoadableManifest[mod];manifestItem&&(dynamicImportsIds.add(manifestItem.id),manifestItem.files.forEach(item=>{dynamicImports.add(item)}))}let hybridAmp=ampState.hybrid,docComponentsRendered={},{assetPrefix,buildId,customServer,defaultLocale,disableOptimizedLoading,domainLocales,locale,locales,runtimeConfig}=renderOpts,htmlProps={__NEXT_DATA__:{props,page:pathname,query,buildId,assetPrefix:""===assetPrefix?void 0:assetPrefix,runtimeConfig,nextExport:!0===nextExport||void 0,autoExport:!0===isAutoExport||void 0,isFallback,isExperimentalCompile,dynamicIds:0===dynamicImportsIds.size?void 0:Array.from(dynamicImportsIds),err:renderOpts.err?(err=renderOpts.err,dev?(source="server",source=err[symbolError]||"server",{name:err.name,source,message:strip_ansi_default()(err.message),stack:err.stack,digest:err.digest}):{name:"Internal Server Error.",message:"500 - Internal Server Error.",statusCode:500}):void 0,gsp:!!getStaticProps||void 0,gssp:!!getServerSideProps||void 0,customServer,gip:!!hasPageGetInitialProps||void 0,appGip:!defaultAppGetInitialProps||void 0,locale,locales,defaultLocale,domainLocales,isPreview:!0===isPreview||void 0,notFoundSrcPage:notFoundSrcPage&&dev?notFoundSrcPage:void 0},strictNextHead:renderOpts.strictNextHead,buildManifest:filteredBuildManifest,docComponentsRendered,dangerousAsPath:router.asPath,canonicalBase:!renderOpts.ampPath&&request_meta_getRequestMeta(req,"didStripLocale")?`${renderOpts.canonicalBase||""}/${renderOpts.locale}`:renderOpts.canonicalBase,ampPath,inAmpMode,isDevelopment:!!dev,hybridAmp,dynamicImports:Array.from(dynamicImports),assetPrefix,unstable_runtimeJS:void 0,unstable_JsPreload:pageConfig.unstable_JsPreload,assetQueryString,scriptLoader,locale,disableOptimizedLoading,head:documentResult.head,headTags:documentResult.headTags,styles:documentResult.styles,crossOrigin:renderOpts.crossOrigin,optimizeCss:renderOpts.optimizeCss,nextConfigOutput:renderOpts.nextConfigOutput,nextScriptWorkers:renderOpts.nextScriptWorkers,runtime:globalRuntime,largePageDataBytes:renderOpts.largePageDataBytes,nextFontManifest:renderOpts.nextFontManifest},document=(0,jsx_runtime_namespaceObject.jsx)(amp_context_shared_runtime_AmpStateContext.Provider,{value:ampState,children:(0,jsx_runtime_namespaceObject.jsx)(HtmlContext.Provider,{value:htmlProps,children:documentResult.documentElement(htmlProps)})}),documentHTML=await (0,tracer_.getTracer)().trace(trace_constants.xj.renderToString,async()=>renderToString(document));{let nonRenderedComponents=[];for(let comp of["Main","Head","NextScript","Html"])docComponentsRendered[comp]||nonRenderedComponents.push(comp);if(nonRenderedComponents.length){let missingComponentList=nonRenderedComponents.map(e=>`<${e} />`).join(", "),plural=1!==nonRenderedComponents.length?"s":"";console.warn(`Your custom Document (pages/_document) did not render all the required subcomponent${plural}.
 Missing component${plural}: ${missingComponentList}
 Read how to fix here: https://nextjs.org/docs/messages/missing-document-component`)}}let[renderTargetPrefix,renderTargetSuffix]=documentHTML.split("<next-js-internal-body-render-target></next-js-internal-body-render-target>",2),prefix="";documentHTML.startsWith(DOCTYPE)||(prefix+=DOCTYPE),prefix+=renderTargetPrefix,inAmpMode&&(prefix+="<!-- __NEXT_DATA__ -->");let content=prefix+documentResult.contentHTML+renderTargetSuffix;return new RenderResult(await postProcessHTML(pathname,content,renderOpts,{inAmpMode,hybridAmp}),{metadata})}let renderToHTML=(req,res,pathname,query,renderOpts)=>renderToHTMLImpl(req,res,pathname,query,renderOpts,renderOpts),ServerInsertedHTMLContext=external_react_default().createContext(null);function useServerInsertedHTML(callback){let addInsertedServerHTMLCallback=(0,external_react_namespaceObject.useContext)(ServerInsertedHTMLContext);addInsertedServerHTMLCallback&&addInsertedServerHTMLCallback(callback)}class PagesRouteModule extends RouteModule{constructor(options){super(options),this.components=options.components}render(req,res,context){return renderToHTMLImpl(req,res,context.page,context.query,context.renderOpts,{App:this.components.App,Document:this.components.Document})}}let vendored={contexts:entrypoints_namespaceObject},pages_module=PagesRouteModule})(),module.exports=__webpack_exports__})();
 //# sourceMappingURL=pages.runtime.dev.js.map
\ No newline at end of file

Diff for pages.runtime.prod.js

Diff too large to display

Diff for server.runtime.prod.js

Diff too large to display

Commit: e1f6e13

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

packages/next/src/build/webpack/plugins/build-manifest-plugin.ts

[no ci]

This reverts commit 85c2565.

[no ci]

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

Open

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 2 times, most recently from 459986a to b68f4eb Compare August 27, 2024 15:45

test: add current behavior

5da02ef

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

fix: include dynamic css to build manifest

a11a69f

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

Merge branch 'canary' into 08-01-test_add_current_repro

bd244f4

test: add green button

9d83e8b

huozhi reviewed Sep 4, 2024

View reviewed changes

packages/next/src/build/webpack/plugins/build-manifest-plugin.ts Outdated Show resolved Hide resolved

packages/next/src/build/webpack/plugins/build-manifest-plugin.ts Outdated Show resolved Hide resolved

fix

e9678f1

devjiwonchoi marked this pull request as draft September 5, 2024 13:59

devjiwonchoi added 26 commits September 6, 2024 08:59

test: simplify

5db8bda

Merge branch 'canary' into 08-01-test_add_current_repro

fd81f98

[no ci] update test

39fac18

mini css

1c908f3

revert build-manifest but types

7afa1e0

mini css

7a45075

no build-manifest

060c57e

clean up mini css

236c936

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

00f241e

wip

3ba7a56

nope, wrong

dff0235

separate dynamic import test

b9bb0fe

[no ci]

fix

c1e8596

Revert "infer types"

68b0240

This reverts commit 85c2565.

revert unnecessary change

2e6a0b8

test: edge

203019b

pages only

0f49f5d

test

0147004

add repro for dynamic import

9950f12

add route to react-loadable-manifest

0e8d92e

dynamic css

faf0123

test

9f4384c

[no ci]

revert

7eeb237

revert unnecessary changes

1ad8ba2

on demand

9a41a6b

on demand

e1f6e13

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

	// 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

Are you sure you want to change the base?

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

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