这个Error让我抓狂 :The default export is not a React Component in page: "/dashboard

前言

正如题目所示,在我学习和练习nextjs的官方教程,创建一个dashboard子路由的时候,照葫芦画瓢整完,准备看页面效果时,页面也不能正常提示,来了个大大的错误推展提示Call Stack 如下,让我百思不得其解,几波对照的程度已经是一个字母一个字母的去比对了,无果,这是提示我先关了电脑去吃饭了。

操作

app下创建一个子目录dashboard,dashboard目录下创建一个page.tsx文件,具体如下:

报错详细信息

shell 复制代码
 ✓ Compiled /dashboard in 267ms (512 modules)
 ⨯ Error: The default export is not a React Component in page: "/dashboard"
    at async Promise.all (index 0)
 ⨯ Error: The default export is not a React Component in page: "/dashboard"
    at async Promise.all (index 0)
digest: "3437657298"
 ⨯ Error: The default export is not a React Component in page: "/dashboard"
    at async Promise.all (index 0)
 ⨯ Error: The default export is not a React Component in page: "/dashboard"
    at async Promise.all (index 0)
digest: "3437657298"

虽然看到报错,根本不知道是什么原因导致的,也想不懂为啥会提示这报错,感觉没错

解决

凭着计算机是不会骗人的,依旧是先问AI,结果AI的回答并没有给出很好的解决方法,因为试了没有用。百思不得其解,也不知道什么原因导致的,最后我只能尝试将dashboard整个目录都删除掉后,重新新建,结果他又能正常编译和打开页面了!

然而当我再添加dashboard的layout.tsx文件时,控制台又重新打印了编译失败的错误,kao

这是为啥呢,我再次去掉layout.tsx文件的时候,他又恢复了正常,这就是问题的所在了,原来问题是出在了这个layout.tsx文件上,我马上想到了应该是这个文件中还没有添加内容导致的,我立马将该文件的内容复制粘贴到layout.tsx中保存,结果就没有报错了!

感悟

编程路上,始终都会有各种各样的问题出现,特别是越简单的地方越容易出错,有时候可能单词的拼错,可能是缺少一个字符等等,又比如我这里的问题,就是因为我刚创建了一个新的布局文件,文件中没有添加内容保存,自动编译就会出现路由报错问题(说明了在nextjs中,layout布局文件会影响路由的正常访问,至于为什么,后面如果了解到再做分享),这种细节上的出错却百思不得其解,往往会消耗我们大量的时间,结果一直无法解决问题,就卡住半天在那里了。这个问题解决了,也希望我这篇文章,能帮助到正在学习nextjs的小伙伴们,少踩坑。

相关推荐
小码哥_常6 分钟前
你发的原图可能暴露你家地址——聊聊图片 EXIF 隐私
前端
java1234_小锋17 分钟前
【技术专题】CSS3 网页技术 - CSS3 优先级
前端·css·css3
鸿蒙开发2 小时前
共享 Schema 与 SchemaFactory
前端·后端·harmonyos
屏什么录2 小时前
录屏超过两小时就卡顿崩盘?从参数调优到代码实现,一文彻底搞定长时间录屏
前端·音视频开发
计算机魔术师2 小时前
950亿怎么拆:Meta给AI基建配的三档弹药
前端
碳基生物猛吃膳食纤维2 小时前
结合DEEPSEEK和CHATGPT弄了个小脚本,批量检查商品主图
前端
绝世唐门三哥2 小时前
CSS 换行三剑客:overflow-wrap、word-break 与 white-space 完全指南
前端·css
kyriewen2 小时前
别再用防抖做懒加载了:120 张图只加载出 4 张
前端·javascript·程序员
计算机魔术师2 小时前
Hugging Face CEO 转评前 DOGE 研究人员用 AI 智能体渗透 Anthropic 系统事件
前端
IT_陈寒2 小时前
刚解决一个 Java 并发问题,这坑踩得我怀疑人生
前端·人工智能·后端