Vercel部署时出现TypeError: Cannot read property 'hash' of null报错如何解决

报错原因 #

这个报错是Next.js内置的webpack 5在生产构建阶段处理缓存时触发的类型错误，常见触发场景如下：

• 项目开启了webpack持久化缓存，Vercel构建环境中残留的旧缓存文件与当前项目依赖、配置不匹配
• 项目使用的Next.js版本低于12.1.0，该版本以下存在官方已知的webpack缓存处理bug
• 项目在next.config.js中自定义了webpack的output.hashFunction、output.hashDigest等哈希相关配置，与Vercel构建环境的默认规则冲突

可行解决方案 #

• 无缓存重新部署：进入Vercel项目的Deployments页面，找到对应失败的部署记录点击右侧三点菜单，选择「Redeploy」，取消勾选「Use existing build cache」后重新部署即可。本地验证时可先删除.next、node_modules/.cache文件夹后执行npm run build测试
• 升级Next.js版本：将项目的Next.js版本升级到12.1.0及以上的稳定版，官方已在该版本修复了对应webpack缓存问题
• 临时关闭webpack缓存：如果暂不打算升级版本，可在next.config.js中添加配置关闭webpack缓存：

module.exports = {
  webpack: (config) => {
    config.cache = false
    return config
  }
}

• 还原自定义webpack配置：如果之前修改过webpack的哈希相关output配置，删除自定义配置，使用Next.js默认的构建配置即可。

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