-
Notifications
You must be signed in to change notification settings - Fork 26.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(pages-dir): cannot load the same css module with both import
and next/dynamic
#68396
base: canary
Are you sure you want to change the base?
Conversation
This stack of pull requests is managed by Graphite. Learn more about stacking. Join @devjiwonchoi and the rest of your teammates on Graphite |
Failing test suitesCommit: e1f6e13
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
● 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
Read more about building and testing Next.js in contributing.md.
Expand output● pages-dir-css-module-next-dynamic-client-navigation › nodejs › should not remove style when navigating from static imported component to dynamic import
● pages-dir-css-module-next-dynamic-client-navigation › edge › should not remove style when navigating from static imported component to dynamic import
Read more about building and testing Next.js in contributing.md.
Expand output● ReactRefreshLogBox turbo › Module not found (missing global CSS)
Read more about building and testing Next.js in contributing.md. |
Stats from current PRDefault Build (Increase detected
|
vercel/next.js canary | vercel/next.js 08-01-test_add_current_repro | Change | |
---|---|---|---|
buildDuration | 17.5s | 18.3s | |
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 | |
Overall change | 130 kB | 131 kB |
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
next/dynamic
next/dynamic
import
and next/dynamic
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
459986a
to
b68f4eb
Compare
b68f4eb
to
3820b2b
Compare
3820b2b
to
a11a69f
Compare
[no ci]
This reverts commit 85c2565.
@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? |
@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! |
Thanks for your quick response :) |
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
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
After
Related Links
Fixes #33286
Fixes #47655
Fixes #68328
Closes NDX-145