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

相关推荐
Mr_Mao2 小时前
Naive Ultra:中后台 Naive UI 增强组件库
前端
前端小趴菜054 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~5 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.5 小时前
serviceWorker缓存资源
前端
RadiumAg6 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo6 小时前
ES6笔记2
开发语言·前端·javascript
yanlele7 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子8 小时前
React状态管理最佳实践
前端
烛阴8 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子8 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端