Vercel Next.js出现ChunkLoadError：删除依赖后刷新页面报错

你碰到的“重新安装依赖后首次访问正常，刷新就白屏并抛出ChunkLoadError: Loading chunk 0 failed”的问题，是两个问题叠加导致的：

• 项目依赖的多个Next.js插件已经停止维护，和当前Next.js版本、Vercel构建规则存在直接兼容冲突，导致chunk编号、输出路径错位
• 现有构建配置没有适配Vercel的CDN缓存策略，浏览器缓存的旧入口页面，引用了已经被新构建替换掉的chunk资源，找不到对应文件就触发加载失败

• 移除所有冗余的过时插件
  你当前配置中用到的@zeit/next-sass、@zeit/next-css、next-fonts、next-optimized-images都是Next.js生态早期的第三方插件，目前已全部停止维护，和Next.js 12及以上版本的内置构建规则存在直接冲突：
  • 先执行依赖卸载命令：npm uninstall @zeit/next-sass @zeit/next-css next-fonts next-compose-plugins next-optimized-images
  • Next.js 10及以上版本已经原生支持全局CSS、Sass加载、静态字体引用，不需要额外插件即可实现原有功能
  • 图片优化能力直接替换为官方提供的next/image组件，自带构建时压缩、CDN缓存适配能力，稳定性远高于旧的第三方插件
• 重构next.config.js配置，适配Vercel缓存规则
  移除插件后，需要补充chunk输出规则、静态资源缓存头配置，从根源上解决路径匹配问题，参考配置如下：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    // 自定义webpack chunk输出规则，保证文件名和内容哈希强绑定
    webpack: (config, { dev }) => {
      config.output.chunkFilename = dev
        ? 'static/chunks/[name].js'
        : 'static/chunks/[name].[contenthash].js';
      return config;
    },
    // 静态资源缓存配置，和Vercel CDN规则对齐
    async headers() {
      return [
        {
          source: '/_next/static/:path*',
          headers: [
            {
              key: 'Cache-Control',
              value: 'public, max-age=31536000, immutable',
            },
          ],
        },
      ];
    },
    // 原生Sass能力配置，替代旧的withSass插件
    sassOptions: {},
  }
  module.exports = nextConfig
  

• 增加全局错误兜底，避免用户直面白屏
  即使完成上述配置，还是可能存在用户本地缓存了旧版入口HTML的极端场景，可以在项目的_app.js入口文件中增加全局错误捕获：碰到ChunkLoadError时自动刷新一次页面，重新拉取最新资源文件：

  // 仅在客户端环境执行
  if (typeof window !== 'undefined') {
    window.addEventListener('unhandledrejection', (event) => {
      // 捕获chunk加载失败错误，自动刷新重拉资源
      if (event.reason?.name === 'ChunkLoadError') {
        window.location.reload();
      }
    })
  }
  

你观察到的“首次启动正常、刷新就报错”的表现，刚好对应问题本质：首次访问时浏览器没有旧缓存，能一次性拉取最新构建的所有chunk资源，访问自然正常；等浏览器把入口HTML缓存下来后，下次刷新时，HTML里引用的旧chunk地址已经被Vercel的新构建产物替换，就会出现文件加载失败、页面白屏的问题。

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