Next.js提示匿名箭头函数导致Fast Refresh无法保留组件状态如何解决

Git 推送被拒修复步骤 #

不要直接删除本地 .git 目录，提示远程版本更新大概率是你之前在 GitHub 网页端做过修改（比如编辑 README、合并 PR 等），远程产生了本地没有的提交。按以下操作可以保留所有本地修改完成推送：

• 暂存本地所有未提交的修改：git stash
• 拉取远程最新变更合并到本地分支：git pull origin 你的分支名（默认一般为 main 或 master）
• 还原之前暂存的本地修改：git stash pop
• 如有文件冲突手动解决冲突后，即可正常执行 git push 完成推送

Fast Refresh 警告排查方案 #

警告没有指向你排查的两个文件，是因为触发源多为其他隐蔽场景，按以下优先级排查即可：

1. 检查 Sidebar 组件的导出方式
   你在 Layout 中引入的 Sidebar 组件如果是匿名箭头函数导出，就会触发该警告，错误写法示例：

export default () => {
  // 组件逻辑
}

修改为具名函数导出即可：

export default function Sidebar({ activeTab }) {
  // 组件逻辑
}

2. 排查 pages 目录下的页面组件
   所有 pages 目录下的页面文件如果存在匿名箭头函数导出的情况，都会触发该警告，逐一检查修改即可。
3. 排查动态导入的写法
   如果项目中使用了 Next.js 的 dynamic 方法做组件懒加载，没有显式命名也会触发警告，错误写法示例：

const CustomComponent = dynamic(() => import('../components/CustomComponent'))

4. 排查依赖版本差异问题
   你将项目复制到新文件夹后大概率重新执行了依赖安装，若新安装的 Next.js 版本和原项目不一致，旧版本的 Fast Refresh 检查逻辑存在误报 bug。可以删除当前项目的 node_modules 文件夹、package-lock.json 或 yarn.lock 文件，将原项目中的依赖锁文件复制到新项目目录下重新执行 npm install 或 yarn install，保证依赖版本和原项目完全一致即可消除误报。

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