这个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的小伙伴们,少踩坑。

相关推荐
李姆斯22 分钟前
管理是否可以被完全量化
前端·产品经理·团队管理
名字还没想好☜1 小时前
Next.js 中间件实战:鉴权、重定向与 A/B 分流
开发语言·前端·javascript·中间件·react·next.js
广州灵眸科技有限公司1 小时前
瑞芯微RV1126B开发板(EASY-EAI-PI2) INI文件操作
java·前端·javascript·网络·人工智能
江华森2 小时前
Web 开发基础:HTTP 与 REST
前端·网络协议·http
IT_陈寒2 小时前
Redis的KEYS命令把我搞崩溃了,改用SCAN才活过来
前端·人工智能·后端
Jackson__3 小时前
为什么 Agent 越聊越慢?聊聊 Context(上下文)管理
前端·agent·ai编程
KaMeidebaby3 小时前
卡梅德生物技术快报|抗体合成:多肽抗体合成工程化方案:Nsp2 保守肽多抗制备与多维度验证
前端·网络·数据库·人工智能·算法
青禾网络3 小时前
前端做音画匹配这件事,我从"随机塞"到"AI 自动对齐"
前端·github
2601_963771374 小时前
Hardening Enterprise WordPress Sites Against REST API Leaks and Bad Headers
前端·windows·word·php
蓝银草同学4 小时前
Stream 实战:博客列表排序、过滤与分页(AI 辅助学习 Java 8)
java·前端·后端