Next.js启动时遇ChunkLoadError报错，重载页面可临时解决

以下是针对该问题的可行解决方案：

1. 彻底清除缓存与依赖重建 #

• 删除Next.js构建缓存、依赖目录及锁文件：

  # Mac/Linux
  rm -rf .next node_modules package-lock.json
  # Windows
  rd /s /q .next node_modules package-lock.json
  

• 重新安装依赖：npm install
• 重启开发服务器：npm run dev

2. 禁用Webpack缓存或Fast Refresh优化 #

在next.config.js中添加以下配置，强制每次构建生成全新的chunk文件：

/** @type {import('next').NextConfig} */
const nextConfig = {
  fastRefresh: false,
  webpack: (config) => {
    config.cache = false;
    return config;
  },
};

module.exports = nextConfig;

该配置会关闭开发环境下的缓存策略，避免旧chunk文件干扰新构建。

3. 排查文件中的特殊字符 #

检查app/layout.js及其他app目录下的文件，是否存在不可见的特殊字符（如全角空格、非ASCII控制字符）：

• 在VS Code中开启"显示控制字符"功能（设置搜索render control characters并勾选）
• 逐行排查文件内容，删除异常字符后重启服务

4. 延长dev server的加载超时时间 #

在next.config.js中调整客户端超时设置，避免因网络或构建延迟导致的chunk加载失败：

const nextConfig = {
  devServer: {
    client: {
      timeout: 15000, // 将超时延长至15秒
    },
  },
};

5. 验证Node.js版本兼容性 #

确保使用的Node.js版本符合Next.js官方要求（Next.js 13+建议使用Node.js 18.x或20.x）：

• 执行node -v查看当前版本
• 若版本不符，使用nvm（Node版本管理器）切换至兼容版本

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