Next.js Todo应用遇ChunkLoadError及按钮触发页面重载问题

一、页面重载问题的修复 #

你的按钮放在<form>标签内部，按钮默认的type是submit，点击时会触发表单的默认提交行为，导致整个页面重载。

有两种修复方式：

1. 给按钮显式设置type="button"，阻止其默认提交行为：

<button type="button" onClick={handleSubClick} className="w-[70%]">
  Add Subtask
</button>

2. 在handleSubClick函数中通过事件对象阻止默认行为：

const handleSubClick = (e)=>{
  e.preventDefault(); // 阻止表单默认提交
  const newSub = '1';
  const newArr = [...subTasks, newSub]
  try{
    setSubTasks([...newArr]);
  }catch(e){console.log(e);}
}

二、ChunkLoadError问题的排查与解决 #

Uncaught ChunkLoadError: Loading chunk app-client-internals failed这类错误通常和Next.js的代码分割、热更新缓存有关，可尝试以下步骤：

• 重启开发服务器：停止当前的npm run dev或yarn dev进程，重新启动，很多热更新导致的chunk加载问题会被解决。
• 清除浏览器缓存：强制刷新页面（Ctrl+F5 / Cmd+Shift+R），清除浏览器中缓存的旧chunk文件。
• 检查Next.js版本：如果使用的是较旧的Next.js版本，可能存在已知的chunk加载bug，尝试升级到最新稳定版：

npm install next@latest
# 或
yarn add next@latest

• 验证组件的客户端标识：你的组件已经添加了'use client'指令，确保没有在服务端组件中错误引入该组件，避免服务端与客户端代码分割冲突。

建议先修复页面重载问题，再观察ChunkLoadError是否还会出现——有时候页面意外重载会干扰Next.js的热更新机制，导致chunk加载异常。

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