Next.js 15本地构建失败：/_not-found页面预渲染报错

问题现象 #

本地构建Next.js应用时，预渲染/_not-found页面触发错误，提示元素类型无效（预期字符串、类/函数组件但得到对象），最终构建直接退出失败。项目根目录已存在not-found.tsx文件，当前Node版本为v22.11.0。

错误日志 #

Error occurred prerendering page "/_not-found". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at nF ...
Export encountered an error on /_not-found/page: /_not-found, exiting the build.
 ⨯ Next.js build worker exited with code: 1 and signal: null

环境信息 #

• Node版本：v22.11.0
• 项目依赖配置（package.json）：

{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@gsap/react": "^2.1.2",
    "@strapi/blocks-react-renderer": "^1.0.2",
    "gsap": "^3.12.7",
    "leaflet": "^1.9.4",
    "lenis": "^1.2.3",
    "next": "^15.2.2",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-leaflet": "^5.0.0",
    "swiper": "^11.2.5",
    "yet-another-react-lightbox": "^3.21.8"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@svgr/webpack": "^8.1.0",
    "@tailwindcss/postcss": "^4",
    "@types/leaflet": "^1.9.16",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.2.2",
    "tailwindcss": "^4",
    "typescript": "^5"
  }
}

排查与解决思路 #

• 检查not-found.tsx导出方式：确保组件是默认导出的函数/类组件，而非对象。比如：
  错误示例：export const NotFound = {}
  正确示例：

  export default function NotFound() {
    return <div>404 Not Found</div>;
  }
  

• 排查组件内导入错误：查看not-found.tsx中是否存在导入方式错误，比如把第三方库的默认导出当成命名导入，或者反过来。

• 修复依赖版本兼容性：当前使用的React 19.0.0和Next.js 15.2.2属于较新版本，部分第三方库可能未完成适配。可以尝试：

  • 降级React到18.x稳定版，同步调整@types/react等依赖版本：

    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "@types/react": "^18",
    "@types/react-dom": "^18"
    

  • 检查react-leaflet、@strapi/blocks-react-renderer等库的官方文档，确认是否支持React 19，不支持则降级对应库版本。

• 清理缓存后重新构建：执行以下命令清除缓存，再尝试构建：

  rm -rf .next node_modules package-lock.json
  npm install
  npm run build
  

• 关闭TurboPack尝试构建：开发命令中使用了--turbopack，部分库可能与TurboPack兼容性不佳。修改dev脚本为next dev后，再执行构建命令。

内容的提问来源于stack exchange，提问作者Milos N.