Next.js并行路由构建报错：TypeError: 无法读取entryCSSFiles属性

报错信息 #

Error occurred prerendering page. TypeError: Cannot read properties of undefined (reading 'entryCSSFiles')
    at rx (.../node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:127:5322)
    at Q.preloadCallbacks (.../node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:127:8342)
    at rI (.../node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:127:9080)
    at .../node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:127:7300
    at .../node_modules/next/dist/server/lib/trace/tracer.js:169:36
    at NoopContextManager.with (.../node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7062)
    at ContextAPI.with (.../node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:518)
    at NoopTracer.startActiveSpan (.../node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18093)
    at ProxyTracer.startActiveSpan (.../node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18854)
    at .../node_modules/next/dist/server/lib/trace/tracer.js:151:103
Export encountered an error on /SummaryPage 2, exiting the build.
 ⨯ Static worker exited with code: 1 and signal: null

项目文件结构 #

|-(main-route-group)
|---mainPage
|---page.js
|---default.js
|---layout.js
|-----@resultPage
|-----page.js
|-------SummaryPage1
|-------page.js
|-------SummaryPage2
|-------page.js

相关代码片段 #

mainPage/default.js #

import { redirect } from "next/navigation";

export default function mainPageDefault() {
    return redirect("/mainPage");
}

mainPage/layout.js #

export default function MainPageLayout({ children, result }) {
  const { displayResults } = StoreData();
  return (
    <>
      {children}
      {displayResults ? (
        <div className="w-full h-full space-y-5">
          {result}
        </div>
      ) : null}
    </>
  );
}

mainPage/page.js #

export default function mainPage(){
   const { setDisplayResults } = StoreData();
   return(
       <button onClick={()=>setDisplayResults(true)}/>
   );
}

@resultPage下子页面（如SummaryPage2/page.js） #

export default function ParallelPages(){
   return(
       //Render Table Data
   )
}

问题背景 #

实现并行路由做条件渲染后，开发环境运行正常，但执行yarn run build时预渲染失败，触发上述错误。

解决方案建议 #

1. 为并行路由子页面添加动态渲染配置
   构建时Next.js会尝试静态预渲染所有页面，若并行路由的子页面依赖客户端状态或动态数据，需在子页面文件顶部添加：

   export const dynamic = 'force-dynamic';
   

   强制页面在运行时动态渲染，避免预渲染阶段的资源加载问题。

2. 修正布局组件的客户端状态处理
   layout.js中StoreData()返回的displayResults是客户端状态，静态预渲染时无法获取有效值，导致result（并行路由内容）在预渲染阶段可能未被正确处理。需将布局组件标记为客户端组件：

   'use client'; // 顶部添加该指令
   import { StoreData } from '你的状态管理路径';
   
   export default function MainPageLayout({ children, result }) {
     const { displayResults } = StoreData();
     return (
       <>
         {children}
         {displayResults ? (
           <div className="w-full h-full space-y-5">
             {result}
           </div>
         ) : null}
       </>
     );
   }
   

3. 调整重定向逻辑的运行环境
   将mainPage/default.js改为客户端组件，添加'use client'指令，redirect在静态预渲染阶段可能引发冲突，客户端组件中执行重定向更符合Next.js路由规则：

   'use client';
   import { redirect } from "next/navigation";
   
   export default function mainPageDefault() {
       return redirect("/mainPage");
   }
   

4. 排查页面命名与路由匹配
   报错中出现/SummaryPage 2（含空格），但项目结构中是SummaryPage2，需确认是否存在文件名拼写错误或路由配置中的空格问题，修正后重新构建。

内容的提问来源于stack exchange，提问作者Sahan Ediriweera